小程序介绍与开发环境
小程序运行环境
小程序代码组成
JSON配置
WXML模板
逻辑语法
wx:if="{{条件}}"
wx:elif="{{条件}}"
wx:else="{{条件}}"
wx:for="{{array}}"
wx:key
wx:for-index
wx:for-item
模板
<template name=""></template>
<template is=""> </template>
<import src=""/>
import 不会递归调用
共同属性
id、 class、 style、 hidden、 data-*
WXSS样式
Javascript脚本
模块化
module.exports = function () {}
var common = require('common.js')
脚本执行顺序
作用域
理解小程序的宿主环境
逻辑层和渲染层
通信模型
程序与页面
程序
程序构造器APP()
onLaunch
小程序初始化完成, 全局知触发一次
onShow
当小程序启动, 或从后台进入前台显示
onHide
当小程序从前台进入后台
onError
当小程序发生脚本错误, 或api调用失败
其他字段
Object参数
程序的生命周期
onLaunch
onHide
onShow
小程序全局函数
页面
页面构造器Page()
data
页面初始数据
onLoad
生命周期函数, 监听页面加载, 触发时机早于onShow和onReady
onReady
生命周期函数 监听页面初次渲染完成
onShow
生命周期函数 监听页面显示 触发事件早于onReady
onHide
生命周期函数 监听页面隐藏
onUnload
生命周期函数 监听页面卸载
onPullDownRefresh
监听用户下拉动作
onReachBottom
页面上拉触发事件
onShareAppMessage
用户点击右上角转发
onPageScroll
页面滚动触发事件处理函数
其他
生命周期和打开参数
页面的数据
直接修改Page实例的this.data而不调用this.setData是无法改变页面状态的, 还会造成数据不一致
由于setData是需要两个线程的一些通信消耗, 每次设置的数据不应该超过1024kb
不要把data中的任意一项value设为undefined 否则可能会有不可预料的bug
页面用户行为
下拉刷新
上拉触底
页面滚动
用户转发
页面和路由
wx.navigateTo
推入一个新的页面 页面栈会多一个页面 10层后没法推入
wx.navigateBack
从页面栈中退出当前页面 页面栈会少一个页面
wx.redirectTo
从页面栈中替换当前页面, 页面栈数量不变
wx.switchTab
原来的页面栈会被清空 除了生命为Tabbar页面, 其他页面都会被销毁
wx.reLaunch({url: "pageH"})
重启小程序并且打开pageH
补充一下
wx.navigateTo 和wx.redirectTo只能打开非TabBar页面
wx.switchTab是能打开tabBar页面
组件
api
事件
常见的事件类型
touchstart
手指触摸动作开始
touchmove
手指触摸后移动
touchcancel
手指触摸动作被打断, 如来电提醒, 弹窗
touchend
手指触摸动作结束
tap
手指触摸后马上离开
longpress
手指触摸后超过350ms在离开, 如果制定了事件回调函数, tap事件将不被触发
longtap
手指触摸后 超过350ms在离开 推荐使用longpress事件代替
transionend
会在一个WXSSteansition或wx.createAnimation动画结束后触发
animationstart
会在一个WXSS animation动画开始时触发
animationiteration
会在一个WXSS animation一次迭代时触发
animationend
会在一个WXSS animation动画完成时触发
事件绑定与冒泡捕获
key以bind或catch开头然后跟上事件类型
capture-bind
表示事件捕获阶段
bind
表示事件冒泡阶段
bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡
底层框架
双线程模型
为什么选用双线程
管控与安全
措施
提供一个沙箱环境来运行开发者的javascript代码, 这个沙箱环境不能有任何浏览器相关的接口, 只提供纯javascript的解释环境
天生延时
小程序延时
小程序与原生交互延时
组件系统
exparser框架
基于shadow DOM模型
可在纯js环境中运行, 这意味着逻辑层也具有一定的组件树的组织能力
高效轻量
性能表现好 在组件实例极多的环境下表现尤其优异, 同时代码尺寸也较小
自定义组件
运行原理
初始化页面时, exparser会创建出页面的跟组件的一个实例, 用到其他组件会响应穿件组件实例 这是一个递归过程
根据组件注册信息, 从组件原型上创建出组件节点的JS对象 即组建的this
将组件注册信息中的data复制一份 作为组件数据, 即this.data
将这份数据结合WXML 据此创建出shadow tree 由于shadow tree中可能引用其他组件, 因此会递归触发其他组件的创建过程
将shadowtree拼接到composedtree 上, 并生成一些缓存数据用于组件更新性能
触发组件的created生命周期行数