抖音网站0.5块钱100个写在最上面：假如开发碰到问题，首先去算卦关文档陌陌兼容就去看陌陌的文档，支付宝也一样，90%的问题都在文档上面写好了，只是没注意到
这篇文档是近日笔者uni-app小程序开发踩坑所遇见的一些问题，并不是入门文档，更多的是一些
开发方法和踩坑问题，在这儿持续更新一篇文档，便捷后续遇到问题查阅，另外好多基础的api或
问题我就不放进来了，直接去看官方文档比看那些文档简单直接的多，这儿附上链接：
uniapp.dcloud.net.cn/
假如文档用的话，麻烦点个赞再走哈~
默认环境为陌陌小程序，好多问题应当是通用的，针对支付宝和H5的问题文章最后面会单独列下来
持续更新中。。。
可以搭配我的另外一篇文档《#Vue基础知识速查指南》快手赞赞宝使用方法，食用更佳~~
1、uni-app是哪些
uni-app是一个使用Vue.js(opensnewwindow)开发所有后端应用的框架。
优点：
同类的还有Tarojs等，个人体验Taro好用一点
2、easycom
只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用
DOC：
用处:
3、uni-app如何使用npm库
Vue-cli项目
平常如何用，如今就如何用，es6model形式引用就行npmixxxxx-->importxxxfrom"xxxx"
HbuilderX项目
不能直接使用，须要额外npmixxxx至某文件夹以后，拖进项目根目录才可在文件中通过commonjs或Es6module方法引入
4、踩坑文档&使用心得（他人的文档）5、生命周期：
应用生命周期
1.onLaunch：当uni-app初始化完成时触发（全局只触发一次）
2.onShow：当uni-app启动，或从后台步入前台显示//窃听用户步入小程序
3.onHide:当uni-app从前台步入后台//窃听用户离开小程序
4.onError:当uni-app报错时触发
5.onUniNViewMessage:对nvue页面发送的数据进行窃听
组件生命周期
onLoad（窃听页面加载）onShow（窃听页面显示）onReady（窃听页面初次渲染完成）onHide（窃听页面隐藏）onUnload:窃听页面卸载onResize:窃听窗口规格变化onPullDownRefresh:窃听用户下拉动作，通常用于下拉刷新6、跨组件通信方式
DOC：
触发的风波都是App全局级别的，跨任意组件，页面，nvue，vue等使用时快手赞赞宝使用方法，注意及时销毁风波窃听，例如，页面onLoad里面uni.on注册监听，onUnload里边uni.of注册窃听，onUnload里面uni.on注册窃听，onUnload里面uni.off移除，或则一次性的风波，直接使用uni.$once窃听7、条件编译
DOC：
/* 只在微信环境下执行 */
// #ifdef MP-WEIXIN
uni.login({
xxxxx
});
// #endif
/* 除了微信其他环境下都执行 */
// #ifndef MP-WEIXIN
uni.login({
xxxxx
});
// #endif
表格：
值生效条件
VUE3
HBuilderX3.2.0+详情(opensnewwindow)
APP-PLUS
App
APP-PLUS-NVUE或APP-NVUE
Appnvue
H5
H5
MP-WEIXIN
陌陌小程序
MP-ALIPAY
支付宝小程序
MP-BAIDU
百度小程序
MP-TOUTIAO
字节跳动小程序
MP-LARK
飞书小程序
MP-QQ
QQ小程序
MP-KUAISHOU
快手小程序
MP-JD
易迅小程序
MP-360
360小程序
MP
陌陌小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW
快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION
快应用联盟
QUICKAPP-WEBVIEW-HUAWEI
快应用华为
8、全局变量&函数
1、在app.vue文件中配置
组件中使用
const app = getApp();
const gbobalData = app.gbobalData
//...
2、main.js文件，将变量或函数挂载在全局(与Vue配置全局函数方式一样)
如：
import Vue from 'vue';
import cloneDeep form '@/public/utils/lodash/cloneDeep.js';
Vue.prototype.$clone = cloneDeep;
9、分包
因小程序有容积和资源加载限制，各家小程序平台提供了发包形式，优化小程序的下载和启动速率。
demo
"pages":[],
// 分包配置
"subPackages": [
{
"root": "pages_tickets",
"pages": [
{
"path": "subpage1/index",
"style": {
"navigationBarTitleText": "哈哈哈哈哈哈",
"enablePullDownRefresh": false,
}
},
{
"path": "subpage2/index",
"style": {
"navigationBarTitleText": "嘻嘻嘻嘻嘻",
"enablePullDownRefresh": false,
}
},
]
}
]
10、uni-popup滚动穿透||小程序任意弹窗滚动穿透处理方案
核心原理是弹窗出现，设置最内层页面高度为可视窗口高度，超出隐藏，弹窗隐藏，高度恢复
最内层父级组件设置属性
overflow，弹窗显示，属性设置为hiddenheight，弹窗显示，属性设置为100vh，100vh表示当前整个屏幕大小data新增属性showPopup，控制款式
class = "page"
:style ="{
overflow: showPopup ? 'hidden' : 'visible',
height: showPopup ? '100vh' : auto
}"
>
这是最外层父级组件
pop
11、scroll-view不触发@scroll及@scrolltolower
scroll-view容器必须有一个确定的height（比率的形式也会失效），否则会导致@scroll及@scrolltolower风波难以触发
解决方案：
computed: {
scrollH: function () {
let sys = uni.getSystemInfoSync();
let winWidth = sys.windowWidth;
let winrate = 750 / winWidth;
let winHeight = parseInt(sys.windowHeight * winrate);
return winHeight;
}
},
12、复制功能
copyBtn() {
uni.setClipboardData({
data: this.copyContent,
success: function (res) {
uni.getClipboardData({
success: function (res) {
wx.showToast({
title: '已复制到剪贴板',
});
},
});
},
});
},
参考：blog.csdn.net/qq_37939251…
13、本地图片加载失败
developers.weixin.qq.com/community/d…
14、图片懒加载
ps：关于图片储存问题，用之前尽量用Tinypng压缩一下，超过1k的尽量用网路图，不要放本地，此处有坑。。。。
lazy-load属性
注意：图片懒加载只针对page与scroll-view下的image有效。
<image lazy-load :src="item.pic" />
按文档所述，小程序会提早加载上下三屏的图片，造成难以感知懒加载的存在。虽然image组件还有个如下隐藏的属性，官方文档上面没有标下来：
属性名类型默认值说明
lazy-load-margin
Number
—
图片懒加载屏数阀值，在正式步入设置的屏数才开始加载
为了能更清楚的确认懒加载是否生效，我们通过将lazy-load-margin设置为0，再看疗效，代码如下：
:lazy-load-margin="0" :src="item.pic" />
通过设置lazy-load-margin，并结合陌陌开发者工具调试器中的Network，我们可以很清楚的观察到懒加载的疗效了。另外，可以通过lazy-load-margin灵活设置懒加载屏数阀值。
参考：…
15、uni-app使用eventbus
…
16、uni-pop弹不下来
juejin.cn/post/711780…
省流：陌陌小程序（两个方式都可以解决）
删掉uni-translate包重新导出（不推荐，由于很麻烦）更改陌陌小程序开发者工具基础库，随意切一下即可（✨✨便捷好用）
支付宝小程序
删掉uni-translate包重新导出（不推荐，由于很麻烦）删掉uni-popup包重新导出（）17、富文本相关支付宝：
支付宝不支持直接显示html内容，须要用到第三方库将html格式转化
详见：github.com/ant-mini-pr…；
文档：opendocs.alipay.com/mini/compon…