小程序学习1-CSDN博客

本文链接：https://blog.csdn.net/sky_cui/article/details/86524796

1，页面生命周期（顺序）

onLoad 只会触发1次

onShow 一般从别的页面返回到当前页面时

onReady 只会触发1次，表示页面已经准备妥当，在逻辑层就可以和视图层进行交互了

onHide wx.navigateTo切换到其他页面、底部tab切换时触发，需要销毁页面时不走此方法直接onUnLoad

onUnLoad wx.redirectTo或wx.navigateBack返回到其他页时

2，回调方法参数说明

App的onLanuch（options）options是记录了从哪里启动这个小程序的信息

Page的onLoad（options）options是前一页url拼接的参数Object

3，渲染异步

由于小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。

Page({
  onLoad: function(){
    this.setData({
      text: 'change data'
    }, function(){
      // 在这次setData对界面渲染完毕后触发
    })
  }
})

4，页面跳转

{
  "tabBar": {
    "list": [
      { "text": "Tab1", "pagePath": "pageA" },
      { "text": "Tab1", "pagePath": "pageF" },
      { "text": "Tab1", "pagePath": "pageG" }
    ]
  }
}

以后三个tab，页面栈：[ pageA, pageB, pageC ]

使用 wx.navigateTo({ url: 'pageD' }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 [ pageA, pageB, pageC, pageD ]。
使用 wx.navigateBack() 可以退出当前页面栈的最顶上页面，此时页面栈变成 [ pageA, pageB, pageC ]。
使用wx.redirectTo({ url: 'pageE' }) 是替换当前页变成pageE，此时页面栈变成 [ pageA, pageB, pageE ]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转。

使用wx.switchTab({ url: 'pageF' })，此时原来的页面栈会被清空，只留pageA

使用wx. reLaunch({ url: 'pageH' }) 重启小程序，并且打开pageH，此时页面栈为 [ pageH ]

ps：wx.navigateTo和wx.redirectTo只能打开非TabBar页面，wx.switchTab只能打开Tabbar页面

5，组件

所有组件名和属性都是小写，多个单词会以英文横杠 "-" 进行连接

data-* 为自定义属性，会在bindtap事件触发时传到event.currentTarget.dataset

6，API

一般调用的约定：

wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。
如未特殊约定，多数 API 接口为异步接口，都接受一个Object作为参数。
API的Object参数一般由success、fail、complete三个回调来接收接口调用结果，示例代码如代码清单3-17所示，详细说明如表3-9所示。
wx.get* 开头的API是获取宿主环境数据的接口。
wx.set* 开头的API是写入数据到宿主环境的接口。

7，事件

事件捕获过程是从父控件到子控件

事件冒泡过程是从子控件到父控件

先事件捕获再事件冒泡所以capture开头的方法先执行，

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

同时bind和catch前还可以加上capture-来表示捕获阶段

capture-bind 捕获完了继续冒泡

capture-catch 捕获完了不冒泡

bind和catch应该互斥存在

<view class="outer" bind:tap="handleTap4" capture-bind:tap="handleTap1">
  outer view
  <view class="middle" catch:tap="handleTap5">
    middle view
    <view class="inner" bind:tap="handleTap3" capture-bind:tap="handleTap2">
    inner view
    </view>
  </view>
</view>

执行顺序：

handleTap1 有捕获所以在捕获阶段打印

handleTap2 有捕获所以在捕获阶段打印

handleTap3 捕获阶段结束后，会继续冒泡，所以在冒泡方法执行完继续冒泡

handleTap5 没有捕获阶段，后续冒泡到middle，这里阻止冒泡了，所以在catch方法执行完不再冒泡