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

陆先森

之前在用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"
          }
      }