小程序开发常用几个api、生命周期钩子和注意事项

<!--pages/testwxApi.wxml-->
<view>
  <view>测试微信api</view>
  <!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
  <!-- 头像组件 拿到的是用户微信头像 -->
  <open-data type="userAvatarUrl"></open-data>
  <!-- 昵称组件 拿到的是用户微信名 -->
  <open-data type="userNickName"></open-data>
  <!-- 需要使用 button 来授权登录 canIUse版本兼容-->
  <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
  <view wx:else>请升级微信版本</view>

  <!--wx.login() 获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等 -->
  <button bindtap="wxLogin">微信登录</button>

  <!-- 小程序微信支付 -->
  <button bindtap="wxPay">小程序微信支付</button>

  <!-- 获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02 -->
  <button bindtap="getGPS">获取当前的地理位置</button>

  <!-- 小程序数据存储在本地缓存 -->
  <button bindtap="wxCache">小程序缓存功能</button>
</view>

// pages/testwxApi.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('生命周期回调—监听页面加载', '第一步')
    // "shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮
    // 显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮
    // 与之对应的还有 wx.hideShareMenu 隐藏方法
    wx.showShareMenu({
      withShareTicket: true, // 是否使用带 shareTicket 的转发
      menus: ['shareAppMessage', 'shareTimeline'],
      success(res) {
        console.log(res)
      },
      fail(e) {
        console.log(e)
      }
    })
    // 获取系统信息--- 还可以做高度自适应（res.windowHeight // 可视高度）
    wx.getSystemInfo({
      success(res) {
        console.log(res, '系统信息')
      }
    })
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo, '微信用户信息')
            }
          })
        }
      }
    })
  },
  // 授权登录
  bindGetUserInfo(e) {
    console.log(e, 'e')
    console.log(e.detail.userInfo)
  },
  // 微信登录 一般app.js处理
  wxLogin() {
    // wx.login() 发送 res.code 到后台换取 openId, sessionKey, unionId
    wx.login({
      success(res) {
        console.log(res, 'res微信登录')
        if (res.code) {
          //发起网络请求
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
  // 发起微信支付
  wxPay() {
    wx.requestPayment({
      timeStamp: '', // 必填
      nonceStr: '', // 必填
      package: '', // 必填
      signType: 'MD5', // 非必填
      paySign: '', // 必填
      success(res) {

      },
      fail(res) {

      }
    })
  },
  // 获取地理位置 需要再 app.json里面配置 permission 字段如： "scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示" }
  // wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  对应的打开地图选择位置 wx.chooseLocation()
  getGPS() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res, '获取地理位置经纬度')
      },
      fail: (error) => {
        console.log(error, 'error如果拒绝授权继续引导授权')
        wx.showModal({
          content: '请授权用户地理位置',
          confirmColor: "#ff6700",
          success(res) {
            if (res.confirm) {
              wx.openSetting({
                success(res) {
                  // console.log(res.authSetting)
                  res.authSetting = {
                    "scope.userInfo": true,
                    "scope.userLocation": true
                  }
                }
              })
            }
          }
        })
      }
    })
  },
  // 小程序缓存效果方法 存wx.setStorage(Object object) 取wx.getStorage(Object object) 删wx.removeStorage(Object object) 清除所有 wx.clearStorage(Object object)
  // 小程序缓存效果方法(同步版本) 存wx.setStorageSync(Object object) 取wx.getStorageSync(Object object) 删wx.removeStorageSync(Object object) 清除所有 wx.clearStorageSync(Object object)
  wxCache(){
    wx.setStorageSync('name', 'bob') // 也可以用对象键值对的形式存取
    console.log(wx.getStorageSync('name'),'取出缓存的值看看')
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('生命周期回调—监听页面显示', '第二步')
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('生命周期回调—监听页面初次渲染完成', '第三步')
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  /**
   * 用户点击右上角分享  监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
    注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
   */
  onShareAppMessage: function (res) {
    console.log('点击了右上角分享')
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题----默认当前小程序名称',
      path: '/page/testwxApi?id=11, 转发路径, 默认是 当前页面 path ，必须是以 / 开头的完整路径',
      imageUrl: '自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4, 默认是 使用默认截图'
    }
  },
  // 监听右上角菜单“分享到朋友圈”按钮的行为，并自定义发享内容。 注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮
  onShareTimeline: function (res) {
    console.log(res, '分享朋友圈')
    // 必须要写return的内容目前的版本分享朋友圈的才不会变灰色
    return {
      title: '自定义标题--默认当前小程序名称',
      query: '自定义页面路径中携带的参数如id="11"---默认当前页面路径携带的参数',
      imageUrl: '自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1,默认使用小程序 Logo'
    }
  },
  // 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容
  onAddToFavorites(res) {
    // webview 页面返回 webviewUrl
    console.log('WebviewUrl: ', res.webviewUrl)
    return {
      title: '自定义标题--默认-页面标题或账号名称',
      imageUrl: 'http://demo.png 自定义图片，显示图片长宽比为 1：1 默认-页面截图',
      query: 'name=xxx&age=xxx  自定义query字段---默认-当前页面的query',
    }
  }
})

亲测有效，原创总结，转载请注明出处！