遇到过的坑
小程序页面栈最多十层
问题：假设小程序内有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) }}" />
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。商机网仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 tenspace2022@163.com 举报，一经查实，本站将立刻删除。 本文链接：https://www.315965.com/n/54930.html
