开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 994|回复: 0
收起左侧

[技术分享] 用uniapp做混合APP,遇到的一些问题~

[复制链接]
发表于 2021-10-26 10:48:58 | 显示全部楼层 |阅读模式   广东省揭阳市

之前在用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需要填写描述:如(‘如需要上传或保存图片,我们会使用该权限’)

其他问题

  • 去除ios默认的底部安全区需在manifest.json中app-plus属性下配置:
    "safearea" : {
            "bottom" : {
                "offset" : "none"
            }
        }

评分

参与人数 1好评 +1 精币 +2 收起 理由
冰点 + 1 + 2 感谢分享,很给力!~

查看全部评分

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表