之前在用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字段,而在内置浏览器中上传则包含了如下字段:
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去解决类似场景:no_mouth:
时隔几天,再次更新,项目中使用了第二种思路,但在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需要填写描述:如(‘如需要上传或保存图片,我们会使用该权限’)
其他问题
|