微信小程序基础
第1章 微信小程序基础
1.0了解电脑客户端网页结构https://www.runoob.com/html/html5-intro.html，可自学，客户端如何构造，可学习vue客户端设计，bootstrap客户端设计
1. 小程序与普通网页开发的区别
小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。
网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API（文档模型）和BOM API(浏览器模型)。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表1-1所示。
表1-1 小程序中三大运行环境也是有所区别的
1.1注册小程序账号
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。在手机微信上进行观察。
1. 申请帐号
进入小程序注册页https://mp.weixin.qq.com/wxopen/waregister?action=step1， 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。
登录 小程序后台https://mp.weixin.qq.com/ ，如图1-1所示。
图1-1 登录账号
补充所有信息，如图1-2所示。
图1-2 信息补充页面
点击“继续”按钮，注册成功。
2.查看APPID
登录 小程序后台https://mp.weixin.qq.com/ ，显示小程序发布流程页面，在此页面填充小程序信息可以发布程序（同学自己尝试发布），下面再进行阐述。左侧点击“开发”菜单，上面选择开发设置标签，如图1-3所示。在其上可以复制APPID。
图1-3 查找APPID及程序发布页面
1.2下载并安装小程序
（1） 前往 开发者工具下载页面
（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）
，根据自己的操作系统下载对应的安装包进行安装下面介绍如何安装和使用该工具。
（2） 打开后页面如图1-4所示，选择一款对应系统版本进行下载
图1-4 微信工具下载页面
（3） 下载好后直接双击安装，一直点击下一步即可。安装好后桌面图1-5所示
图1-5 开发工具图标
1.3创健和打开小程序
（1） 打开微信开发者工具，需要你用微信扫码登录。扫描界面如图1-6所示。
图1-6 微信小程序扫描界面
扫描后会弹出登录界面，点击登录按钮即可。进入微信小程序的开发界面。在左边菜单栏选择小程序/小游戏，然后再点击右边带+号的大按钮，显示新建微信小程序界面，设置程序名，选择项目目录，输入APPID，无APPID可选择测试号，其他默认即可，结果如图1-7所示。
图1-7 建立小程序新项目
点击新建按钮，生成hello小程序。如图1-8所示。
图1-8 第一个小程序界面
（2）小程序界面介绍
微信开发者工具，主要分为三个部分，模拟器，编辑器，以及调试器。模拟器就是模拟手机页面，我们可以对程序进行观察和测试使用；编辑器是用来书写代码的区域；调试器是来调试查看程序。我们可以通过选择左上方的绿色按钮来打开或者关闭这几个操作的页面。编译、预览、真机调试、切后台、清缓存按钮完成对应的功能，上传按钮实现项目发布。
（3）小程序结构目录
程序目录如图1-9所示，通过该图，可以了解程序的基本结构。
图1-9 小程序的基本结构
程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分（utils）由三个文件组成，必须放在项目的根目录，如图1-10。这些文件属于全局性文件。
图1-10 整体程序描述页文件
其他可以建立很多的页面，每个页面由四个文件组成，四种文件类型如图1-11所示。
图1-11 四种文件类型
小程序文件结构和传统web对比如下
| 结构 | 传统web | 微信小程序 |
| ---- | ---------- | ---------- |
| 结构 | HTML | WXML |
| 样式 | CSS | WXSS |
| 逻辑 | Javascript | Javascript |
| 配置 | 无 | JSON |
通过以上对比得出，传统web是三层结构。而微信小程序是四层结构，多了一层配置.json。
（4）小程序代码构成
通过上面观察，我们可以看到每个页面对应4个文件，
.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"
}
}
我们简单说一下这个配置各个项的含义:
1.pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2.window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
其他配置项细节可以参考文档 小程序的配置 app.json 。
工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
其他配置项细节可以参考文档 页面配置 。
u JSON 语法
这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
1.数字，包含浮点数和整数
2.字符串，需要包裹在双引号中
3.Bool值，true 或者 false
4.数组，需要包裹在方括号中 []
5.对象，需要包裹在大括号中 {}
6.Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
u 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 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：
1.标签名字有点不一样
往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
更多详细的组件参考小程序的能力
2.多了一些 wx:if 这样的属性以及这样的表达式
在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。
WXML 是这么写 :
<text>{{msg}}</text>
JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
更详细的文档可以参考 WXML
u WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
3.新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
4.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
5.此外 WXSS 仅支持部分 CSS 选择器
更详细的文档可以参考 WXSS 。
u JS 逻辑交互
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
Page({
clickMe:function(){
this.setData({msg:"Hello World"})
}
})
响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 。
此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。
（5）小程序的宿主环境
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图1-12所示。
图1-12 小程序通信模型
u 程序与页面
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
这个配置说明在 QuickStart 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。
于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
onLaunch:function(){
// 小程序启动之后 触发
}
})
整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 注册程序 App 。
接下来我们简单看看小程序的一个页面是怎么写的。
你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:
Page({
data:{// 参与页面渲染的数据
logs:[]
},
onLoad:function(){
// 页面渲染后 执行
}
})
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。
就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：
<map></map>
使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现，例如，我们希望地图一开始的中心的经纬度是广州，那么你需要声明地图的 longitude（中心经度） 和 latitude（中心纬度）两个属性:
<map longitude="广州经度" latitude="广州纬度"></map>
组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：
<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
当然你也可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等。
更多的组件可以参考 小程序的组件。
u API
为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。
要获取用户的地理位置时，只需要：
wx.getLocation({
type:'wgs84',
success:(res)=>{
varlatitude=res.latitude// 纬度
varlongitude=res.longitude// 经度
}
})
调用微信扫一扫能力，只需要：
wx.scanCode({
success:(res)=>{
console.log(res)
}
})
需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。
1.4小程序协同工作和发布
1.4.1团队协同工作
多数情况下，一个团队多人同时参与同一个小程序项目，每个角色所承担的工作或者权限不一样，中大公司的分工更为仔细。为了更形象的表达团队不同角色的关系以及权限的管理，我们通过虚拟一个项目成员组织结构来描述日常如何协同合作完成一个小程序的发布，组织关系如图1-13所示。
图1-13 协同开发关系图
项目管理成员负责统筹整个项目的进展和风险、把控小程序对外发布的节奏，产品组提出需求，设计组与产品讨论并对需求进行抽象，设计出可视化流程与图形，输出设计方案。开发组依据设计方案，进行程序代码的编写，代码编写完成后，产品组与设计组体验小程序的整体流程，测试组编写测试用例并对小程序进行各种边界测试。项目一般的成员构成与工作流程如图1-14所示。
图1-14 工作流程图
小程序成员管理包括对小程序项目成员及体验成员的管理。
- 项目成员：表示参与小程序开发、运营的成员，可登陆小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。
- 体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。
不同项目成员拥有不同的权限，从而保证小程序开发安全有序。
1.4.2 小程序发布上线
一个小程序从开发完到上线一般要经过 预览-> 上传代码 -> 提交审核 -> 发布等步骤。
1.预览
使用开发者工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。
点击开发者工具顶部操作栏的预览按钮，开发者工具会自动打包当前项目，并上传小程序代码至微信的服务器，成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。
2.上传代码
同预览不同，上传代码是用于提交体验或者审核使用的。
点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。
上传成功之后，登录小程序管理后台-开发管理-开发版本 就可以找到刚提交上传的版本了。
可以将这个版本设置 体验版 或者是 提交审核
3.提交审核
为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。
在开发者工具中上传了小程序代码之后，登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。
在开发版本的列表中，点击提交审核,照页面提示，填写相关的信息，即可以将小程序提交审核。
需要注意的是，请开发者严格测试了版本之后，再提交审核， 过多的审核不通过，可能会影响后续的时间。
4.发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。
点击发布后，即可发布小程序。小程序提供了两种发布模式：全量发布和分阶段发布。全量发布是指当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本。分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布我们也称为灰度发布。一般来说，普通小程序发布时采用全量发布即可，当小程序承载的功能越来越多，使用的用户数越来越多时，采用分阶段发布是一个非常好的控制风险的办法。
小程序码
很多场景下用户会通过扫码快速进入一个小程序，在小程序设计的初期，小程序平台提供的二维码的形式。我们发现用户在扫一个二维码时，他并不知道当前这次扫码会出现什么样的服务，因为二维码的背后有可能是公众号、小程序、网页服务、支付页面、添加好友等不同的服务。为了让用户在扫码之前就有一个明确的预期，因此微信设计了小程序码，如图1-14所示。
1.5新建一个网页
我们再新创建一个名为hello的页面。首先打开全局文件app.josn，然后在pages属性里加入”pages/hello/hello”,一定要在上一段代码后面加上逗号。然后点击保存，这样我们就新创建了一个hello页面。
图1-15 新建一个页面
这里说明一点，显示的页面是有顺序的，如果你想第一个把hello页面在模拟器里显示，你需要将他的创建代码放在最前面。
第2章 小程序编程基础
2.1 配置小程序
2.1.1全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多
tab 等。
Json 数据格式是{}，花括号内包含键-值（key-value）对，“变量名”：数值，多个数值对用逗号分割，如果一个变量有多个数值（数组），则用[]括在一起，如果数值仍然是数值对，则用{}将数值对括起来，中间加上逗号。Json格式如图2-1所示：
图2-1 Json的格式
访问时，访问对应的变量获取数值。
1.定义的json变量和数值
（1）“pages”：定义所有页面信息，第一个网页为起始运行网页。如："pages/index/index",
（2）“windows“：全局默认窗口属性值（json）数据。下面讲解。
（3）"tabBar":小程序底部导航（底部菜单栏），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏，可视其为并列的第一级菜单。对于整体设计可考虑这种方法。
tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabBar属性如表2-1
表2-1 tabBar属性
其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如表2-2所示。
表2-2 list属性
（4）networkTimeout属性可以设置各种网络请求的超时时间
（5）debug属性
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题
（6）其它
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
以下是一个包含了部分常用配置选项的 app.json ：
【案例1】 app.json属性设置
{
"pages":[
"pages/index/index",
"pages/logs/index"
],
"window":{
"navigationBarTitleText":"Demo"
},
"tabBar":{
"list":[{
"pagePath":"pages/index/index",
"text":"首页"
},{
"pagePath":"pages/logs/logs",
"text":"日志"
}]
},
"networkTimeout":{
"request":10000,
"downloadFile":10000
},
"debug":true,
"navigateToMiniProgramAppIdList":[
"wxe5f52902cf4de896"
]
}
2.1.2页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。具体实例如下所示：
{
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"微信接口功能演示",
"backgroundColor":"#eeeeee",
"backgroundTextStyle":"light"
}
具体配置情况如表2-3
表2-3 window属性
2.1.3 sitemap配置
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。
具体配置说明
1.页面收录设置：可对整个小程序的索引进行关闭，小程序管理后台-设置-基本设置-页面收录设置；详情
2.sitemap 配置：可对特定页面的索引进行关闭
小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。
{
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
Page数值设置为*，表示都可以索引；*可以设为网页；allow可以改为disallow，表示不允许检索。
{
"rules":[{
"action":"allow",
"page":"path/to/page",
"params":["a","b"],
"matching":"inclusive"
},{
"action":"allow",
"page":"*"
}]
}
包含 a 和 b 参数的 path/to/page 页面会被微信优先索引，其他页面都会被索引。
2.1.4 APP（）
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
1.object参数说明
具体说明如表2-4所述。
表2-4 app（）object参数
2.各个object参数的具体表现形式
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
3.前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
4. onLaunch, onShow 参数，如表2-5所示。
表2-5 onLaunch, onShow 参数表
5. onPageNotFound
当要打开的页面不存在，会回调这个监听器，并带上以下信息，如表2-6所示。
表2-6 回调的信息表
具体实例
App({
onPageNotFound(res) {
wx.redirectTo({
url: 'pages/...'
}) // 如果是 tabbar 页面，请使用 wx.switchTab
} })
2.2 小程序框架
2.2.1场量值
1.场景值
场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表。由于Android系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值。
2.获取场景值
- 对于小程序，可以在
App的onLaunch和onShow，或wx.getLaunchOptionsSync 中获取上述场景值。 - 对于小游戏，可以在 wx.getLaunchOptionsSync 和 wx.onShow 中获取上述场景值
返回来源信息的场景
部分场景值下还可以获取来源应用、公众号或小程序的appId。获取方式请参考对应API的参考文。场景值参看表2-7。
表2-7 场景值
2.2.2 逻辑层
回到网页部分，学习网页的设计问题。
1.注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
具体格式如下：
App({
onLaunch(options){
// Do something initial when launch.
},
onShow(options){
// Do something when show.
},
onHide(){
// Do something when hide.
},
onError(msg){
console.log(msg)
},
globalData:'I am global data'
})
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App示例，获取App上的数据或调用开发者注册在 App 上的函数。
// xxx.js
constappInstance=getApp()
console.log(appInstance.globalData)// I am global data
2.注册页面
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
使用 Page 构造器注册页面，查看index.js.
(1)定义app函数实例：const app = getApp()
利用app可调用app.js中的数据和函数。
（2） page实例
Page({
data:{
text:"This is page data."
},
onLoad:function(options){
// 页面创建时执行
},
onShow:function(){
// 页面出现在前台时执行
},
onReady:function(){
// 页面首次渲染完毕时执行
},
onHide:function(){
// 页面从前台变为后台时执行
},
onUnload:function(){
// 页面销毁时执行
},
onPullDownRefresh:function(){
// 触发下拉刷新时执行
},
onReachBottom:function(){
// 页面触底时执行
},
onShareAppMessage:function(){
// 页面被用户分享时执行
},
onPageScroll:function(){
// 页面滚动时执行
},
onResize:function(){
// 页面尺寸变化时执行
},
onTabItemTap(item){
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap:function(){
this.setData({
text:'Set some data for updating view.'
},function(){
// this is setData callback
})
},
// 自由数据
customData:{
hi:'MINA'
}
})
关于程序实例参数的说明，如表2-8所示。
表2-8 关于page中参数的说明表
|
属性 |
类型 |
说明 |
|
data |
Object |
页面的初始数据 |
|
function |
生命周期回调—监听页面加载 |
|
|
function |
生命周期回调—监听页面显示 |
|
|
function |
生命周期回调—监听页面初次渲染完成 |
|
|
function |
生命周期回调—监听页面隐藏 |
|
|
function |
生命周期回调—监听页面卸载 |
|
|
function |
监听用户下拉动作 |
|
|
function |
页面上拉触底事件的处理函数 |
|
|
function |
用户点击右上角转发 |
|
|
function |
页面滚动触发事件的处理函数 |
|
|
function |
页面尺寸改变时触发，详见 响应显示区域变化 |
|
|
function |
当前是 tab 页时，点击 tab 时触发 |
|
|
其他 |
any |
开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问 |
（3）使用 Component 构造器构造页面
Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。
此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。
【实例】
Page({
data:{
text:"This is page data."
},
methods:{
onLoad:function(options){
// 页面创建时执行
},
onPullDownRefresh:function(){
// 下拉刷新时执行
},
// 事件响应函数
viewTap:function(){
// ...
}
}
})
这种方法类似于自定义组件，可以像自定义组件一样使用 behaviors 等高级特性。
3.页面路由：
在小程序中所有页面的路由全部由框架进行管理。
（1）页面栈：框架以栈的形式维护了当前的所有页面。开发者可以使用 getCurrentPages() 函数获取当前页面栈。
（2）路由方式：对于路由的触发方式、页面栈的表现方式以及页面生命周期函数如表2-9所示。
表2-9 路由触发方式与生命周期
|
路由方式 |
页面栈表现 |
触发时机 |
路由前页面 |
路由后页面 |
|
初始化 |
新页面入栈 |
小程序打开的第一个页面 |
|
onLoad, onShow |
|
打开新页面 |
新页面入栈 |
调用 API wx.navigateTo |
onHide |
onLoad, onShow |
|
页面重定向 |
当前页面出栈，新页面入栈 |
调用 API wx.redirectTo |
onUnload |
onLoad, onShow |
|
页面返回 |
页面不断出栈，直到目标返回页 |
调用 API wx.navigateBack |
onUnload |
onShow |
|
Tab 切换 |
页面全部出栈，只留下新的 Tab 页面 |
调用 API wx.switchTab |
|
各种情况请参考表2-10 |
|
重加载 |
页面全部出栈，只留下新的页面 |
调用 API wx.reLaunch |
onUnload |
onShow |
Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）。
表2-10 tab切换的生命周期
注意问题：
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的onLoad中获取。
4.模块化
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
(1)注意:
exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports来暴露模块接口，除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。
【实例】
在common.js中定义函数
// common.js
functionsayHello(name){
console.log(`Hello ${name} !`)
}
functionsayGoodbye(name){
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello=sayHello
exports.sayGoodbye=sayGoodbye
在需要使用这些模块的文件中，使用 require 将公共代码引入
varcommon=require('common.js')
Page({
helloMINA:function(){
common.sayHello('MINA')
},
goodbyeMINA:function(){
common.sayGoodbye('MINA')
}
})
（2）文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
通过全局函数 getApp 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：
①// app.js
App({
globalData:1
})
②// a.js
// The localValue can only be used in file a.js.
varlocalValue='a'
// Get the app instance.
varapp=getApp()
// Get the global data and change it.
app.globalData++
③// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
varlocalValue='b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)
5.API
小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。详细介绍请参考 API 文档。
通常，在小程序 API 有以下几种类型：
（1） 监听API：我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等
这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。
【代码示例】
wx.onCompassChange(function(res){
console.log(res.direction)
})
（2）同步 API
我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，详情参见 API 文档中的说明。
同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。
【代码示例】
try{
wx.setStorageSync('key','value')
}catch(e){
console.error(e)
}
（3）异步API
大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：
回调函数的参数
success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：
异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值，可以用来实现更丰富的功能，如 wx.request，wx.connectSocket 等。
【代码示例】
wx.login({
success(res){
console.log(res.code)
}
})
success: res => { …… }
或 success:function(res){……}
（4）关于API
如表2-11所示。
表2-11 API列表
|
API名称 |
功能说明 |
返回值 |
实例 |
类型 |
|
判断小程序的API，回调，参数，组件等是否在当前版本可用 |
true/false |
// 对象的属性或方法
// wx接口参数、回调或者返回值
// 组件的属性
|
基础 |
|
|
将 Base64 字符串转成 ArrayBuffer 对象 |
ArrayBuffer
|
const const
|
基础 |
|
|
wx.arrayBufferToBase64 |
将 ArrayBuffer 对象转成 Base64 字符串 |
String |
const const |
基础 |
|
wx.getSystemInfo 的同步版本 |
Object res |
|
系统 |
具体情况参考：https://developers.weixin.qq.com/miniprogram/dev/api/
这里不做逐一介绍。
2.2.3 视图层
1.wxml
1）数据绑定
①简单绑定
在网页对应的.js文件中定义动态数据。
Page({
data:{
message:'Hello MINA!'
}
}）
引用时，数据绑定使用 Mustache 语法（双大括号）将变量包起来。
<view> {{ message }} </view>
<view>相当于html网页中的div，可横向布局。
②组件属性
在.js中定义标号。
Page({
data:{
id:0
}
})
在网页中引用
<view id="item-{{id}}"> </view>
③控件属性
定义：
Page({
data:{
condition:true
}
})
引用：
<view wx:if="{{condition}}"> </view>
布尔型数据引用：
<checkbox checked="{{false}}"> </checkbox>
④运算
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view>{{a + b}} + {{c}} + d</view>
Page({
data:{
a:1,
b:2,
c:3
}
})
view中的内容为 3 + 3 + d。
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name:'MINA'
}
})
数据路径运算
<view>{{object.key}} {{array[0]}}</view>
Page({
data:{
object:{
key:'Hello '
},
array:['MINA']
}
})
⑤组合
也可以在 Mustache 内直接进行组合，构成新的对象或者数组。
数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data:{
zero:0
}
})
最终组合成数组[0, 1, 2, 3, 4]。
对象
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data:{
a:1,
b:2
}
})
最终组合成的对象是 {for: 1, bar: 2}
也可以用扩展运算符 ... 来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data:{
obj1:{
a:1,
b:2
},
obj2:{
c:3,
d:4
}
}
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
如果对象的 key 和 value 相同，也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
data:{
foo:'my-foo',
bar:'my-bar'
}
})
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。
注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
data:{
obj1:{
a:1,
b:2
},
obj2:{
b:3,
c:4
},
a:5
}
})
最终组合成的对象是 {a: 5, b: 3, c: 6}。
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}</view>
2）列表渲染
（1）wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
①定义数组：
Page({
data:{
array:[{
message:'foo',
},{
message:'bar'
}]
}
})
②引用
<view wx:for="{{array}}">
{{index}}: {{item.message}}</view>
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}</view>
wx:for 也可以嵌套，下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}</view>
</view>
</view>
（2）block wx:for
类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}">
<view>{{index}}:</view>
<view>{{item}}</view>
</block>
（3）wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数 据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
示例代码：
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch">Switch</button>
<button bindtap="addToFront">Add to the front</button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront">Add to the front</button>
Page({
data:{
objectArray:[
{id:5,unique:'unique_5'},
{id:4,unique:'unique_4'},
{id:3,unique:'unique_3'},
{id:2,unique:'unique_2'},
{id:1,unique:'unique_1'},
{id:0,unique:'unique_0'},
],
numberArray:[1,2,3,4]
},
switch:function(e){
constlength=this.data.objectArray.length
for(leti=0;i<length;++i){
constx=Math.floor(Math.random()*length)
consty=Math.floor(Math.random()*length)
consttemp=this.data.objectArray[x]
this.data.objectArray[x]=this.data.objectArray[y]
this.data.objectArray[y]=temp
}
this.setData({
objectArray:this.data.objectArray
})
},
addToFront:function(e){
constlength=this.data.objectArray.length
this.data.objectArray=[{id:length,unique:'unique_'+length}].concat(this.data.objectArray)
this.setData({
objectArray:this.data.objectArray
})
},
addNumberToFront:function(e){
this.data.numberArray=[this.data.numberArray.length+1].concat(this.data.numberArray)
this.setData({
numberArray:this.data.numberArray
})
}
})
注意：
当 wx:for 的值为字符串时，会将字符串解析成字符串数组
<view wx:for="array">
{{item}}</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}</view>
注意： 花括号和引号之间如果有空格，将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}</view>
3）条件渲染
（1）wx:if
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else>3</view>
(2)block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
(3)wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
4.模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
（1）定义模板
使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text>{{index}}: {{msg}}</text>
<text>Time: {{time}}</text>
</view>
</template>
（2）使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<template is="msgItem" data="{{...item}}"/>
Page({
data:{
item:{
index:0,
msg:'this is a template',
time:'2016-09-15'
}
}
})
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
<template name="odd">
<view>odd</view>
</template>
<template name="even">
<view>even</view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
（3）模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。
5）引用
WXML 提供两种文件引用方式import和include。
（1）import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
（2）import 的作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
<!-- A.wxml -->
<template name="A">
<text>A template</text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text>B template</text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/><!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
（3）include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view>body</view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view> footer </view>
2.wxss
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：
- 尺寸单位
- 样式导入
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
尺寸单位
|
设备 |
rpx换算px (屏幕宽度/750) |
px换算rpx (750/屏幕宽度) |
|
iPhone5 |
1rpx = 0.42px |
1px = 2.34rpx |
|
iPhone6 |
1rpx = 0.5px |
1px = 2rpx |
|
iPhone6 Plus |
1rpx = 0.552px |
1px = 1.81rpx |
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/
.small-p{
padding:5px;
}
/** app.wxss **/
@import"common.wxss";
.middle-p{
padding:15px;
}
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
- class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上
.，样式类名之间用空格分隔。
<view style="color:{{color}};" />
<view class="normal_view" />
选择器
目前支持的选择器有：
|
选择器 |
样例 |
样例描述 |
|
.class |
|
选择所有拥有 class="intro" 的组件 |
|
#id |
|
选择拥有 id="firstname" 的组件 |
|
element |
|
选择所有 view 组件 |
|
element, element |
|
选择所有文档的 view 组件和所有的 checkbox 组件 |
|
::after |
|
在 view 组件后边插入内容 |
|
::before |
|
在 view 组件前边插入内容 |
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
3.wxs
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意
- WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
- WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
- WXS 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。
页面渲染
<!--wxml-->
<wxs module="m1">
var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>
页面输出：
hello world数据处理
// page.js
Page({
data:{
array:[1,2,3,4,5,1,2,3,4]
}
})
<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max;} module.exports.getMax = getMax;</wxs>
<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view>{{m1.getMax(array)}}</view>
页面输出：
54.事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。
- 在组件中绑定一个事件处理函数。
事件的使用方式
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
- 在相应的Page定义中写上相应的事件处理函数，参数是event。
- 可以看到log出来的信息大致如下：
Page({
tapName:function(event){
console.log(event)
}
})
{
"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
}]
}
使用WXS函数响应事件
基础库 2.4.4 开始支持，低版本需做兼容处理。
从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：
- 在组件中绑定和注册事件处理的WXS函数。
- test.wxs文件实现tapName函数
<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}"> Click me! </view>
**注：绑定的WXS函数必须用{{}}括起来**
function tapName(event, ownerInstance) { console.log('tap wechat', JSON.stringify(event))}module.exports = { tapName: tapName}ownerInstance包含了一些方法，可以设置组件的样式和class，具体包含的方法以及为什么要用WXS函数响应事件，请点击查看详情。
事件详解
事件分类
事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
WXML的冒泡事件列表：
|
类型 |
触发条件 |
最低版本 |
|
touchstart |
手指触摸动作开始 |
|
|
touchmove |
手指触摸后移动 |
|
|
touchcancel |
手指触摸动作被打断，如来电提醒，弹窗 |
|
|
touchend |
手指触摸动作结束 |
|
|
tap |
手指触摸后马上离开 |
|
|
longpress |
手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 |
|
|
longtap |
手指触摸后，超过350ms再离开（推荐使用longpress事件代替） |
|
|
transitionend |
会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
|
|
animationstart |
会在一个 WXSS animation 动画开始时触发 |
|
|
animationiteration |
会在一个 WXSS animation 一次迭代结束时触发 |
|
|
animationend |
会在一个 WXSS animation 动画完成时触发 |
|
|
touchforcechange |
在支持 3D Touch 的 iPhone 设备，重按时会触发 |
注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)
事件绑定和冒泡
事件绑定的写法同组件的属性，以 key、value 的形式。
- key 以
bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。 - value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。基础库版本 2.8.1 起，原生组件也支持
bind后紧跟冒号的写法。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。
<view id="outer" bindtap="handleTap1">
outer view<view id="middle" catchtap="handleTap2">
middle view<view id="inner" bindtap="handleTap3">
inner view</view>
</view>
</view>
事件的捕获阶段
自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view</view>
</view>
如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view</view>
</view>
事件对象
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent 基础事件对象属性列表：
|
属性 |
类型 |
说明 |
基础库版本 |
|
String |
事件类型 |
||
|
Integer |
事件生成时的时间戳 |
||
|
Object |
触发事件的组件的一些属性值集合 |
||
|
Object |
当前组件的一些属性值集合 |
||
|
Object |
事件标记数据 |
CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：
|
属性 |
类型 |
说明 |
|
Object |
额外的信息 |
TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：
|
属性 |
类型 |
说明 |
|
Array |
触摸事件，当前停留在屏幕中的触摸点信息的数组 |
|
|
Array |
触摸事件，当前变化的触摸点信息的数组 |
特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget。
type
代表事件的类型。
timeStamp
页面打开到触发事件所经过的毫秒数。
target
触发事件的源组件。
|
属性 |
类型 |
说明 |
|
id |
String |
事件源组件的id |
|
Object |
事件源组件上由 |
currentTarget
事件绑定的当前组件。
|
属性 |
类型 |
说明 |
|
id |
String |
当前组件的id |
|
Object |
当前组件上由 |
说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。
dataset
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：
data-element-type，最终会呈现为event.currentTarget.dataset.elementType；data-elementType，最终会呈现为event.currentTarget.dataset.elementtype。
示例：
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">DataSet Test</view>
Page({
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta===1// - 会转为驼峰写法
event.currentTarget.dataset.alphabeta===2// 大写会转为小写
}
})
mark
在基础库版本 2.7.1 以上，可以使用 mark 来识别具体触发事件的 target 节点。此外， mark 还可以用于承载一些自定义数据（类似于 dataset ）。
当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark 。）
代码示例：
<view mark:myMark="last" bindtap="bindViewTap">
<button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button>
</view>
在上述 WXML 中，如果按钮被点击，将触发 bindViewTap 和 bindButtonTap 两个事件，事件携带的 event.mark 将包含 myMark 和 anotherMark 两项。
Page({
bindViewTap:function(e){
e.mark.myMark==="last"// true
e.mark.anotherMark==="leaf"// true
}
})
mark 和 dataset 很相似，主要区别在于： mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。
细节注意事项：
- 如果存在同名的
mark，父节点的mark会被子节点覆盖。 - 在自定义组件中接收事件时，
mark不包含自定义组件外的节点的mark。 - 不同于
dataset，节点的mark不会做连字符和大小写转换。
touches
touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。
Touch 对象
|
属性 |
类型 |
说明 |
|
identifier |
Number |
触摸点的标识符 |
|
pageX, pageY |
Number |
距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴 |
|
clientX, clientY |
Number |
距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴 |
CanvasTouch 对象
|
属性 |
类型 |
说明 |
特殊说明 |
|
identifier |
Number |
触摸点的标识符 |
|
|
x, y |
Number |
距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴 |
changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。
detail
自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
2)关于wxs响应事件
（1）背景：有频繁用户交互的效果在小程序上表现是比较卡顿的，例如页面有 2 个元素 A 和 B，用户在 A 上做 touchmove 手势，要求 B 也跟随移动，movable-view就是一个典型的例子。一次 touchmove 事件的响应过程为：
a、touchmove 事件从视图层（Webview）抛到逻辑层（App Service）
b、逻辑层（App Service）处理 touchmove 事件，再通过 setData 来改变 B 的位置
一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。
（2）实现方案
本方案基本的思路是减少通信的次数，让事件在视图层（Webview）响应。小程序的框架分为视图层（Webview）和逻辑层（App Service），这样分层的目的是管控，开发者的代码只能运行在逻辑层（App Service），而这个思路就必须要让开发者的代码运行在视图层（Webview），如下图所示的流程：
使用 WXS 函数用来响应小程序事件，目前只能响应内置组件的事件，不支持自定义组件事件。WXS 函数的除了纯逻辑的运算，还可以通过封装好的ComponentDescriptor 实例来访问以及设置组件的 class 和样式，对于交互动画，设置 style 和 class 足够了。WXS 函数的例子如下：
varwxsFunction=function(event, ownerInstance){
varinstance=ownerInstance.selectComponent('.classSelector')// 返回组件的实例
instance.setStyle({
"font-size":"14px"// 支持rpx
})
instance.getDataset()
instance.setClass(className)
// ...
returnfalse// 不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault
}
其中入参 event 是小程序事件对象基础上多了 event.instance 来表示触发事件的组件的 ComponentDescriptor 实例。ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。
ComponentDescriptor的定义如下：
|
方法 |
参数 |
描述 |
|
selectComponent |
selector对象 |
返回组件的 |
|
selectAllComponents |
selector对象数组 |
返回组件的 |
|
setStyle |
Object/string |
设置组件样式，支持 |
|
addClass/removeClass/ hasClass |
string |
设置组件的 class。设置的 class 优先级比组件 wxml 里面定义的 class 高。不能设置最顶层页面的 class。 |
|
getDataset |
无 |
返回当前组件/页面的 dataset 对象 |
|
callMethod |
(funcName:string, args:object) |
调用当前组件/页面在逻辑层（App Service）定义的函数。funcName表示函数名称，args表示函数的参数。 |
|
requestAnimationFrame |
Function |
和原生 |
|
getState |
无 |
返回一个object对象，当有局部变量需要存储起来后续使用的时候用这个方法。 |
|
triggerEvent |
(eventName, detail) |
和组件的triggerEvent一致。 |
WXS 运行在视图层（Webview），里面的逻辑毕竟能做的事件比较少，需要有一个机制和逻辑层（App Service）开发者的代码通信，上面的 callMethod是 WXS 里面调用逻辑层（App Service）开发者的代码的方法，而 WxsPropObserver 是逻辑层（App Service）开发者的代码调用 WXS 逻辑的机制。
（3）使用方法
- WXML定义事件：
<wxs module="test" src="./test.wxs"></wxs>
<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>
上面的change:prop（属性前面带change:前缀）是在 prop 属性被设置的时候触发 WXS 函数，值必须用{{}}括起来。类似 Component 定义的 properties 里面的 observer 属性，在setData({propValue: newValue})调用之后会触发。
注意：WXS函数必须用{{}}括起来。当 prop 的值被设置 WXS 函数就会触发，而不只是值发生改变，所以在页面初始化的时候会调用一次WxsPropObserver的函数。
- WXS文件
test.wxs里面定义并导出事件处理函数和属性改变触发的函数：
module.exports = { touchmove: function(event, instance) { console.log('log event', JSON.stringify(event)) }, propObserver: function(newValue, oldValue, ownerInstance, instance) { console.log('prop observer', newValue, oldValue) }}更多示例请查看在开发者工具中预览效果
Tips
目前还不支持原生组件的事件、input和textarea组件的 bindinput 事件
1.02.1901170及以后版本的开发者工具上支持交互动画，最低版本基础库是2.4.4
目前在WXS函数里面仅支持console.log方式打日志定位问题，注意连续的重复日志会被过滤掉。
2.2.4 基础组件
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。详细介绍请参考组件文档。
1.什么是组件：
组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。
<tagname property="value">
Content goes here ...</tagname>
注意：所有组件与属性都是小写，以连字符-连接
2.属性类型
|
类型 |
描述 |
注解 |
|
Boolean |
布尔值 |
组件写上该属性，不管是什么值都被当作 |
|
Number |
数字 |
|
|
String |
字符串 |
|
|
Array |
数组 |
|
|
Object |
对象 |
|
|
EventHandler |
事件处理函数名 |
|
|
Any |
任意属性 |
3.公共属性
所有组件都有以下属性：
|
属性名 |
类型 |
描述 |
注解 |
|
id |
String |
组件的唯一标示 |
保持整个页面唯一 |
|
class |
String |
组件的样式类 |
在对应的 WXSS 中定义的样式类 |
|
style |
String |
组件的内联样式 |
可以动态设置的内联样式 |
|
hidden |
Boolean |
组件是否显示 |
所有组件默认显示 |
|
data-* |
Any |
自定义属性 |
组件上触发的事件时，会发送给事件处理函数 |
|
bind* / catch* |
EventHandler |
组件的事件 |
详见事件 |
4.特殊属性
几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。
5.各种组件
网页参考：https://developers.weixin.qq.com/miniprogram/dev/component/
1）视图容器
（1）名称与说明：cover-image，覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
属性列表
|
属性 |
类型 |
必填？ |
说明 |
版本 |
|
src |
string |
否 |
图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。 |
|
|
bindload |
eventhandle |
否 |
图片加载成功时触发 |
2.1.0 |
|
|
|
否 |
|
|
（2）名称与说明：view，视图容器，常用容器
2.3小程序运行
浙公网安备 33010602011771号