最近在用uniapp做混合APP，遇到的一些问题，✏️ 记录一下~
# 📱 适配问题：
uniapp提供了内置 CSS 变量:
--status-bar-height为 系统状态栏高度，此变量常用于自定义导航栏，还是很方便的。--window-top: 内容区域距离顶部的距离 ,--window-bottom: 内容区域距离底部的距离。内容区域就是去除系统状态栏，原生导航栏和底部安全区的区域。此外还有两个CSS变量在适配iphone过程中是常用到的：
constant(safe-area-inset-bottom),env(safe-area-inset-bottom),如避开 iPhoneX 底部安全区：.safeArea { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
# 📷 APP批量上传图片的问题：
🚩 情况说明：利用uni.uploadFileAPI批量上传图片时，通过
files字段传 一个 file 对象的数组 ，uri为必填项，在HBuilderX上内置浏览器中批量上传没有问题，是ok的，但是在真机调试批量上传的时候后台只接收到最后一张图片的参数~😭😳后面通过调试发现在APP上传图片只返回了path和size字段，而在内置浏览器中上传则包含了如下字段：
lastModified:1575899269994 lastModifiedDate:Mon Dec 09 2019 21:47:49 GMT+0800 (中国标准时间) {} name:"aren.png" size:2268 type:"image/png" webkitRelativePath:"" path:"blob:http://localhost:8080/7f935d88-0f45-4331-90c2-5fffcb60439b"发现H5和APP中上传后得到的本地路径是大不相同的，而且APP中上传后没有
name字段，这是最重要的一点，这就导致在APP上批量上传的图片 name是相同 默认为 file ，后台就视为一张图片，既然知道了原因就好解决了🎉🎉🎉let fileArr = []; let files = res.tempFiles; files.forEach((item,index) => { let itemImg = { uri: item.path, name: 'image'+index }; fileArr.push(itemImg); });# 🔑 权限展示tabbar问题：
需求：根据不同权限展示相应的tabbar
目前有两种思路：
自定义tabbar，不在pages.json里配置tabBar相关数据，将tabbar对应的item写成组件，在统一的home页根据权限展示相应的tabbar。
在pages.json里配置tabBar相关数据，重写原生tabbar，然后利用uni.hideTabBar这个API隐藏原生tabbar，在自定义tabbar内切换item时调用uni.switchTab以达到切换目的。
但是这两种方案都有一定的瑕疵，第一种最大的问题就是没有缓存机制，每次切换都是重新渲染，第二种容易出现选中item和对应页面不一致的情况（可通过vuex解决）。总之自定义tabbar是有很多问题的，目前uni官方也还没有出相关api去解决类似场景😶
时隔几天，再次更新，项目中使用了第二种思路，但在ios在切换tabbar的时候，会有机率出现tabbar被抬高底部白条的情况， 而且只有第一次打开的tabbar页会有这个问题，切换至其他tabbar又恢复正常，类似问题 【报Bug】uni-app V3编译器，uni.hideTabBar()不能正确隐藏底部tabbar ,最后调试发现 reLaunch 页面才能解决~
# page.json一些配置问题
- page.json里对应页面的style属性下配置：
"style" : { "navigationBarTitleText": "导航标题", "app-plus": { //导航栏底部边框配置 "titleNView": { "splitLine": { "color": "#f2f2f2"//边框颜色 } } "bounce": "none",//橡皮回弹效果 "scrollIndicator": "none",//不显示滚动条 //如果是自定义导航栏，使用系统默认的下拉刷新，会使在下拉过程中导航栏一起被拉下来，因为默认使用的是default刷新样式，这时需要使用circle刷新样式才不会出现问题，需要在对应页面下配置： "pullToRefresh": { "support": true,//开启下拉刷新 "color": "#2F89FC",//圆圈颜色 "style": "circle", "offset": "50px"//离顶部的距离 } } }
# 版本更新
onLaunch: function() {
plus.screen.lockOrientation('portrait-primary');//锁定屏幕方向
let _this = this;
//版本更新
plus.runtime.getProperty(plus.runtime.appid, function(app) {
let version = app.version;
// console.log(version)
_this.$api.common.updateVersion({ version: version }).then(res => {
if (res.code == 1 && res.data.status == 1) {
let updateType = res.data.up_type;
if (updateType == 1) {
//1热更新，2整包更新
let url = res.data.url_wgt;
installHotUpdate(url);
} else {
let andriod = res.data.url_android;
let ios = res.data.url_ios;
installApp(andriod, ios);
}
}
});
//热更新
function installHotUpdate(url) {
uni.downloadFile({
url: url,
success: downloadResult => {
if (downloadResult.statusCode === 200) {
plus.runtime.install(
downloadResult.tempFilePath,
{
force: true
},
function() {
//安装成功
plus.runtime.restart();
},
function(e) {
uni.showToast({
icon: 'none',
title: '热更新失败'
});
}
);
}
}
});
}
//整包更新
function installApp(url_android, url_ios) {
uni.showModal({
title: '检测到新版本',
content: '请更新到最新版本继续使用',
showCancel: false,
success: res => {
if (res.confirm) {
let osType = plus.os.name; //平台类型
if (osType == 'Android') {
//安卓下载地址
plus.runtime.openURL(url_android);
} else {
//苹果下载地址
plus.runtime.openURL(url_ios);
}
}
}
});
}
});
}
# 模块权限配置
- android需勾选
android.permission.INSTALL_PACKAGES及android.permission.REQUEST_INSTALL_PACKAGES权限，避免有些机型安装出现问题。 - 如有涉及到相册读写权限ios需要填写描述：如（‘如需要上传或保存图片，我们会使用该权限’）
# 其他问题
去除ios默认的底部安全区需在manifest.json中
app-plus属性下配置："safearea" : { "bottom" : { "offset" : "none" } }