uni-app 坑
1.fixed定位
- 在H5中，tabbar，顶部导航栏，系统状态栏（手机信号，电量显示等）包含在内容区，H5在定位时，需要算上这些高度（如果页面中存在这个元素的话）
- 解决办法：使用条件编译，针对不同的平台设定不同的top值
position: fixed;
top:var(--window-top);
/* #ifdef MP-WEIXIN || APP-PLUS */
top:0;
/* #endif */
2.引入阿里巴巴图标库的字体显示异常
在引入阿里巴巴图标库后，打包成app有可能造成以下效果：
解决办法：引入字体文件是添加https前缀
@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');
}
详见官方文档说明uniapp字体图标
3.指令
- 在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(n, index) in 10" 中，在H5平台 n 从 1 开始，其他平台 n 从 0 开始，可使用第二个参数 index 来保持一致(index从0开始)
- 在小程序平台中v-show指令无效，建议统一使用v-if
4.组件参数
- 在小程序平台中,组件参数不得直接传递数组长度，否则无法检测其更新，建议使用计算属性(后期已修复)
- 在小程序平台中，组件参数传递一个引用类型的数据时(对象，数组)时，是深拷贝了一份，而H5和app平台的数据源和接收者指向同一个数据，所以不能直接对prop进行修改
- 在小程序平台中，封装自定义组件的v-model时，在小程序中务必使用value和input
model:{
prop:'value',
event:"input"
},
4.页面背景色和高度
- page标签是应用的根标签，H5平台，page标签会被编译成uni-page-body标签，而其他页面都是page标签或者uni-page-body标签的直接子元素
- page标签高度默认自适应，可以在公共样式中为其设定高度100%和默认的背景色
- 如果页面需要设定其他的背景色，可以在页面根标签中设定
//common.css 默认背景色
page{
height: 100%;
background-color: #f8f8f8;
}
//自定义页面背景色
<style scoped>
.page-wrap{
min-height: 100%;
background-color: $uni-bg-color-grey;
}
</style>
5.页面定时器要及时清除
- 当页面卸载，或者隐藏之后，需要清除页面内的定时器
//监听页面隐藏
onHide(){
//清除定时器
clearTimeout(this.timer)
},
onUnload(){
//清除定时器
clearTimeout(this.timer)
},
6.空值渲染
- 在小程序平台中，null和undefine渲染到模版中，会将其渲染成null
- 以上规则会不固定，会随着版本升级反复横跳，建议自行用过滤器处理
7.getApp()
- H5和App平台获取的是Vue实例，能调用vuex，还能访问Vue的原型链
- 小程序平台获如果要访问vuex和Vue的原型链，需要getApp().$vm
8.样式穿透
- 样式穿透只能在页面中使用，在组件中无效
9.上传图片
- 再上传图片时，uni.uploadFile()的name参数需要固定为file 其他参数在小程序中会失败
//开启选择图片功能
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[0])
//展示loading状态
uni.showLoading({
title: '上传中'
})
//上传图片
uni.uploadFile({
url: getApp().globalData.baseUrl + '/api/inspect/uploadimg', //服务器路径
filePath: res.tempFilePaths[0],//要上传的图片路径
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()
}
})
},
})
10.启动过慢
- 首页如果不存在图片，则一定要关闭下面的选项
- 这里官方的文档个人认为存在问题，官方说法是：等待首页渲染完毕后再关闭Splash图，实质指的是图片，因为只有远程图片才会存在加载耗时的问题
11.条件渲染嵌套
- v-show指令多级嵌套后，在微信小程序下，除最外层以外的v-show指令无效
