微信小程序指南

四川建设厅小程序指南

微信小程序简介

    微信小程序定位轻型应用,这种形式可能会是未来移动互联网应用的主要形式，它的特点是小而快。是它不会替代所有App，微信小程序主要解决小应用问题，重点在于灵活、快捷、用完即走。

账号申请流程

1.注册账号

在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。

2.选择注册的账号类型

选择“小程序”，点击“查看类型区别”可查看不同类型账号的区别和优势

3.填写注册信息

填写未注册过公众平台、开发平台、企业号、未绑定个人号的邮箱和密码

4.激活邮箱

登录邮箱，查看激活邮件，点击激活链接

5.填写主体信息

点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。

6.选择主体类型

主体类型说明如下：

账号主体	范围
个人	18岁以上有国内身份信息的微信实名用户
企业	企业、分支机构、企业相关品牌。
企业（个体工商户）	个体工商户。
政府	国内、各级、各类政府机构、事业单位、具有行政职能的社会组织等。目前主要覆盖公安机构、党团机构、司法机构、交通机构、旅游机构、工商税务机构、市政机构等。
媒体	报纸、杂志、电视、电台、通讯社、其他等。
其他组织	不属于政府、媒体、企业或个人的类型。

7.填写主体信息并选择验证方式

企业类型帐号可选择两种主体验证方式：
    方式一：需要用公司的对公账户向腾讯公司打款来验证主体身份。打款信息在提交主体信息后可以查看到。
    方式二：通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。

政府、媒体、其他组织类型帐号，必须通过微信认证验证主体身份。认证通过前，小程序部分功能暂无法使用。

微信认证入口：登录小程序 - 设置 - 微信认证详情

填写管理员信息

8.确认主体信息不可变更

9.点击确认完成注册流程

选择对公打款的用户，请根据页面提示，向指定的收款帐号汇入指定金额。 注意：请在10天内完成汇款，否则将注册失败

选择通过微信认证验证主体身份的用户，完成注册流程后请尽快进行微信认证，认证完成之前部分功能暂不可使用。

微信工程简介

四川建设项目工程的整体目录规划如图：

- 首先微信小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用	说明
app.js	是	小程序逻辑	创建App的实例
app.json	是	小程序公共设置	标题栏、背景样式、刷新、路由路径、网络配置等
app.wxss	否	小程序公共样式表	美工样式

- 小程序其他文件如下：

文件	作用	说明
component	项目界面	考试模块、课程模块、班级模块、用户模块等
image	自定义组件	目前项目中有toast、对话框、提示框共有组件
pages	项目界面	考试模块、课程模块、班级模块、用户模块等
style	存放样式	目前没有使用到
utils	存放本地图片	目前图片资源存放本地，后期图片资源放远端请求。（小程序项目2M限制）
config.js	小程序相关接口配置文件	cas登录相关配置、各个环境的地址配置，以及各个接口地址
project.config.json	小程序工程配置	项目appid、基础库版本等

微信前期踩点思路

工程介绍

    四川省建设项目订阅号负责报名缴费流程，微信小程序主要负责在线学习、在线测试、教学教务、移动学习等功能，解决视频播放限制问题。四川建设小程序主要实现我的班级、兴趣班课程、班级详情、考试以及历史考试查阅等模块功能。

开发工具

    为了帮助开发简单和高效地开发和调试微信小程序，微信推出全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

最新版本下载地址（1.01.1712150）

windows 64 、 windows 32 、 mac

界面

登录页

在登录页，可以使用微信扫码登录开发者工具，开发工具将使用这个微信信息进行小程序的开发和调试

模式选择

开发者工具提供两种开发模式的选择。
1. 公众号网页调试。选择公众号网页调试，将直接进入公众号网页项目调试界面，在地址栏输入URL，即可调试改网页的微信授权以及微信JS-SDK功能
2. 小程序调试。选择小程序调试，将进入小程序本地项目管理页，可以新建、删除、修改本地的项目，或者选择进入已存在的本地项目

新建项目或是添加已有项目

符合以下条件，即可新建一个小程序项目路：
- 需要一个小程序的AppID；如果没有AppID，可以选择体验模式，体验模式有限制无法进行代码真机预览和上传等操作，部分API无法正常使用；
- 登录的微信账号是该AppID的开发者

主界面

开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。

代理设置

可以配置不使用代理，或使用系统代理，或使用自定义代理。

目前项目测试1、测试2网址代理，通过手动设置代理，结合fiddler进行配置。

在fiddler的菜单栏的Tools的host设置：

调试模式

调试工具

调试工具分为7大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

Wxml panel

Wxml panel 用于帮助开发者wxml转化后的界面。这里可以看到页面的结构树以及结构对应的wxss属性，同时可以通过修改对应wxss属性，在模拟器中实时看到修改的情况（仅为实时预览，无法保存到文件）。通过调试模块左上角的选择器，还可以快速定位页面中组件对应的wxml代码。

Sources panel

Sources panel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对文件进行编译的工作，所以Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会包裹define函数中，并且对于Page代码，在尾部会有require的主动调用。

Console panel

开发者可以在此输入和调试代码，显示错误日记和打印日记，便于排查错误和调试

Network Panel

用于观察和显示 request 和 socket 的请求情况

网络请求

    小程序框架API提供网络请求方法，即wx.request(Object),官方文档也有详细介绍，地址为 https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html，在这边不进行详细介绍。这边主要分析工程里面封装的网络请求utils/requesetUtil.js文件。

由于篇幅问题，这个网络请求类的代码分析移交到另外篇幅进行详细讲解，这边主要说下该类做了哪些业务处理：
- 支持Post和Get请求
- 保存对应域名下登录后状态的cookie值和获取登录状态cookie添加到网络请求头部header
- 登录过期处理流程
- 异步方法处理(Promise易于外部调取可以回调方法进行相应的业务处理)
- 网络请求日记打印（包含参数、请求地址、接口请求时间、接口网络各种状态日记）
- 请求参数包装（{header:{},data:{}}）

详细的代码分析可以到另外一个篇幅叫做“网络请求类封装”阅读下

生命周期

关于小程序生命周期，分两个部分理解：应用生命周期（左侧蓝色部分）和页面生命周期（右侧绿色部分）。

应用生命周期流程

1. 用户首次打开小程序，触发onLauch(全局触发一次)；
2. 小程序初始化完成后，触发onShow()，监听小程序显示；
3. 小程序前台进入后台，触发onHIde()；
4. 小程序从后台进入前台显示，触发 onShow方法；
5. 程序后台运行一定时间，或系统资源占用过高，会被销毁；

页面生命周期

1. 小程序注册完成，加载页面，触发onLoad方法；
2. 页面载入后触发onShow方法，显示页面；
3. 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次；
4. 当小程序后台运行或跳转到其他页面时，触发onHide方法；
5. 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法；
6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。同时，应用生命周期会影响到页面生命周期；

路由栈

在小程序中所有界面的路由全部由框架进行管理

框架以栈的形式维护了当前的所有页面。当发生由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	小程序打开的第一个页面
打开新页面	新页面入栈	调用 API wx.navigateTo 或使用组件
页面重定向	当前页面出栈，新页面入栈	调用 调用 API wx.redirectTo 或使用组件
页面返回	调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮
Tab切换	页面全部出栈，只留下新的 Tab 页面	调用 API wx.switchTab 或使用组件 或用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API wx.reLaunch 或使用组件

页面的路由的路径在app.json里面进行管理：

{
    "pages":{
      "pages/account/loginFail/loginFail",
    "pages/test/components/dailogDemo",
    "pages/account/login/login"
    ..............
  }
}

第一个路由路径默认小程序打开的页面，小程序的页面跳转限制跳转十个路径层次。

页面跳转页面参数传递

A界面跳转到B界面

A界面
wx.navigateTo({
      url: '../trainclassDetail/trainclassDetail' + "?trainingClassId=" + item.trainingClassId,
    })

B界面
onLoad: function (options) {
    this.setData({
      trainingClassId: options.trainingClassId
    })
  }

在B界面的生命周期通过生命周期函数参数options里面获取传递参数值。

数据绑定

整个开发框架的核心是一个响应的数据绑定系统。整个系统分视图层和逻辑层。框架可以让数据与视图非常简单地保持同步。
WXML的动态数据来自对应的Page的data,数据绑定使用Mustache语法（双大括号）将变量包起来。

实例

<view> {{ message }} view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

在{{}}可以进行简单的运算，例如三元运算、算数运算、逻辑判断、字符串运算、数据路径运算；并{{}}可以直接进行组合，构成新对象或者数组。

官方示例：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html

注意：组件的控制属性不能直接写boolean,需要{{true/false}},不然计算结果是一个字符串，转成boolean类型后代表真值。

<checkbox checked="{{false}}"> checkbox>

列表渲染

建议使用view作为视图容器，scroll-view存在会导致小程序的”enablePullDownRefresh”:true下拉使用有问题（在scrollview滑动到最上顶端，还是触发不到onPullDownRefresh()的回调刷新方法）。

列表使用视图容器要具备的控制属性：

<view class="hb-media-box" wx:for="{{trainingList}}" wx:for-index="idx" wx:key="key" data-item="{{item}}" bindtap='itemClick'>
view>

wx:for 控制属性绑定一个数组，即可使用数组中各项数据重复渲染该组件；
wx:for-item 可以指定数组当前元素的变量名（没有设置默认是item）
wx:for-index 可以指定数组当前下标的变量名
wx:key 如不提供wx:key，会报一个warning,只要明确知道是列表是静态，或者不关心其顺序，可以忽略
data-item 主要数组的item元素数据绑定到item上，在方法中可以获取该元素item数据

yearItemClick: function (e) {
    var item = e.currentTarget.dataset.item
}

列表触发加载更多：
监听方法有：

onReachBottom: function (event) {
}

事件处理

事件是视图层和逻辑层之间通信方式，将用户的行为反馈到逻辑层进行处理，可以将事件绑定到组件上，当触发到该事件，就会执行相对应的的事件进行逻辑处理，并且事件对象可以携带额外信息，如id/dataset/touches.

这边事件讲解，主要偏向工程常用的绑定事件和事件中数据的额外信息，其他事件如果想要了解，可以去官方的https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html有详细讲解，这边就不展开。

组件中绑定事件

  <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! view>

在相应的Page定义相应的事件的处理函数，参数是event.

Page({
  tapName: function(event) {
    console.log(event)
  }
})

在log日记中你可以看到信息如下

{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {
  "x":53,
  "y":14
},
"touches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],
"changedTouches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}]
}

系统组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
组件：
- 组件是视图层的基础组成单元
- 组件一些功能与微信风格的样式
- 一个组件通常包括 开始标签和结束标签，属性 用来修饰直接的，内容在标签内

"value">
  Content goes here ...

注意：所有组件与属性都是小写，以连字符-连接

视图容器

组件名	说明
view	视图容器
scroll-view	可滚动视图容器
swiper	滑块视图容器

基础内容

组件名	说明
icon	图标
text	文字
progress	进度条

表单

组件名	说明
button	按钮
form	表单
input	输入框
checkbox	多项选择器
radio	单项选择器
picker	列表选择器
picker-view	内嵌列表选择器
slider	滚动选择器
switch	开关选择器
label	标签

**导航

组件名	说明
navigator	应用链接

多媒体

组件名	说明
audio	音频
image	图片
video	视频

地图

组件名	说明
map	地图

基础内容

组件名	说明
canvas	画布

客服会话

组件名	说明
audcontact-buttonio	进入客服会话按钮

微信的组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

自定义组件

component文件夹存放工程里面的自定义组件，从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
自定义组件篇幅有点大，在另外的文章《自定义组件》有详细讲解如何自定义组件，也可以博客直接访问。

数据全局缓存

数据全局缓存其实就是全局变量对象、方法，放在app.js的App实例里面，里面存放当前用户信息，服务地址，以及一些公有工具类和方法。小程序里面的App实例是单例模。如下：
const app = getApp() 通过app实例去获取对应的全局变量对象、方法。

小程序限制条件

1. 接口只支持https网络协议;
2. 页面跳转层次只能到达10层;
3. 小程序大小容量最大只能2M;

登录流程