【微信小程序】开发与配置

---

前言

准备学习一下怎么开发微信小程序，主要是跟着微信官方文档进行学习，在这里记录一下。

---

一、开发工具

【微信开发者工具】

• 根据个人使用的操作系统下载对应版本的开发者工具即可
  官网下载地址-点击跳转

二、开发步骤

1.申请账号

1. 去小程序注册页面注册一个小程序。
2. 注册账号信息
3. 激活邮箱
4. 登记信息

每个邮箱仅能申请一个小程序

2.新建项目

在微信开发者工具中新建一个项目，在AppID一栏输入刚刚注册的微信小程序AppID，即可开始开发。

3.发布上线（未完成）

还没尝试过, 等我的第一个小程序写完了再来补这一块 =）

1. 上传代码

• 点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，这里版本号以及项目备注是为了方便管理员检查版本使用的。

2. 提交审核

• 在开发者工具中上传了小程序代码之后，登录 小程序管理后台 - 版本管理 - 开发版本 找到提交上传的版本。
• 在开发版本的列表中，点击 提交审核 按照页面提示，填写相关的信息，即可以将小程序提交审核。
• 上传成功之后，登录小程序管理后台 - 版本管理 - 开发版本 就可以找到刚提交上传的版本了。
• 可以将这个版本设置 体验版 或者是 提交审核

3. 发布

• 审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。

三、小程序代码构成

1. .json 后缀的 JSON 配置文件
   • app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
   • project.config.json是开发者开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项，方便换电脑时配置开发环境。
   • page.json是独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等。
2. .wxml 后缀的 WXML 模板文件
   • 类似HTML。
3. .wxss 后缀的 WXSS 样式文件
   • 类似CSS。
4. .js 后缀的 JS 脚本逻辑文件
   • 逻辑交互脚本文件。

四、小程序运行逻辑

1. 微信客户端在打开小程序之前，会下载整个小程序的代码包到本地。
2. app.json 的 pages 字段就可以知道你当前小程序的所有页面路径。
3. 打开首页（默认pages目录下的第一个页面作为首页，可修改全局配置指定首页）
4. 小程序启动后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

五、小程序配置

1. 全局配置（app.json）

配置项

必填配置项

属性	类型	描述	最低版本
pages	string[]	页面路径列表
sitemapLocation	string	指明 sitemap.json 的位置

- pages

• 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
• 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

小程序中新增/减少页面，都需要对 pages 数组进行修改。

- sitemapLocation

• 指明 sitemap.json 的位置；默认sitemap.json 即在 app.json 同级目录下名字的 sitemap.json文件

可选配置项

属性	类型	描述	最低版本
entryPagePath	string	小程序默认启动首页
window	Object	全局的默认窗口表现
tabBar	Object	底部 tab 栏的表现
networkTimeout	Object	网络超时时间
debug	boolean	是否开启 debug 模式，默认关闭
functionalPages	boolean	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	分包结构配置	1.7.3
workers	string	Worker代码放置的目录	1.9.90
requiredBackgroundModes	string[]	需要在后台使用的能力，如「音乐播放」
requiredPrivateInfos	string[]	调用的地理位置相关隐私接口
plugins	Object	使用到的插件	1.9.6
preloadRule	Object	分包预下载规则	2.3.0
resizable	boolean	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭	2.3.0
usingComponents	Object	全局自定义组件配置	开发者工具 1.02.1810190
permission	Object	小程序接口权限相关设置	微信客户端 7.0.0
style	string	指定使用升级后的weui样式	2.8.0
useExtendedLib	Object	指定需要引用的扩展库	2.2.1
entranceDeclare	Object	微信消息用小程序打开	微信客户端 7.0.9
darkmode	boolean	小程序支持 DarkMode	2.11.0
themeLocation	string	指明 theme.json 的位置，darkmode为true为必填	开发者工具 1.03.2004271
lazyCodeLoading	string	配置自定义组件代码按需注入	2.11.1
singlePage	Object	单页模式相关配置	2.12.0
supportedMaterials	Object	聊天素材小程序打开相关配置 2.14.3
serviceProviderTicket	string	定制化型服务商票据
embeddedAppIdList	string[]	半屏小程序 appId	2.20.1
halfPage	Object	视频号直播半屏场景设置	2.18.0
debugOptions	Object	调试相关配置	2.22.1
enablePassiveEvent	Object或boolean	touch 事件监听是否为 passive	2.24.1
resolveAlias	Object	自定义模块映射规则
renderer	string	全局默认的渲染后端 2.30.4
rendererOptions	Object	渲染后端选项 2.31.1
componentFramework	string	组件框架