微信小程序笔记(一)

关键字

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.jsonsetting 中配置字段 checkSiteMapfalse

框架

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。

场景值

场景值用来描述用户进入小程序的路径。

逻辑层

开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。

  • 增加 AppPage 方法,进行程序注册页面注册
  • 增加 getAppgetCurrentPages 方法,分别用来获取 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)

组件

微信小程序笔记(一)

上一篇:商业微信小程序开发实战---1


下一篇:用小程序·云开发两天搭建mini论坛丨实战