从 0 到 1 开发微信小程序（3）—小程序框架配置
1、小程序框架
1.1、全局配置
1.1.1、Pages
意义：
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
开发目录：
1.1.1.1、entryPagePath
指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。指定 entryPagePath 时，则为指定小程序的默认启动路径（首页）
配置如下：
1.1.1.2、生成页面方式
第一种方式
先建文件夹，假设为 info，页面为 info，则创建流程为：
打开 app.json 添加如下
第二种方式：
直接在 app.json 中添加目录，就会自己创建
保存之后
总结：我们可以发现第二种方式更好，因为少了很多步骤，可以偷偷懒！
1.1.2、window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
修改 app.json 文件中的 window 属性配置
展示效果：
1.1.3、tabBar 与属性
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
修改 app.json 配置文件，增加 tabBar 属性配置
展示效果：
1.1.4、常用其他配置
1.1.4.1、sitemapLocation
指明 sitemap.json 的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件
1.1.4.2、style
基础库 2.8.0 开始支持，低版本需做兼容处理。微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。
1.1.4.3、networkTimeout
各类网络请求的超时时间，单位均为毫秒。
1.1.4.4、debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
1.1.4.5、functionalPages
基础库 2.1.0 开始支持，低版本需做兼容处理。插件所有者小程序需要设置这一项来启用插件功能页。
1.1.4.5、subpackages
微信客户端 6.6.0 ，基础库 1.7.3 及以上版本支持启用分包加载时，声明项目分包结构。写成 subPackages 也支持。
1.1.4.6、workers
基础库 1.9.90 开始支持，低版本需做兼容处理。使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录
1.1.4.7、requiredBackgroundModes
微信客户端 6.7.2 及以上版本支持申明需要后台运行的能力，类型为数组。目前支持以下项目：
audio: 后台音乐播放
location: 后台定位
如：
注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。
1.1.4.8、requiredPrivateInfos
自 2022 年 7 月 14 日后发布的小程序，使用以下 8 个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。申明需要使用的地理位置相关接口，类型为数组。目前支持以下项目：
getFuzzyLocation: 获取模糊地理位置
getLocation: 获取精确地理位置
onLocationChange: 监听试试地理位置变化事件
startLocationUpdate: 接收位置消息（前台）
startLocationUpdateBackground: 接收位置消息（前后台）
chooseLocation: 打开地图选择位置
choosePoi: 打开 POI 列表选择位置
chooseAddress: 获取用户地址信息
如：
注：若使用以上接口，均需在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。
1.1.4.9、debugOptions(真机可看)
小程序调试相关配置项
FPS 面板：
为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率。
开启方式：
1.1.4.10、permission
微信客户端 7.0.0 及以上版本支持小程序接口权限相关设置。字段类型为 Object，结构为：
PermissionObject 结构
如：
app.json 文件配置如下
1.1.4.11、usingComponents
开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。建议仅在此声明几乎所有页面都会用到的自定义组件。注 1：全局自定义组件会视为被所有页面依赖，会在所有页面启动时进行初始化，影响启动性能且会占用主包大小。只被个别页面或分包引用的自定义组件应尽量在页面配置中声明。 注 2：在全局声明使用率低的自定义组件会大幅影响按需注入的效果。
1.1.5、单页面配置(指定每个页面的标题等)
app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 XXX.json 文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）
文件内容为一个 JSON 对象，有以下属性：
注：并不是所有 app.json 中的配置都可以在页面覆盖或单独指定，仅限于本文档包含的选项。
注：iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
配置方式如下：
index.json 文件中的配置如下：
展示效果为：
1.1.6、公共样式（全局改变）
在项目根目录的 app.wxss 文件为小程序公的共样式表，相当与 CSS 初始化文件配置
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：
尺寸单位
样式导入
1.1.6.1、公共样式
在 app.wxss 文件中添加样式
项目中所有的页面的 text 文本都会呈现红色
1.1.6.2、尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况在 news 页面的 wxml 文件中增加下列代码
在 app.wxss 文件中，增加 box 盒子的样式
在 iphone5 上的效果，元素的宽高是 85px
在 iphone6 上的效果，元素的宽高是 100px
1.1.6.3、样式导入
使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束在项目根目录下创建 common 文件夹，并创建 common.wxss 文件，增加 box 的样式
在 app.wxss 文件中引入 common.wxss 文件
此时，刚刚所创建的 box 也加载了引入文件的样式。
1.1.7、注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
展示效果为：
1.1.8、全局属性
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。在 app.js 文件中增加全局属性
我们在 info.js 文件中读取全局属性
修改 info.wxml 文件显示内容
展示效果：
1.2、页面配置
1.2.1、页面的生命周期函数
注册小程序中的一个页面。指定页面的生命周期函数
在 info.js 中添加以下内容：
展示效果：
生命周期函数的作用
在不同的生命周期函数，根据业务需求，可以增加业务。例如：我们可以在 onShow 函数中修改 data 中的数据
最后：建议大家把小程序的这几个生命周期记住！！！！！
1.2.2、页面的 Data 对象
简单理解就是后端的数据，怎么展示在前端中，一般都是通过这个 data 对象，就是页面第一次渲染使用的初始数据。
页面加载时，data 中的数据将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON 的类型：字符串，数字，布尔值，对象，数组
例子如下：在 info.js 中加入以下配置
在 info.wxml 中添加
展示效果：
如果我们想修改 data 对象里面的值，可以这样写：
展示效果如下：我们发现 flag，num 都改了
版权声明: 本文为 InfoQ 作者【哲】的原创文章。
原文链接:【http://xie.infoq.cn/article/b3ea65b7d4013d52b809bb16a】。文章转载请联系作者。
爱情是以年单位，以白头携老目的，以你主语 2020.04.15 加入
精通MYSQL，JAVA，对算法，架构有一定了解； 对财务资金，出行，订单业务有一定了解
评论