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

39,577 阅读3分钟

遇到过的坑

小程序页面栈最多十层

问题:假设小程序内有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-containercustom-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 可将HTMLMarkdown转为微信小程序WXML

mp-html 小程序富文本组件

性能优化

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

代码包体积优化

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

代码注入优化

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

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

图片渲染优化

  • 利用压缩技术对图片进行压缩,在图片显示质量不受太大影响的情况下,可以对图片进行适度压缩,可以使用 tinypngsquoosh等工具
  • 小程序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) }}"  />