微信小程序开发总结

微信小程序开发总结

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. 页面路由（页面栈

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo	使用组件	onHide
页面重定向	调用 API wx.redirectTo	使用组件	onUnload
页面返回	调用 API wx.navigateBack	使用组件 用户按左上角返回按钮	onUnload
Tab 切换	调用 API wx.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
  
    
  

// index.js
Page({
  data: {
    html: '
Hello World!
'
  }
})

10. jwt

11. 小程序登录

小程序登录流程

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

小程序登录文档

auth.code2Session

小程序登录流程图

12. web-view

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

13. 发布上线

小程序成员管理

• 项目成员

• 体验成员

  小程序的版本

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

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

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

原文链接