这篇文档是近期笔者uni-app小程序开发踩坑所遇到的一些问题，并不是入门文档，更多的是一些
开发技巧和踩坑问题，在这里持续更新一篇文档，方便后续碰到问题查阅，另外很多基础的api或
问题我就不放进来了，直接去看官方文档比看这些文档简单直接的多，这里附上链接：
如果文档用的话，麻烦点个赞再走哈~
持续更新中。。。
优点：
同类的还有Tarojs等，个人体验Taro好用一点
只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用
好处:
Vue-cli项目
平时怎么用，现在就怎么用，es6model方式引用就行npmixxxxx-->importxxxfrom"xxxx"
HbuilderX项目
不能直接使用，需要额外npmixxxx至某文件夹之后，拖进项目根目录才可在文件中通过commonjs或Es6module方式引入
应用生命周期
1.onLaunch：当uni-app初始化完成时触发（全局只触发一次）
2.onShow：当uni-app启动，或从后台进入前台显示//监听用户进入小程序
3.onHide:当uni-app从前台进入后台//监听用户离开小程序
4.onError:当uni-app报错时触发
5.onUniNViewMessage:对nvue页面发送的数据进行监听
组件生命周期
1、在app.vue文件中配置
2、main.js文件，将变量或函数挂载在全局(与Vue配置全局函数方法一样)
如：
js复制代码importVuefrom'vue';importcloneDeepform'@/public/utils/lodash/cloneDeep.js';Vue.prototype.$clone=cloneDeep;9、分包因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
demo
js复制代码"pages":[], //分包配置 "subPackages":[ { "root":"pages_tickets", "pages":[ { "path":"subpage1/index", "style":{ "navigationBarTitleText":"哈哈哈哈哈哈", "enablePullDownRefresh":false, } }, { "path":"subpage2/index", "style":{ "navigationBarTitleText":"嘻嘻嘻嘻嘻", "enablePullDownRefresh":false, } }, ] } ]10、uni-popup滚动穿透||小程序任意弹窗滚动穿透处理方案核心原理是弹窗出现，设置最外层页面高度为可视窗口高度，超出隐藏，弹窗隐藏，高度恢复
解决方案：
ps：关于图片存放问题，用之前尽量用Tinypng压缩一下，超过1k的尽量用网络图，不要放本地，此处有坑。。。。
lazy-load属性
注意：图片懒加载只针对page与scroll-view下的image有效。
为了能更清楚的确认懒加载是否生效，我们通过将lazy-load-margin设置为0，再看效果，代码如下：
支付宝小程序
修改背景色即可,background-color="#fff"
修改背景色会导致pop内部元素圆角失效，需要修改uni-popupy源码两项内容，必须两个地方都改，否则不会生效
bottom函数，修改translatestyle属性
改为YYYY/MM/DDhh:mm:ss即可
css复制代码scroll-view::-webkit-scrollbar{width:0;height:0;display:none;background-color:transparent;}20、小程序对应多个环境AppID怎么配置背景：小程序区分一下开发环境和生产环境，故分别做了两个appid区分，每次开发需要改manifest.json中的appid和其他配置文件的数据
新建static/utils/setManifest.js脚本
通过读取自定义config文件下的配置动态修改manifest.json
Demo:
"navigationStyle":"custom"
条件编译没写对,查看一下报错对应文件的ifdef条件编译配置是不是有单词拼错的情况，修改一下即可
//#ifdefH5
//#endif
在package.json中配置UNI_OUTPUT_DIR
如：UNI_OUTPUT_DIR=dist/dev/dev-mp-weixin，注意这个字段一定要配置在uni-build之前
栗子：
page.json中配置condition
DEMO:
json复制代码"condition":{ //模式配置，仅开发期间生效 "current":0,//当前激活的模式（list的索引项） "list":[ { "name":"",//模式名称 "path":"",//启动页面，必选 "query":""//启动参数 }, ] }29、uni-app使用iconfont照着文档配置即可
代码
css复制代码 @keyframesshine{ 0%{ background-position:-468px0; } 100%{ background-position:468px0; } } .skeleton{ width:100%; background-color:#f1f0f5!important; background-image:linear-gradient(toright,#f1f0f58%,#fff18%,#f1f0f533%)!important; background-size:800px100%!important; animation:1.5slinear0sinfiniteshine; }使用
1、将代码贴到App.vue的style中或放进自己项目的全局样式表中
2、在需要做骨架屏的代码上配置skeleton类名（这个类名只是加了背景色和动画，其他的布局还是要自己写的哈）
DEMO
图片作用：这个是导航栏下方的阴影线，在pages.json的文档里有描述。目前只能在编译后的源码里删除引用。
我的方案：通过js脚本正则替换shadow-grey.png为base64格式图片
这个插件是vue-count-up的移植版，可以直接导进项目包中使用
uview组件库，但是需要将整个库引入，按自己项目评估使用哪一个
解决方案：rgba(0,0,0,0)代替即可
修改manifest.json或者vue.config.js文件，两者配置冲突改一个即可；
详细参考webpackdevserver参数配置即可
本地图片地址为：static/images/cover.min.png
H5的router配置如下
js复制代码"router":{"mode":"hash","base":"/h5"},期望：
编译为H5之后，页面引用资源地址为：
h5/static/images/cover.min.png
结果：
依然为原来链接，静态资源前没有自动拼上base，static/images/cover.min.png
引用静态资源的时候加入~@如：
最终build打包之后，通过这种方式引入的静态图片会自动转化为base64的方式引入，如下图DEMO：
所以放本地的图片体积尽量不要太大，一定要压缩，有条件尽量使用网络图
文档：注意使用这个api需要去支付宝申请，通过了服务端才能解析出手机号码
问题：
调用uni.getPhoneNumber的返回值和my.getPhoneNumber参数格式不同，期望得到my.getPhoneNumber格式的返回值
期望返回：
js复制代码{response:"{"response":"","sign":""}"}实际返回：
js复制代码{encryptedData:"xxxxxxxxx",errMsg:"getPhoneNumber:ok",sign:"xxxxxxxxxx"}解决方案：重新调用支付宝的my.getPhoneNumberApi
找到原因时的心情：
解决方案：可使用正则替换
解决方案：无，支付宝说的算，按自己需求找折中方案
问题:button设置open-type="contact"支付宝环境下无效
配置条件编译，支付宝环境下直接使用支付宝提供的contact-button标签
tntInstId和scene需要自己去支付宝智能客服配置页获取
page.json中配置全局样式或针对mp-alipay设置allowsBounceVertical属性即可
这里要注意，是allowsBounceVertical：'YES'或allowsBounceVertical：'NO'，
不要顺手写true、false了,因为我做过这种蠢事
坑：
链接打开支付宝小程序目前只支持页面后携带一个参数，多个参数的情况下会参数丢失
DMEO：
如上链接其实有两个参数：userId和source，但最终页面onload能接收到的query只有userid一个参数
DEMO：
1、input添加always-system属性
缺点：
2、针对支付宝单独兼容
步骤一：若已在input中设置了enableNative属性，删除enableNative属性的全部设置。步骤二：在app.json文件window对象内，设置"enableInPageRenderInput":"YES"。