关键字
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
事件绑定的当前组件,在事件冒泡或捕获阶段,不指向target -
dateset
组件节点上附加的自定义数据,可以在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)