小程序-框架基础篇

vscode 插件：

       minapp-标签属性智能补全

框架：

1.小程序的启动

       微信在打开小程序之前，把整个代码包下载到本地
       读取 app.json 的 pages 字段知道所有的页面路径，然后通过 pages 字段的第一个值的路径装载并渲染首页
       启动后，在 app.js 定义的 App 实例的 onLaunch 回调被执行

2.注册程序：App()

       app.js：是小程序入口，其中调用 App()函数来注册一个小程序，参数为小程序的声明周期回调等等

App({
  onLaunch(options) {
    // 初始化完成时调用（全局只触发一次）
    // 参数里可以拿到当前路径、场景代号等，可以通过wx.getLaunchOptionsSync获取
  },
	
  onShow(options) {
    // 在启动、从后台进入前台时调用（后台是指用户点击右上角的关闭或者按了设备的home键离开微信，再次打开时进入前台）
    // 小程序运行机制：https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html
    // 用wx.onAppShow可以绑定监听
    // 参数同onLaunch
  },

  onHide() {
    // 从前台进入后台时触发
    // 用wx.onAppHide可以绑定监听
  },

  onError(msg) {
    // 脚本错误、api调用失败时触发
    // 用wx.onError可以绑定监听
  },

  onPageNotFound() {
    // 要打开的页面不存在时触发
    // 参数带有页面信息
    // 用wx.onPageNotFound可以绑定监听
  },

  // 除此之外可以添加任意方法或数据
  // 可以用this可以访问
  globalData: {}
})

       全局的 getApp()函数可以用来获取到小程序 App 实例。

3.注册页面：Page()

       Page(Object)用来注册一个页面，参数可以指定页面的初试数据，生命周期回调，事件处理函数等。
       高级用法是用 Component 创建页面，就可以使用自定义组件的特性，比如用 behaviors 进行代码复用。

Page({
  data: {
    // 页面初始数据，页面加载时data会以JSON字符串的形式由逻辑层传至渲染层
    // data中的数据必须是字符串、数字、布尔值、对象、数组
    // 渲染层可以通过WXML进行数据绑定
    text: 'This is page data.'
  },

  onLoad(query) {
    // 监听页面加载
    // 参数可以获取打开当前页面路径中的参数
    // 例：当前url为../logs/logs?abc=1，参数query即为{"abc": 1}
  },

  onShow() {
    // 监听页面显示/切入前台事件
    console.log(this.route) // this中还有当前页面的路径
  },

  onReady() {
    // 监听页面初次渲染完成，一个页面只会调用一次，表示页面可以和视图层进行交互
    // 如果要对界面内容进行设置，要在onReady之后的生命周期进行
  },

  onHide() {
    // 监听页面隐藏/切入后台事件
    // 如navigateTo或tab切换到其他页面
  },

  onUnload() {
    // 监听页面卸载
    // 如redireactTo或navigateBack到其他页面
  },

  onPullDownRefresh() {
    // 监听用户下拉刷新动作
    // 需要在app.json的window选项或页面配置中开启enablePullDownRefresh
    // 可以通过wx.startPullDownRefresh触发
    // 处理完数据刷新后，wx.stopPullDownRefresh可以停止下拉刷新
  },

  onReachBottom() {
    // 监听上拉触底事件
    // 在app.json的window选项或页面配置中设置触发距离onReachBottomDistance
  },

  onShareAppMessage(Object) {
    // 用户点击右上角转发，或点击转发按钮<button open-type="share" />
    // 参数 Object包含from: button/menu，target:button/undefined，webViewUrl:<web-view>的url
    return {
        title: '', // 默认为当前小程序名称
        path: '', // 转发路径，当前页面的完整路径
        imageUrl: '' // 显示图片路径，支持png/jpg，默认使用默认截图，长宽比为5:4
    }
  },

  onPageScroll(Object) {
    // 页面滚动触发事件
    // 参数中的scrollTop可以获取页面在垂直方向已滚动的距离px
    // 不要定义空方法，减少不必要的事件派发对渲染层-逻辑层通信的影响
    // 避免过于频繁的执行setState引起通信操作，传递大量数据会影响通信耗时
  },

  onResize(res) {
    // 页面尺寸改变触发事件
    // 在手机上/ipad启用屏幕旋转支持可以触发
    // 读取页面的显示尺寸，可以用SelectorQuery.selectViewport()
    res.size.windowWidth // 新的显示区域宽度
    res.size.windowHeight // 新的显示区域高度
  },

  onTabItemTap(item) {
    // 当前是tab页时，点击tab时触发
    console.log(item.index) // 被点击tabItem的序号
    console.log(item.pagePath) // 被点击tabItem的页面路径
    console.log(item.text) // 被点击tabItem的按钮文字
  },

  // 其他函数和数据
  // 定义组件事件处理函数，在渲染层的组件中加入事件绑定，就会进入到事件处理函数
  // <view bindtap="viewTap">click me</view>
  viewTap() {
    this.setData({
      text: 'Set some data for updating view.'
      // 支持修改数组中的某一项或对象的某个属性，并且可以不需要在this.data中预先定义，不要设为undefined
    }, function () {
      // this is setData callback
    })
  },

  customData: {
    hi: 'MINA'
  }
})

4.页面路由

       所有页面的路由都由框架以栈的形式进行管理。getCurrentPages()用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
       App.onLaunch 的时候不要调用 getCurrentPages()，这时候 page 还没有生成。
       路由方式和对应的声明周期：

Tab 切换对应的生命周期，A、B 为 tabbar 页面，C 是从 A 页面打开的，D 是从 C 页面打开的

5.WXML 和 vue 的 template 用法区别

• 列表渲染
         不需要写 item,index in array，默认当前项变量名为 item，当前下标变量名为 index，可以使用 wx:for-item、wx:for-index 重新制定当前元素和下标的变量名。
         如果是动态渲染的列表，需要用 wx:key 来制定列表中项目的唯一标识符，值可以是唯一的字符串/数字，或保留关键字*this（代表在 for 循环中的 item 本身）。当数据改变触发渲染层重新渲染时，会矫正带有 key 的组件，确保他们被重新排序而不是重新创建，以确保使组件保持自身的状态，提高列表渲染时的效率。

  <view wx:for="{{array}}"></view>

  注：wx:for 的值为字符串时，会将字符串解析成字符串数组，花括号之间有空格，会被解析成字符串。

• 事件使用方式
         冒泡事件：key 以 bind（不会阻止冒泡事件向上冒泡）、catch（阻止冒泡事件向上冒泡）开头，非原生组件中，bind 和 catch 可以紧跟一个冒号，含义不变，如 bind-tap
         非冒泡事件：key 以 capture-bind、capture-catch（中断捕获阶段和取消冒泡阶段）

  <view id="tapTest" data-hi="WeChat" bindtap="tapName">点击</view>

       支持使用 WXS 函数绑定时间，接收 event 和 ownerInstance 两个参数，ownerInstance 和 event.instance 一样是一个 ComponentDescriptor 对象，可以设置组件的样式和 class。

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}">点击</view>

// test.wxs
function tapName(event, ownerInstance) {
 console.log('tap wechat', JSON.stringify(event))
}
module.exports = {
 tapName
}

• 文件引用方式

       import：在文件中使用目标文件定义的 template，有作用域的概念，不会 import 目标文件 import 的 template。

<!-- A.wxml -->
<template name="A">
  <text>A template</text>
</template>

<!-- B.wxml -->
<import src="a.wxml" />
<template is="A" />

       include：将目标文件除了template标签和wxs标签之外的整个代码引入，相当于拷贝到 include 位置。

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>

<!-- header.wxml -->
<view>header</view>