微信小程序开发文档 第70页

页面配置 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 完整配置项说明请参考小程序页面配置 例如： { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 完整配置项说明请参考小程序全局配置 以下是一个包含了部分常用配置选项的 app.json ： { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/index", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 完整配置项说明请参考小程序全局配置

小程序代码构成 ​在上一章中，我们通过开发者工具快速创建了一个 QuickStart 项目。你可以留意到这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 接下来我们分别看看这4种文件的作用。 JSON 配置 JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。 我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。 小程序配置 app.json app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下： { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } 我们简单说一下这个配置各个项的含义: pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。 其他配置项细节可以参考文档 小程序的配置 app.json 。 工具配置 project.config.json 通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。 考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。 其他配置项细节可以参考文档 开发者工具的配置 。 页面配置 page.json 这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。 如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。 其他配置项细节可以参考文档 页面配置 。 JSON 语法 这里说一下小程序里JSON配置的一些注意事项。 JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。 JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。 数字，包含浮点数和整数 字符串，需要包裹在双引号中 Bool值，true 或者 false 数组，需要包裹在方括号中 [] 对象，需要包裹在大括号中 {} Null 还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。 WXML 模板 从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。 同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容: <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button> <block wx:else> <image src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> 和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下： 标签名字有点不一样往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。更多详细的组件讲述参考下个章节 小程序的能力...

开始 开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。 跟随这个教程，开始你的小程序之旅吧！ 申请帐号 进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。 在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。 登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。 小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。 有了小程序帐号之后，我们需要一个工具来开发小程序。 安装开发工具 前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。 打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！ 你的第一个小程序 新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。 接下来我们来预览一下这个小程序的效果。 编译预览 点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。 通过这个章节，你已经成功创建了你的第一个小程序，并且在微信客户端上体验到它流畅的表现。 下个章节，我们一起来看看这个小程序的代码构成。

auth.code2Session

EntryList 基础库 2.11.0 开始支持，低版本需做兼容处理。 EntryList 对象 方法： Array EntryList.getEntries() 基础库 2.11.0 开始支持，低版本需做兼容处理。 该方法返回当前列表中的所有性能数据 返回值 Array Array EntryList.getEntriesByName(string name, string entryType) 基础库 2.11.0 开始支持，低版本需做兼容处理。 获取当前列表中所有名称为 [name] 且类型为 [entryType] 的性能数据 参数 string name string entryType 返回值 Array Array EntryList.getEntriesByType(string entryType) 基础库 2.11.0 开始支持，低版本需做兼容处理。 获取当前列表中所有类型为 [entryType] 的性能数据 参数 string entryType 返回值 Array

PerformanceObserver 基础库 2.11.0 开始支持，低版本需做兼容处理。 PerformanceObserver 对象， 用于监听性能相关事件 属性 Array supportedEntryTypes 获取当前支持的所有性能指标类型 方法： PerformanceObserver.disconnect() 基础库 2.11.0 开始支持，低版本需做兼容处理。 停止监听 PerformanceObserver.observe(Object options) 基础库 2.11.0 开始支持，低版本需做兼容处理。 开始监听 参数 Object options 设置 type 监听单个类型的指标，设置 entryTypes 监听多个类型指标。

功能概述 “小程序助手” 是微信公众平台发布的官方小程序，旨在帮助小程序相关成员在手机端更方便、及时地管理小程序，扫描下方小程序码即可立即体验。 “小程序助手”在”小程序开发助手”的基础上进行了升级，保留了原有的版本查看功能并新增了成员管理、基础数据及性能分析等主要功能。 1 版本查看：使用者可以根据自己的角色，查看小程序的线上版、体验版或开发版。 角色与权限的对应关系如下表所示。 查看线上版 查看体验版 查看开发版 管理员 √ √ √ 运营者 √ √ 开发者 √ √ √ 数据分析者（基础分析） √ √ 数据分析者（交易分析） √ √ 体验者 √ √ 2 成员管理：支持通过搜索微信号添加小程序项目成员或体验成员，其中项目成员包括运营者、开发者、数据分析者（基础分析）、数据分析者（交易分析）。 角色与权限的对应关系如下表所示。 新增/修改项目成员 新增/修改体验成员 搜索成员 管理员 √ √ √ 运营者 √ √ 开发者 √ √ 数据分析者（基础分析） √ √ 数据分析者（交易分析） √ √ 体验者 3 基础数据：管理员及数据分析者（基础分析）可查看相关小程序的数据概况、访问情况、实时统计及用户画像等关键运营数据。 4 性能分析：支持监控小程序的启动总耗时、下载耗时及初次渲染耗时等基本性能指标，辅助开发者分析性能数据并优化小程序体验。 此外，”小程序助手”还包含了我的帐号、公告、站内信、开放社区及文档等基础模块。

周期性更新 基础库 2.8.0 开始支持，低版本需做兼容处理。 生效条件：用户七天内使用过的小程序 周期性更新能够在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间，增强在弱网条件下的可用性。 使用流程 1. 配置数据下载地址 登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据周期性更新，点击开启，填写数据下载地址。 2. 设置 TOKEN 第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性。 示例： App({ onLaunch() { wx.setBackgroundFetchToken({ token: 'xxx' }) } }) 3. 微信客户端定期拉取数据 微信客户端会在一定的网络条件下，每隔 12 小时（以上一次成功更新的时间为准）向配置的数据下载地址发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地。 参数 类型 说明 appid String 小程序标识 token String 前面设置的 TOKEN timestamp Number 时间戳，微信客户端发起请求的时间 query 参数会使用 urlencode 处理 开发者服务器接口返回的数据类型应为字符串，且大小应不超过 256KB，否则将无法缓存数据 4. 读取数据 用户启动小程序时，调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据。 示例： App({ onLaunch() { wx.getBackgroundFetchData({ fetchType: 'periodic', success(res) { console.log(res.fetchedData) // 缓存数据 console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳 } }) } }) 调试方法 由于微信客户端每隔 12 个小时才会发起一次请求，调试周期性更新功能会显得不太方便。 因此为了方便调试周期性数据。