关于微信:微信小程序开发总结

微信小程序开发总结

1. 框架比照

小程序原生 厂商：小程序官网 小程序原生
uni-app 厂商：DCloud uni-app
WePY 厂商：腾讯(最早开源的小程序框架) WePY
mpvue 厂商：美团 mpvue
Taro 厂商：京东 Taro

小程序开发框架比照（wepy/mpvue/uni-app/taro）
小程序框架比照（Taro VS uni-app）
强烈推荐：小程序罕用的 6 款框架总结
小程序框架：WePY/mpvue/uni-app/Taro

2. 开发筹备

公众号平台
小程序开发工具下载地址
微信公众平台接口测试帐号申请
小程序公众号（曾经认证过的服务号），曾经备案过的域名（https），装置小程序开发工具

• 留神：肯定要是服务号

3. 小程序代码构造

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 款式文件
.js 后缀的 JS 脚本逻辑文件

app.json示例配置

{
  "pages": [
      "pages/index/index",
       "pages/logs/index"
  ],
  "window": {"navigationBarTitleText": "Demo"},
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
}

全局配置

4. 生命周期

4.1 小程序生命周期

// app.js
App({onLaunch (options) {// Do something initial when launch.},
  onShow (options) {// Do something when show.},
  onHide () {// Do something when hide.},
  onError (msg) {console.log(msg)
  },
  globalData: 'I am global data'
})

4.2 页面生命周期

//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'}
})

4.3 小程序生命周期图

5. 页面路由（页面栈

• navigateTo, redirectTo 只能关上非 tabBar 页面。
• switchTab 只能关上 tabBar 页面。
• reLaunch 能够关上任意页面。
• 页面底部的 tabBar 由页面决定，即只有是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数能够在指标页面的 onLoad 中获取。

罕用 API

• wx.switchTab(Object object)
  跳转到 tabBar 页面，并敞开其余所有非 tabBar 页面

  wx.switchTab({url: '/index'})

• wx.reLaunch(Object object)
  敞开所有页面，关上到利用内的某个页面

  wx.reLaunch({url: 'test?id=1'})

• wx.redirectTo(Object object)
  敞开以后页面，跳转到利用内的某个页面。然而不容许跳转到 tabbar 页面

  wx.redirectTo({url: 'test?id=1'})

• wx.navigateTo(Object object)
  保留以后页面，跳转到利用内的某个页面。然而不能跳到 tabbar 页面。应用 wx.navigateBack 能够返回到原页面。小程序中页面栈最多十层。

  wx.navigateTo({url: 'test?id=1'})

• wx.navigateBack(Object object)
  敞开以后页面，返回上一页面或多级页面。可通过 getCurrentPages 获取以后的页面栈，决定须要返回几层。

  // 留神：调用 navigateTo 跳转时，调用该办法的页面会被退出堆栈，而 redirectTo 办法则不会。见下方示例代码
  
  // 此处是 A 页面
  wx.navigateTo({url: 'B?id=1'})
  
  // 此处是 B 页面
  wx.navigateTo({url: 'C?id=1'})
  
  // 在 C 页面内 navigateBack，将返回 A 页面
  wx.navigateBack({delta: 2})

• wx.navigateToMiniProgram(Object object)
  关上另一个小程序

在开发者工具上调用此 API 并不会实在的跳转到另外的小程序

wx.navigateToMiniProgram({
  appId: '',
  path: 'page/index/index?id=123',
  extraData: {foo: 'bar'},
  envVersion: 'develop',
  success(res) {// 关上胜利}
})

• wx.navigateBackMiniProgram(Object object)
  返回到上一个小程序。只有在以后小程序是被其余小程序关上时能够调用胜利

  wx.navigateBackMiniProgram({
  extraData: {foo: 'bar'},
  success(res) {// 返回胜利}
  })

• wx.login(Object object)
  小程序登录

  wx.login({success (res) {if (res.code) {
      // 发动网络申请
      wx.request({
        url: 'https://example.com/onLogin',
        data: {code: res.code}
      })
    } else {console.log('登录失败！' + res.errMsg)
    }
  }
  })

• wx.checkSession(Object object)
  查看登录态是否过期

  wx.checkSession({success () {//session_key 未过期，并且在本生命周期始终无效},
  fail () {
    // session_key 曾经生效，须要从新执行登录流程
    wx.login() // 从新登录}
  })

• wx.getUserProfile(Object object)
  获取用户信息

  wx.getUserProfile({
  desc: '用于欠缺会员资料', // 申明获取用户个人信息后的用处，后续会展现在弹窗中，请审慎填写
  success: (res) => {
    this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
    })
  }
  })

• wx.getUserInfo(Object object)
  获取用户信息

  wx.getUserInfo({success: function(res) {console.log(res.userInfo)
  }
  })

7. 数据缓存

• wx.setStorageSync(string key, any data)
  将数据存储在本地缓存中指定的 key 中(同步)
• wx.getStorageSync(string key)
  从本地缓存中同步获取指定 key 的内容
• wx.removeStorageSync(string key)
  从本地缓存中移除指定 key(同步)
• wx.setStorage(Object object)
  将数据存储在本地缓存中指定的 key 中
• wx.getStorage(Object object)
  从本地缓存中异步获取指定 key 的内容
• wx.removeStorage(Object object)
  从本地缓存中移除指定 key
• wx.getStorageInfo(Object object)
  异步获取以后 storage 的相干信息
• wx.getStorageInfoSync()
  同步获取以后 storage 的相干信息
• wx.clearStorageSync()
  清理本地数据缓存(同步)
• wx.clearStorage(Object object)
  清理本地数据缓存

小程序本地缓存 setStorage 与 setStorageSync 区别
wx.setStorage() 是异步缓存，wx.setStorageSyn()是同步缓存；
区别在于：

• 应用异步缓存，无论胜利与否，程序都会向下执行；
• 应用同步缓存，只有缓存胜利，程序才会向下执行；
• 异步缓存性能更佳，用户体验更好；
• 同步缓存的数据更加平安。

8. Component 组件化

9. 富文本 rich-text

rich-text 官网文档

// index.wxml
  <view class="rich-text-wrp">
    <rich-text nodes="{{html}}" bindtap="tap"></rich-text>
  </view>

// index.js
Page({
  data: {html: '<div class="div_class"style="line-height: 60px; color: red;">Hello&nbsp;World!</div>'}
})

10. jwt

11. 小程序登录

小程序登录流程

1. 调用 wx.login() 获取 长期登录凭证 code，并回传到开发者服务器。
2. 调用 auth.code2Session 接口，换取 用户惟一标识 OpenID、用户在微信开放平台帐号下的惟一标识 UnionID（若以后小程序已绑定到微信开放平台帐号）和 会话密钥 session_key。
   之后开发者服务器能够依据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时辨认用户身份

小程序登录文档

auth.code2Session

小程序登录流程图

12. web-view

承载网页的容器。会主动铺满整个小程序页面，集体类型的小程序暂不反对应用。

13. 公布上线

小程序成员治理

• 我的项目成员

• 体验成员

  小程序的版本

  开发版本
  体验版本
  审核中版本
  线上版本

公布上线（公布上线只有公众号管理员才有权限）

预览 -> 上传代码 -> 提交审核 -> 公布等步骤

原文链接