微信小程序开发(2)—项目的组成篇

一.小程序目录的构成

1. pages

   用来存放所有小程序的页面

2. utils

   用来存放工具性质的模块（例如：格式化时间的自定义模块）

3. app.js

   小程序项目的入口文件 — main.js

4. app.json

   小程序项目的全局配置文件

5. app.wxss

   小程序项目的全局样式文件

6. project.config.json

   项目的配置文件

7. sitemap.json

   用来配置小程序及其页面是够允许被微信索引 – SEO – 搜索引擎优化

二.小程序页面构成:

小程序页面由4个基本文件组成

.js

文件 – 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等

.json

文件 – 当前页面的配置文件，配置页面的外观、表现等

.wxml

文件 – 页面的模板结构文件

.wxss

文件 – 当前页面的样式表文件

示例:

三.小程序中的 4 种配置文件

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现

小程序项目通过设置不同的 .json 配置文件，对小程序项目进行不同级别的配置。

小程序项目中有4 种json文件:

1. 项目根目录中

   app.json

   文件:全局配置文件✨
2. 页面文件夹中

   xxx.json

   文件: 本页面窗口外观配置文件✨
3. 项目根目录中

   project.config.json

   文件: 开发工具配置文件
4. 项目根目录中

   sitemap.json

   文件: 是否允许微信搜索

1. app.json

app.json 是当前小程序的全局配置文件

全局配置文件就是指配置好以后，能够影响到每一个页面

包括了小程序的所有页面路径、窗口外观、界面表现、设置网络超时时间、底部 tab 等

具体参考:小程序全局配置

app.json

中常用的几个配置项及其作用:

字段名	作用说明	类型
pages(✨必填)	页面路径列表,指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息	string[]
sitemapLocation (✨必填)	指明 sitemap.json 的位置	string
window	全局的默认窗口表现	Object
tabBar	底部 tab 栏的表现	Object
networkTimeout	网络超时时间	Object
style	指定使用升级后的weui样式;“style”: "v2"可表明启用新版的组件样式	string

示例:

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo",
    "pages/test/test"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/demo/demo",
      "text": "demo"
    },{
      "pagePath": "pages/test/test",
      "text": "test"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

           

2. xxx.json

小程序中的每一个页面，可以使用

.json

文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖

app.json

中的

window

中的配置项

详情参考: 小程序页面配置

xxx.json

中常用的几个配置项及其作用:

属性	描述	类型	默认值
usingComponents✨	页面自定义组件配置	Object
navigationBarBackgroundColor	导航栏背景颜色	HexColor	#000000
navigationBarTextStyle	导航栏标题颜色，仅支持 black / white	string	white
navigationBarTitleText	导航栏标题文字内容	string
backgroundColor	窗口的背景色	HexColor	#ffffff
backgroundTextStyle	下拉 loading 的样式，仅支持 dark / light	string	dark
enablePullDownRefresh✨	是否开启当前页面下拉刷新。	boolean	false
onReachBottomDistance✨	页面上拉触底事件触发时距页面底部距离，单位为px。	number	50
disableScroll	设置为 true 则页面整体不能上下滚动。	boolean	boolean
initialRenderingCache	页面初始渲染缓存配置	string

3. sitemap.json

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

详情参考: 小程序sitemap配置

属性	描述	类型	必填
rules	索引规则列表	Object[]	是

4. project.config.json

记录对小程序开发工具所做的个性化配置

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

详情参考 : 小程序工具配置

属性	描述	类型
packOptions	打包配置选项]	Object
setting	项目配置	Object
compileType	编译类型	String
libVersion	基础库版本	String
appid	项目的appid,只在新建项目时读取	String
projectname	项目名字,只在新建项目时读取	String
debugOptions	调试配置选项	Object
scripts	自定义预处理	Object
staticServerOptions
isGameTourist
condition	编译模式，增加编译模式时，会添加到下面的对应数组	Object

示例:

{
    "description": "项目配置文件",  //描述
    "packOptions": {  //用以配置打包时对符合指定规则的文件或文件夹进行忽略
        "ignore": []
    },
    "setting": {  //项目设置
        "urlCheck": false,  //不检查安全域名和 TLS 版本
        "es6": true,  //启用 es6 转 es5
        "postcss": true,  //上传代码时样式自动补全
        "minified": true,  //上传代码时自动压缩
        "newFeature": true  //新特征，文档中未描述
    },
    "compileType": "miniprogram",  //编译类型，miniprogram为普通小程序项目
    "libVersion": "2.3.0",  //基础库版本
    "appid": "touristappid",  //AppID
    "projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO",  //项目名字，只在新建项目时读取,urlDecode解码(路径解码)
    "debugOptions": {
        "hidedInDevtools": []  //配置调试时于调试器 Sources 面板隐藏源代码的hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。
    },
    "scripts": {},  //自定义预处理的命令 beforeCompile编译前预处理命令、beforePreview预览前预处理命令、beforeUpload上传前预处理命令
    "condition": {  //编译模式，增加编译模式时，会添加到下面的对应数组
        "search": {   
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "plugin": {  //插件
            "current": -1,
            "list": []
        },
        "game": {  //小游戏
            "list": []
        },
        "miniprogram": {  //小程序
            "current": -1,
            "list": []
        }
    }
}