小程序

资源

官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/


小程序实现原理解析
https://cloud.tencent.com/developer/article/1029663

简介

选择类似于微信 JSSDK 这样的 Hybrid 技术，
即界面主要由成熟的 Web 技术渲染，辅之以大量的接口提供丰富的客户端原生能力。
同时，每个小程序页面都是用不同的WebView去渲染，这样可以提供更好的交互体验，更贴近原生体验，也避免了单个WebView的任务过于繁重。

原生组件的渲染方式:
在安卓是往 WebView 的 window 对象注入一个原生方法，最终会封装成 WeiXinJSBridge 这样一个兼容层，主要提供了调用（invoke）和监听（on）这两种方法。
开发者插入一个原生组件，一般而言，组件运行的时候被插入到 DOM 树中，会调用客户端接口，通知客户端在哪个位置渲染一块原生界面。
在后续开发者更新组件属性时，同样地，也会调用客户端提供的更新接口来更新原生界面的某些部分。

微信提供了一个单纯的JS执行环境，通过对于其中的控件也进行了自定义。
因此完全采用这个沙箱环境不能有任何浏览器相关接口，只提供纯JavaScript 的解释执行环境
在iOS下是用内置的 JavaScriptCore框架，在安卓则是用腾讯x5内核提供的JsCore环境


双线程模型
创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，也就是逻辑层。
界面渲染相关的任务全都在WebView线程里执行，通过逻辑层代码去控制渲染哪些界面，这一层就是所谓的渲染层。
逻辑处理的JS代码全部加载到一个Webview里面，称之为AppService，整个小程序只有一个，并且整个生命周期常驻内存，
而所有的视图（wxml和wxss）都是单独的Webview来承载，称之为AppView。


小程序无法动态的插入和控制节点


小程序不支持 css 选择器 ?
—— 支持部分, 详见文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

生命周期

app 部分：
onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台

page 部分：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

组件声明周期
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

样式

全局样式: 定义在 app.wxss 中的样式为全局样式，作用于每一个页面 link
页面样式: 在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器
组件样式: 组件对应 wxss 文件的样式，只对组件wxml内的节点生效 link

其他

页面入口等配置
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

{
“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”
]
}

mpvue

http://mpvue.com/mpvue/

快速开始

不支持 vue-router, 因为小程序不能动态插入和控制节点
不支持 v-html


获取组件对象:
wx.createSelectorQuery()
vue $refs子组件引用在 v1.0.9 开始支持，普通节点暂不考虑支持 https://github.com/Meituan-Dianping/mpvue/issues/73
不能document.getElementById
小程序不支持dom操作

模板中不支持复杂表达式, 目前可以使用的有 + - * % ?: ! == === > < [] .

不支持Vue官方文档 :class 与 :style 绑定中的 classObject 和 styleObject 语法
可以用 computed 方法生成 class 或者 style 字符串，插入到页面中
暂不支持在组件上使用 Class 与 Style 绑定

组件: 只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和