uni-app 坑
<h3 id="1fixed定位">1.fixed定位</h3><ul>
<li>在H5中，tabbar，顶部导航栏，系统状态栏（手机信号，电量显示等）包含在内容区，H5在定位时，需要算上这些高度（如果页面中存在这个元素的话）</li>
<li>解决办法：使用条件编译，针对不同的平台设定不同的top值</li>
</ul>
<pre><code>position: fixed;
top:var(--window-top);
/*#ifdefMP-WEIXIN || APP-PLUS*/
top:0;
/*#endif*/
</code></pre>
<h3 id="2引入阿里巴巴图标库的字体显示异常">2.引入阿里巴巴图标库的字体显示异常</h3>
<p>在引入阿里巴巴图标库后，打包成app有可能造成以下效果：<br>
<img src="https://img2020.cnblogs.com/blog/1813302/202105/1813302-20210514180605409-46872212.jpg"></p>
<p>解决办法：引入字体文件是添加https前缀</p>
<pre><code>@font-face {
font-family: "iconfont"; /* Project id 2271765 */
src: url('https://at.alicdn.com/t/font_2271765_8z0uelhyxja.woff2?t=1620961638438') format('woff2'),
url('https://at.alicdn.com/t/font_2271765_8z0uelhyxja.woff?t=1620961638438') format('woff'),
url('https://at.alicdn.com/t/font_2271765_8z0uelhyxja.ttf?t=1620961638438') format('truetype');
}
</code></pre>
<p>详见官方文档说明uniapp字体图标</p>
<h3 id="3指令">3.指令</h3>
<ul>
<li>在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(n, index) in 10" 中，在H5平台 n 从 1 开始，其他平台 n 从 0 开始，可使用第二个参数 index 来保持一致(index从0开始)</li>
<li>在小程序平台中v-show指令无效，建议统一使用v-if</li>
</ul>
<h3 id="4组件参数">4.组件参数</h3>
<ul>
<li>在小程序平台中,组件参数不得直接传递数组长度，否则无法检测其更新，建议使用计算属性(后期已修复)</li>
<li>在小程序平台中，组件参数传递一个引用类型的数据时(对象，数组)时，是深拷贝了一份，而H5和app平台的数据源和接收者指向同一个数据，所以不能直接对prop进行修改</li>
<li>在小程序平台中，封装自定义组件的v-model时，在小程序中务必使用value和input</li>
</ul>
<pre><code>model:{
prop:'value',
event:"input"
},
</code></pre>
<h3 id="4页面背景色和高度">4.页面背景色和高度</h3>
<ul>
<li>page标签是应用的根标签，H5平台，page标签会被编译成uni-page-body标签，而其他页面都是page标签或者uni-page-body标签的直接子元素</li>
<li>page标签高度默认自适应，可以在公共样式中为其设定高度100%和默认的背景色</li>
<li>如果页面需要设定其他的背景色，可以在页面根标签中设定</li>
</ul>
<pre><code>//common.css 默认背景色
page{
height: 100%;
background-color: #f8f8f8;
}
</code></pre>
<pre><code>//自定义页面背景色
<style scoped>
.page-wrap{
min-height: 100%;
background-color: $uni-bg-color-grey;
}
</style>
</code></pre>
<h3 id="5页面定时器要及时清除">5.页面定时器要及时清除</h3>
<ul>
<li>当页面卸载，或者隐藏之后，需要清除页面内的定时器</li>
</ul>
<pre><code>//监听页面隐藏
onHide(){
//清除定时器
clearTimeout(this.timer)
},
onUnload(){
//清除定时器
clearTimeout(this.timer)
},
</code></pre>
<h3 id="6空值渲染">6.空值渲染</h3>
<ul>
<li>在小程序平台中，null和undefine渲染到模版中，会将其渲染成null</li>
<li>以上规则会不固定，会随着版本升级反复横跳，建议自行用过滤器处理</li>
</ul>
<h3 id="7getapp">7.getApp()</h3>
<ul>
<li>H5和App平台获取的是Vue实例，能调用vuex，还能访问Vue的原型链</li>
<li>小程序平台获如果要访问vuex和Vue的原型链，需要getApp().$vm</li>
</ul>
<h3 id="8样式穿透">8.样式穿透</h3>
<ul>
<li>样式穿透只能在页面中使用，在组件中无效</li>
</ul>
<h3 id="9上传图片">9.上传图片</h3>
<ul>
<li>再上传图片时，uni.uploadFile()的<strong>name</strong>参数需要固定为<strong>file</strong> 其他参数在小程序中会失败</li>
</ul>
<pre><code> //开启选择图片功能
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'], //从相册选择或者相机拍照
success: function (res) {
//res.tempFilePaths blob格式的图片列表 可通过地址直接访问
//res.tempFiles 文件列表 通过FormData()读取
//console.log(res.tempFilePaths)
//var formData = new FormData()
//formData.append('img_title',res.tempFiles)
//展示loading状态
uni.showLoading({
title: '上传中'
})
//上传图片
uni.uploadFile({
url: getApp().globalData.baseUrl + '/api/inspect/uploadimg', //服务器路径
filePath: res.tempFilePaths,//要上传的图片路径
name: "file",//使用固定的参数file 其他参数在小程序中会失败 2022-05-10 zhoulianli
success: (uploadFileRes) => {
var upload_res = JSON.parse(uploadFileRes.data)
console.log(' upload_res', upload_res)
//如果上传成功
if(upload_res.code == 1){
//保存服务器返回的图片地址
that.img_url = upload_res.data
//切换按钮状态
that.status = "success"
//触发父组件的 uploadSuccess 事件 返回图片地址和自定义name
that.$emit('uploadSuccess',{
img_url: upload_res.data,
name: that.name,
params: that.params
})
}
},
complete:()=>{
uni.hideLoading()
}
})
},
})
</code></pre>
<h3 id="10启动过慢">10.启动过慢</h3>
<ul>
<li>首页如果不存在图片，则一定要关闭下面的选项</li>
<li>这里官方的文档个人认为存在问题，官方说法是：等待首页渲染完毕后再关闭Splash图，实质指的是图片，因为只有远程图片才会存在加载耗时的问题<br>
<img src="https://img2023.cnblogs.com/blog/1813302/202301/1813302-20230113173011640-1806127286.png"></li>
</ul>
<h3 id="11条件渲染嵌套">11.条件渲染嵌套</h3>
<ul>
<li>v-show指令多级嵌套后，在微信小程序下，除最外层以外的v-show指令无效</li>
</ul><br><br>
来源：https://www.cnblogs.com/OrochiZ-/p/14356989.html
頁:
[1]