填坑记录

表单元素使用注意

Uniapp采用Vue开发，属于前后端分离架构。前端只需要获取后端传递过来的数据，通常情况下只要变量有设置，我们采用诸如 {{msg}} 的格式就能把内容渲染到text、button、view标记中。但是给表单元素赋值的时候我们需要用v-bind:value="msg"绑定内容,如果这时候变量msg没有在 data() 方法中定义或返回,直接在其他地方设值，将无法渲染。

JS调用底层API

适当延迟，等待初始化完毕再调用底层API 避免出现各类异常报错 如地图API

【禁止在请求头加gzip压缩,苹果 小程序直接忽律 安卓将无法正确返回数据】

异常处理

采用内置的tabbar时t,pop弹窗将无法覆盖tab，可以采用自定义tab。

开发小记

1.幻灯片banner图片大小长宽比例最好保持在2:1,这样可以完整显示出来。如长320宽160.

2.上传到小程序的图片资源不能太大，可以适当压缩。总体积不能超过1M。否则无法上传打包。

3.IOS联机调试开发,将IOS接上USB线插入电脑，然后安装Itunes或者itools安装驱动。重启Hbuilder安装

4. APP端地图坐标点无法include-points 需要适当缩放 IOS 地图原生缩放无法及时更新  

5.苹果地图经纬度只接受数值型参数 如果是字符串型的数字 无法解析

6.ios 打开高德导航会默认进入内嵌导航。可能会出现错位，影响审核。具体做法是直接调用高德APP导航，代码如下

//打开第三方地图指引
open_map_guide(longitude, latitude, name, address) {
    console.log(uni.getSystemInfoSync());
    var isapp = false;
    // #ifdef APP-PLUS
    isapp = true;
    // #endif
    if (uni.getSystemInfoSync().platform == 'ios' && isapp == true) {
        plus.runtime.openURL("iosamap://navi?sourceApplication=" + encodeURIComponent(name) + "&poiname=" + encodeURIComponent(address) + "&poiid=BGVIS&lat=" + latitude + "&lon=" + longitude + "&dev=1&style=2", function(res) {
            console.log(res);
            var msg = '';
            if (res.code == -3) {
                msg = res.message + ",请先安装高德地图";
            } else {
                msg = res.message;
            }
            uni.showModal({
                content: msg,
                showCancel: false
            })
        });
    } else {
        uni.openLocation({
            longitude: parseFloat(longitude),
            latitude: parseFloat(latitude),
            name: name,
            address: address,
        })
    }
}

官方文档

iOS端 如需使用第三方地图进行导航，需要在 manifest.json 文件内增加 urlschemewhitelist 节点，在线打包即可
{  
  "app-plus": {  
      "distribute": {  
          "ios": {  
              "urlschemewhitelist": [  
                  "baidumap",  
                  "iosamap",  
                  "qqmap"  
              ]  
          }  
      }  
  }  
}

7.uniapp 打开外部应用 

8.android 和 IOS 不支持加载远程图片 只支持本地项目相对地址

9.判断非小程序不能只是用 该代码判断  uni.getSystemInfoSync().platform=='ios' || uni.getSystemInfoSync().platform=='android'

// #ifdef APP-PLUS
   if (uni.getSystemInfoSync().platform=='ios' || uni.getSystemInfoSync().platform=='android') {
      icon = '../../static/shop_48.png';
   } 
// #endif

10.IOS端 image 标签无法显示本地图片 转换成base64

uni.getFileSystemManager().readFile({
    filePath: result.tempFilePaths[0],
    encoding: 'base64',
    success: res = > {
        let base64 = 'data:image/jpeg;base64,' + res.data
        this.userinfo.local_images.push(base64);
    }
});

11.下拉刷新回调函数onPullDownRefresh中获取列表时最好 在结束时调用 uni.stopPullDownRefresh();

苹果环境下不会自动结束刷新动画

12.scroll-view设定垂直滚动后，滚动到底部后出现大量空白高度。

image有默认的高宽 css先设置image标签的高度和宽度(不是容器.imagebox)

image {
    width: 100%;
    height: 100%;
}

13.在微信小程序环境下使用tki-qrcode组件

① 生成带图片二维码需要将图片地址缓存到本地

this.icon = this.http2https(this.icon);
uni.showLoading({
    title: '数据加载中...',
    mask: true
});
// 小程序中需要先下载到本地
uni.downloadFile({
    url: this.icon,
    success: (res) = > {
        console.log('res', JSON.stringify(res));
        if (res.statusCode === 200) {
            this.icon = res.tempFilePath
        } else {
            this.icon = '../../../../static/logo.png'
        }
        uni.hideLoading();
        console.log('this.icon2', this.icon);
        setTimeout(() = > {
            this.$refs.qrcode._makeCode()
        }, 500);
    },
    fail(res) {
        uni.hideLoading();
        app.alert(JSON.stringify(res));
    }
});

② 小程序强制https如果图片地址是htto需要转换成https

http2https(str) {
    if (str.indexOf('http:') != -1) {
        var subStr = new RegExp('http', 'i'); //创建正则表达式对象,不区分大小写
        str = str.replace(subStr, "https"); //把'http'替换为https
    }
    return str;
}

14.微信小程序不支持图文分享 需要转换成图片，保存到本地，引导用户去分享

uni.share({
    provider: "weixin",
    scene: "WXSenceTimeline",
    type: 2,
    imageUrl: this.poster.finalPath,
    success: function(res) {
        console.log("success:" + JSON.stringify(res));
    },
    fail: function(err) {
        if (app.sysinfo.provider == 0) {
            app.Toast('可将图片保存到相册后分享到朋友圈');
        } else {
            app.Toast('分享失败')
        }
        console.log("fail:" + JSON.stringify(err));
    }
});