微信小程序开发中的代码片段总结

最新推荐文章于 2024-04-07 06:30:37 发布

佛系拳击手

最新推荐文章于 2024-04-07 06:30:37 发布

阅读量667

点赞数

本文链接：https://blog.csdn.net/qq_36242075/article/details/88840812

版权

本文总结了微信小程序开发中的关键代码片段，包括授权逻辑、网络请求与拦截器、录音处理、图像处理、mpvue的使用、分包预加载、全局变量、SVG图标尺寸处理以及解决组件绑定class的问题。此外，还提到了使用Fundebug进行实时BUG监控。

摘要由CSDN通过智能技术生成

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

经过一段时间的微信小程序开发，总结了一些代码片段，主要是以下几个方面：

小程序（授权、网络、录音、图像）
mpvue（分包、全局变量、svg组件、组件class绑定）

小程序

授权逻辑

初次请求 -> 请求用户授权 -> 同意授权(-> 不同意授权 -> 结束) -> 使用对应功能
二次请求 -> 跳转小程序设置页面modal -> 设置页面 -> 开启scope -> 使用对应功能

const checkPermission = scope =>
  new Promise((resolve, reject) => {
    wx.getSetting({
      success: res => {
        // 是否存在认证配置
        let hasAuthorized = res.authSetting.hasOwnProperty(scope)
        if (hasAuthorized) {
          // 已授权
          if (res.authSetting[scope]) {
            resolve('已授权')
            return
          }
          // 未授权，提示进入小程序设置页面，wx限制:需要主动点击才能执行openSetting()，因此使用modal
          wx.showModal({
            title: '没有权限',
            content: '体验该功能需要您授权功能权限，现在前往设置开启',
            success: res => {
              if (res.confirm) {
                reject('设置页面')
                wx.openSetting()
              } else if (res.cancel) {
                reject('不进入设置')
              }
            }
          })
        }
      },
      fail: err => { reject(err.errMsg) }
    })
  })

网络

微信小程序不同环境下网络请求的不同之处：

校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

网络请求与拦截器

可以使用 fly.js 作为小程序的网络请求库，在使用拦截器等功能时也较为方便。

小程序中一个特殊的地方是: content-type 为 multipart/formdata 类型的POST请求不能通过自定义请求的方式发出，需要使用小程序的 wx.uploadFile 方法，可以如下简单封装下：

const formDataRequest = (url, filePath, params = {}) =>
  new Promise((resolve, reject) => {
    let token = wx.getStorageSync("token")
    wx.uploadFile({
      url,
      filePath,
      name: "file",
      header: { token },
      formData: params,
      success: async res => {
        // 一些对响应数据的处理...
        resolve(res.data)
      },