强烈推荐的微信小程序开发总结

遇到过的坑

小程序页面栈最多十层

问题：假设小程序内有12个问题页面，答完上一个问题后wx.navigateTo到下一个问题页面，那么到第十题时，你会发现wx.navigateTo跳转不到下一个页面。这是因为使用wx.navigateTo跳转会把当前页面保存到页面栈中，而小程序页面栈最多十层。

require的路径不支持绝对路径

问题：在嵌套比较深的目录层级里，引用utils/request.js，需要慢慢../到根目录

// in page.js
const util = require('../../../../utils/util.js');

解决：在App绑定require，Page里获取app，直接 app.require 引入

// in app.js
App({
  onLaunch() {
    
  },
  require(path) {
    return require(`${path}`)
  },
})

// in page.js
const app = getApp()
const util = app.require('./utils/util.js');

一些兼容问题

IOS 的 Date 构造函数 不支持2018-04-26这种格式的日期，必须转换为2018/04/26这种格式，可以使用 dayjs 处理

image组件使用webp图片时，IOS需要设置webp属性

Android手机在onShow内调用 wx.showModal ，如果不关闭弹窗（直接点击右上角退出小程序），弹窗不会销毁，再次进入页面触发onShow时会出现两次弹窗，IOS正常

IOS 内 page-container 内嵌套 van-popup 类弹出层容器，会出现弹出层 z-index失效 问题，可以根据弹出层显示隐藏动态更改page-container 的 custom-style 设置 -webkit-overflow-scrolling属性

小程序中使用 web-view打开pdf , IOS 可以正常打开，Android 打开为空白

解决：使用wx.downloadFile和wx.openDocument

wx.downloadFile({
  url: 'https://.../XXX.pdf', //要预览的 PDF 的地址
  success: function (res) {
    if (res.statusCode === 200) { //成功
      var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
      wx.openDocument({
        fileType: 'pdf', // 文件类型
        filePath: Path, //要打开的文件路径
        success: function (res) {
          console.log('打开 PDF 成功');
        }
      })
    }
  },
  fail: function (err) {
    console.log(err); //失败
  }
})

拓展库和插件

UI 组件库

Vant Weapp 有赞开源小程序组件库

TDesign TDesign 微信小程序组件库

小程序官方拓展库

miniprogram-api-promise 扩展小程序api支持promise

recycle-view 长列表组件

wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景

miniprogram-component-plus 包含vtabs、select-text、sticky等组件

lottie-miniprogram lottie 动画库适配小程序的版本

微信同声传译 语音输入，文本翻译插件

其他

towxml 可将HTML、Markdown转为微信小程序WXML

mp-html 小程序富文本组件

性能优化

微信官方文档-性能与体验 章节具体介绍了小程序的优化手段

代码包体积优化

启动性能优化最直接的手段是 降低代码包大小，推荐所有小程序使用合理使用分包加载，将小程序的页面按使用频率和场景拆分成不同分包，实现代码包的按需加载

代码注入优化

推荐所有小程序通过开启「按需注入」特性避免不必要的代码注入和执行，以降低小程序的启动时间和运行时内存

// in app.json
{
  "lazyCodeLoading": "requiredComponents"
}

图片渲染优化

• 利用压缩技术对图片进行压缩，在图片显示质量不受太大影响的情况下，可以对图片进行适度压缩，可以使用 tinypng、squoosh等工具
• 小程序Image组件支持通过配置lazy-load参数来实现 懒加载
• 利用cdn服务商（阿里云OSS）提供的能力获取适当的图片,支持格式转换、质量变换、尺寸处理
• 使用webp格式的图片

// in app.wxs 利用阿里云oss提供的服务转换图片格式
var wrapUrl = function (url) {
  var fConfig = '?x-oss-process=image/format,webp'
  return url + fConfig
}

// in wxml
<image webp src="{{ tools.wrapUrl(url) }}"  />