微信小程序开发总结

2023-11-13 08:47:22

微信小程序开发总结

微信公众号的账户和微信小程序的账户是分离的，并不是同一个，需要使用一个新的邮箱来注册小程序。
正式环境必须使用https协议，测试环境配置工具中可以设置为不校验http协议。

第三方框架 wepy 与 mpvue 的区别：

wepy

腾讯官方开发的类vue框架，但是实际使用和vue还是有不小的区别的，总的来说比直接用原生开发体验上要好很多，如果是新项目建议用wepy开发，不能使用div、ul等html标签，而必须使用小程序的view、text等基础组件。

mpvue

美团基于vue开发的框架，最大的优点就是符合vue的使用习惯，熟悉vue开发的同学，可以很快适应，比较适用于从原有vue项目迁移过来。

wepy 与 vue 的异同

#### 相同点：

Props、 Mixin、 computed、 slot、组件化开发

#### 不同点：

methods里只能写template里绑定的事件、脏数据检查需要手动调用方法触发

微信小程序的第三方UI框架，目前各方面相对比较好用的是 iview weapp，不过还是存在比较多的坑，建议iview只是作为参考，另外自己实现组件体验和稳定性上来说会更好。
微信小程序的http封装

默认是get方法，post方法只接受表单传值。

  // http.js
  export const API_URI = ‘https://test.faceke.com/api/v2‘
  import util from "./util"
  let token = ""
  function fetch(url, params, method, header, resolve, reject) {
     let _header = {
      ...header,
      ‘client‘: ‘miniapp‘,
      ‘Authorization‘: "Bearer " + token
   }
   wx.request({
      url: `${API_URI}/${url}`,
      data: params,
      method: method,
      header: _header,
      success: res => {
      if (res.statusCode === 200 || res.statusCode === 201 || res.statusCode === 202 || res.statusCode 
      === 204) {
       resolve(res)
     } else if (res.statusCode === 401) {
       console.log("token过期重新登录")
       wx.removeStorage({
         key: ‘token‘,
         success(res) {
           console.log(res.data)
         }
       })
       setTimeout(() => {
         wx.reLaunch({
           url: ‘index‘
         })
       }, 600);
     } else {
       reject(res)
     }
   },
   fail: err => {
     console.log(err)
   }
 })
 }

  const http = function (url, params, method, header) {
 if (!token) {
   wx.getStorage({
     key: ‘token‘,
     success(res) {
       token = res.data
       console.log(res.data)
     }
   })
 }
 return new Promise((resolve, reject) => {
   if (!token) {
     setTimeout(() => {
       fetch(url, params, method, header, resolve, reject)
     }, 300);
   } else {
     fetch(url, params, method, header, resolve, reject)
   }
 })
 }

 module.exports = {
 baseUrl: function () {
   return API_URI
 },
 get: function (url, params) {
   return http(url, params, "GET", {
     ‘content-type‘: ‘application/json‘
   })
 },
 delete: function (url, params) {
   return http(url, params, "DELETE", {
     ‘content-type‘: ‘application/json‘
   })
 },
 post: function (url, params) {
   let formData = util.json2Form(params)
   return http(url, formData, "POST", {
     ‘content-type‘: ‘application/x-www-form-urlencoded‘
   })
 }
 }

封装一个json格式数据转form格式数据的方法

function json2Form(json) {
 let str = [];
 for (let p in json) {
   str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
 }
 return str.join("&");
}

module.exports = {
 json2Form,
}

小程序/公众号登录涉及到两个最关键的用户标识：

OpenId 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。

UnionId 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至APP 之间的数据互通了。

wx.getUserInfo用户信息在wx.login之后再获取

  wx.login({
   success(res) {
     if (res.code) {
       that.code = res.code
       wx.getUserInfo({
         success: function (res) {
           console.log("获取微信用户信息", res)
           let data = res
           http.post("miniLogin", {
             code: that.code,
             encryptedData: data.encryptedData,
             iv: data.iv
           }).then(({
             data
           }) => {
             console.log("登录", data)
           })
         }
       })
     }
   }
 })

小程序模板消息推送获取formId

突破微信小程序模板消息限制，实现无限制主动推送

模板消息

这里的button必须用原生的button, 如果用iview的i-buttton会获取不到formId。

  <template>
    <form @submit="getFormId" report-submit="true">
      <button form-type="submit" @submit="getFormId">开关</button>
    </from>
  </template>
  <script>
   import wepy from ‘wepy‘
   export default class XXX extends wepy.component {
      methods = {
        getFormId(e) {
           let formId = e.detail.formId
           // to do sth
        }
      }
   }
  </script>

template中{{}}直接写js不起效

有时候我们在vue中习惯写{{ item.label.substr(0,2) }}来处理字符串，但是在wepy中这种写法有时候会不起效，为了使程序更稳定，我们可以在onLoad中直接处理好。

wx.navigateTo 和 wx.reLaunch

wx.navigateTo 会保留当前页面然后跳转，当用户按返回按钮后不会触发onLoad等事件，导致无法更数据。

wx.reLaunch 会关闭所有页面再跳转。

使用时需要根据实际业务选择合适的api。

微信开发者工具的bug

当发现输入框不能输入或者工具的按钮点不动时，关掉微信开发者工具，然后重新打开即可。

发布审核流程

提交体验版，内部测试审核通过后 -> 提交审核（1~3天，本次项目审核时间2个小时）-> 提交发布

注意，提交审核后，还需要手动去提交发布，否则是不算上线的。提交发布成功后，大概需要5分钟左右的时间，就可以在微信里搜索到小程序了。

右上角的转发/分享按钮

默认右上角是没有转发按钮的，需要自己手动在需要转发分享的页面onLoad里添加以下代码。

wx.showShareMenu({
    withShareTicket: false
})

微信小程序开发总结

码农公寓

相关文章