遇到过的坑
小程序页面栈最多十层
问题:假设小程序内有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) }}" />