微信小程序笔记（一）
关键字
WeixinJSBrige
微信 Web 资源离线存储
每个公众号下所有 Web App 累计最多可缓存 5M 的资源。
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端
响应的数据绑定
配置
app.json 整体风格配置
page.json 页面风格配置
project.config.json 项目插件配置，类似于package.json
注意点
JSON key值为双引号
wxss单位为rpx，运算由小程序底层完成？如何运算。可以写一个全局app.wxss用来做全局样式
js 修改变量语法类似react setState ，只不过这里是setData
小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
一个小程序有多个页面，所以存在多个WebView线程，1个JsCore线程，js线程与渲染线程由微信（Native）进行协调通信，请求也由Native转发
多数小程序提供的API调用都是异步的
小程序的装载过程
先经过json文件初始化，之后装在wxml结构和wxss样式，最后装载js文件
每个界面都有一个Page实例，在整个页面渲染完成后，会调用onLoad函数
sitemap
配置小程序是否会被微信索引
没有 sitemap.json 则默认所有页面都能被索引
注：
sitemap的索引提示是默认开启的，如需要关闭sitemap的索引提示，可在小程序项目配置文件project.config.json的setting中配置字段checkSiteMap为false
框架
整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。
场景值
场景值用来描述用户进入小程序的路径。
逻辑层
开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。
- 增加
App和Page方法，进行程序注册和页面注册。 - 增加
getApp和getCurrentPages方法，分别用来获取App实例和当前页面栈。 - 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
- 提供模块化能力，每个页面有独立的作用域。
生命周期
App 生命周期
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| onLaunch | function | 否 | 生命周期回调——监听小程序初始化。全局只执行一次 | |
| onShow | function | 否 | 生命周期回调——监听小程序启动或切前台。启动或后台切前台触发 | |
| onHide | function | 否 | 生命周期回调——监听小程序切后台。前台进入后台触发 | |
| onError | function | 否 | 错误监听函数。发生脚本错误或API调用错误触发 | |
| onPageNotFound | function | 否 | 页面不存在监听函数。 | |
| 其他 | any | 否 | 开发者可以添加任意的函数或数据变量到 Object参数中，用 this 可以访问 |
Page 生命周期
//index.js
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'
}
})
页面路由
模块化
导出module.exports 引入 require
不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。
API
- 事件监听API,on开头
- 同步API，以
Sync结尾的 API 都是同步 API，除此之外还有其他一些API - 异步API
视图层
import 导入指定wxml中的template
include 导入除了template wxs以外的其他代码，拷贝到 include 位置
事件
bind: 绑定的事件会向上冒泡， catch:绑定的时间不会向上冒泡
capture-bind:在捕获阶段绑定，capture-catch:中断捕获阶段
事件对象
target事件触发的源组件currentTarget事件绑定的当前组件，在事件冒泡或捕获阶段，不指向targetdateset组件节点上附加的自定义数据，可以在target/currentTarget中取到mark用来识别具体触发事件的节点。语法：mark: markName = "customeName"mark会包含从触发事件的节点到根节点上所有的mark:属性值；touches每一个元素为一个Touch对象，表示停留在当前屏幕上的触摸点，对象是canvas，数组为CanvasTouch对象changedTouches，类似于touches，表示有变化的触摸点Touch对象，包含indentifier //触摸点标识符pageX,pageY //距文档左上角的距离clientX,clientY // 距离页面可显示区域左上角的距离CanvasTouch对象，包含indentifier //触摸点标识符，x,y // 距离canvas左上角的距离detail自定义事件所携带的数据
WXS事件对象
event 上多了 event.instance 表示触发组件的 ComponentDescriptor 实例
ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。
WXS 运行在视图层（Webview）
