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

微信小程序开发总结

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.jsApp({  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.jsPage({  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.jsPage({  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. 公布上线

小程序成员治理

• 我的项目成员

• 体验成员

  小程序的版本

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

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

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

原文链接