微信小程序开发总结

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	使用组件 <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 并不会真实的跳转到另外的小程序
```js
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. 发布上线

小程序成员管理

• 项目成员
• 体验成员

  小程序的版本

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

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

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

该内容为本站原创，转载需注明原文链接

原文链接