微信小程序笔记（一）

目录

• 关键字
• 配置
• 注意点
• 小程序的装载过程
• sitemap
• 框架
  • 场景值
  • 逻辑层
    • 生命周期
    • 页面路由
    • 模块化
    • API
  • 视图层
  • 事件
    • 事件对象
    • WXS事件对象
  • 组件

关键字

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）

组件