用uniapp做混合APP,遇到的一些问题~

·  阅读 7084
用uniapp做混合APP,遇到的一些问题~

之前在用uniapp做混合APP,遇到的一些问题,:pencil2: 记录一下~

:iphone: 适配问题:

  • 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);  
      }  
    复制代码

:camera: APP批量上传图片的问题:

  • :triangular_flag_on_post: 情况说明:利用uni.uploadFileAPI批量上传图片时,通过files 字段传 一个 file 对象的数组 ,uri为必填项,在HBuilderX上内置浏览器中批量上传没有问题,是ok的,但是在真机调试批量上传的时候后台只接收到最后一张图片的参数~:sob::flushed:

  • 后面通过调试发现在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 ,后台就视为一张图片,既然知道了原因就好解决了:tada::tada::tada:

  •   let fileArr = [];
      let files = res.tempFiles;
      files.forEach((item,index) => {
            let itemImg = { uri: item.path, name: 'image'+index };
            fileArr.push(itemImg);
           });
    复制代码

    :key: 权限展示tabbar问题:

  • 需求:根据不同权限展示相应的tabbar

  • 目前有两种思路:

    1. 自定义tabbar,不在pages.json里配置tabBar相关数据,将tabbar对应的item写成组件,在统一的home页根据权限展示相应的tabbar。

    2. 在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_PACKAGESandroid.permission.REQUEST_INSTALL_PACKAGES权限,避免有些机型安装出现问题。
  • 如有涉及到相册读写权限ios需要填写描述:如(‘如需要上传或保存图片,我们会使用该权限’)

其他问题

  • 去除ios默认的底部安全区需在manifest.json中app-plus属性下配置:

     "safearea" : {
                "bottom" : {
                    "offset" : "none"
                }
            }
    复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改