【微信小程序-0基础入门】小程序代码的构成

目录

小程序代码的构成-项目结构

小程序代码的构成 - JSON 配置文件

1. JSON 配置文件的作用

2. app.json 文件

3. project.config.json 文件

4. sitemap.json 文件

5. 页面的 .json 配置文件

6. 新建小程序页面

7. 修改项目首页

---

个人主页：个人主页

系列专栏：系列专栏【微信小程序】

小程序代码的构成-项目结构

1. 了解项目的基本组成结构

2. 小程序页面的组成部分

小程序代码的构成 - JSON 配置文件

1. JSON 配置文件的作用

JSON 配置文件的作用

2. app.json 文件

app.json 文件

3. project.config.json 文件

project.config.json 文件

4. sitemap.json 文件

微信现已开放 小程序内搜索 ，效果类似于 PC 网页的 SEO。sitemap.json 文件用来 配置小程序页面是否允许 微信索引 。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

 如果不想被搜索，可以把allow 改成 disallow

注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

5. 页面的 .json 配置文件

小程序中的每一个页面，可以使用 .json 文件来 对本页面的窗口外观进行配置 ， 页面中的配置项会覆盖 app.json 的 window 中相同的配置项 。例如：

 

这是app.js里面的内容

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

效果：

 我们再去index.json中添加 "navigationBarBackgroundColor": "#ff1111"

 

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff1111"
}

效果：

 

6. 新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件

之前：

  "pages": [
    "pages/index/index",
    "pages/logs/logs"
 
    
  ],

效果：

 

 添加一个路径：

  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/tsj/tsj"
    
  ],

效果：

 

7. 修改项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页 面，当作项目首页进行渲染，如图所示：

 调换顺序后，显示的内容改变：