乐趣区

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

jiezi

微信小程序开发总结

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 小程序生命周期图

  1. 页面路由（页面栈
路由形式 触发机会 路由前页面 路由后页面
初始化 小程序关上的第一个页面 onLoad, onShow
关上新页面 调用 API wx.navigateTo 应用组件 <navigator open-type="navigateTo"/> onHide
页面重定向 调用 API wx.redirectTo 应用组件 <navigator open-type="redirectTo"/> onUnload
页面返回 调用 API wx.navigateBack 应用组件<navigator open-type="navigateBack"> 用户按左上角返回按钮 onUnload
Tab 切换 调用 API wx.switchTab 应用组件 <navigator open-type="switchTab"/> 用户切换 Tab
重启动 调用 API wx.reLaunch 应用组件 onUnload
  • 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. 公布上线

小程序成员治理
  • 我的项目成员

  • 体验成员

    小程序的版本

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

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

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

原文链接

退出移动版