微信小程序学习笔记

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1. 生命周期和相关函数

Page({
    data: {},
    // Page 实例的生命周期函数
    onLoad: (option) => {  // 页面初次加载时候触发，只会触发一次
        console.log(option.id) // 1
    },
    onReady: () => {},  // 页面初次渲染完毕，只会触发一次（页面已经准备妥当，在逻辑层可以和视图层进行交互了）
    onShow: () => {}, // 从别的页面进入到当前页面时调用
    onHide: () => {}, // wx.navigateTo 切换到其他页面或者底部tab切换时触发
    onUnload: () => {}, // 使用 wx.redirectTo 或者 wx.navigateBack 返回其他页面时候触发，当前页面会被销毁
    // 页面用户行为
    onPullDownRefresh: () => {},  // 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
    onReachBottom: () => {}, // 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
    onShareAppMessage: () => {
        // 此事件需要 return 一个 Object，用于自定义转发内容
        return {
            title: 'xxx',
            path: '/yyy',
        }
    },
    onPageScroll: (obj) => {
        console.log(obj.scrollTop) // 页面在垂直方向已滚动的距离（单位px）
    },
    // 其他自定义函数
    getData: () => {
        this.formatDate() // 用 this.func 来访问实例中的函数
    },
    formatDate: () => {},
})

2. this.setDate

this.setDate({
    key: value
}, callback)
key 的值非常灵活，可以以数据路径的形式给出（字符串形式），示例：
data: {
    myInfo: {
        name: 'wangxi',
        age: '26'
    },
    user: [{
        nickName: 'Tony'
        gender: 'male'
    }]

}
this.setData({
    'userInfo.name': 'Raychan'
    'user[0].gender': 'female'
})

setDate会更新 this.data 中对应的值（同步的过程）
并且把数据从逻辑层传递给渲染层，从而达到更新页面的目的（异步的过程）
回调函数在setDate 对界面渲染完成后触发

不要直接修改 this.data （注意和 vue 中修改数据的方式加以区别）

综上，下面的代码是可以获取到到对应的data值的(和 React 中的 setState 不同)

data: {
    name: 'wangxi'
}

this.setData({
    name: 'Raychan'
})

console.log(this.data.name) // Raychan

3. 路由

getCurrentPages() // 获取当前页面栈的实例

4. 模块化

// 公共代码导出
module.export.funcName = funcName
// 引用
var name = require('funcName')

5. 模板

// define
<template name='tpl'></template>
// usage
<template is='tpl'></template>

6. 运行机制
小程序没有重启的概念
当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁

7. 请求API

wx.request({
    url: 'test.php',
    data: {},
    header: { 'content-type': 'application/json' },
    success: function(res) {
         // 收到https服务成功后返回
         console.log(res.data)
    },
    fail: function() {
         // 发生网络错误等情况触发
    },
    complete: function() {
         // 成功或者失败后触发
    }
})

8. 获取系统信息

wx.getSystemInfoSync()

9. 页面交互反馈

// view 容器和 button 组件提供了 hover-class 属性，触摸时会在该组件上加上对一个的样式
<view hover-class="clsName"></view>
// 在耗时操作时加上 loading 属性
<button loading="{{loading}}" bindtap="tap"></button>

data: { loading: false }
tap: () => {
    this.setData({
        loading: true
    })
    // ajax etc...
}

10. 显示隐藏 toast

wx.showToast({
    title: 'xxx',
    icon: 'success',
    duration: 1500, // 1.5 秒后消失
})

wx.hideToast()

11. modal

wx.showModal({
    title: '标题',
    content: '告知当前状态，信息和解决方法',
    confirmText: '主操作',
    cancelText: '次要操作',
    success: function(res) {
        if (res.confirm) {
            console.log('用户点击主操作')
        } else if (res.cancel) {
              console.log('用户点击次要操作')
        }
     }
})

12. HTTP 请求

var hasClick = false;

Page({
  tap: function() {
    if (hasClick) {
      return
    }
    hasClick = true
    wx.showLoading()
    wx.request({
      url: 'https://test.com/getinfo',
      method: 'POST',
      header: { 'content-type':'application/json' },
      data: { },
      success: function (res) {
        if (res.statusCode === 200) {
          console.log(res.data)// 服务器回包内容
        }
      },
      fail: function (res) {
        wx.showToast({ title: '系统错误' })
      },
      complete: function (res) {
        wx.hideLoading()
        hasClick = false
      }
    })
  }
})

13. 排查异常的方法
在使用wx.request接口我们会经常遇到无法发起请求或者服务器无法收到请求的情况，我们罗列排查这个问题的一般方法：

检查手机网络状态以及wifi连接点是否工作正常。
检查小程序是否为开发版或者体验版，因为开发版和体验版的小程序不会校验域名。
检查对应请求的HTTPS证书是否有效，同时TLS的版本必须支持1.2及以上版本，可以在开发者工具的console面板输入showRequestInfo()查看相关信息。
域名不要使用IP地址或者localhost，并且不能带端口号，同时域名需要经过ICP备案。
检查app.json配置的超时时间配置是否太短，超时时间太短会导致还没收到回报就触发fail回调。
检查发出去的请求是否302到其他域名的接口，这种302的情况会被视为请求别的域名接口导致无法发起请求。

14. 缓存

wx.getStorage()
wx.getStorageSync()
wx.setStorage()
wx.setStorageSync()

wx.getStorage({
    key: 'key1',
    success: res => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

try {
    const value = wx.getStorageSync('key2')
} catch (e) {
    console.log(e)
}

// 写缓存
wx.setStorage({
    key: 'key1',
    data: 'value1'
    success: res => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

利用本地缓存提前渲染界面

Page({
  onLoad: function() {
    var that = this
    var list =wx.getStorageSync("list")
    if (list) { // 本地如果有缓存列表，提前渲染
      that.setData({ list })
    }
    wx.request({
      url: 'https://test.com/getproductlist',
      success: function (res) {
        if (res.statusCode === 200) {
          list = res.data.list
          that.setData({ list }) // 再次渲染列表
          wx.setStorageSync("list", list) // 覆盖缓存数据
        }
      }
    })
  }
})