移动端兼容微信

在微信sdk调用chooseImage获取图片后采取getLocalImgData转换base64（此坑必踩）

原因如下：微信的getLocalImgData对安卓跟苹果的处理方式不一样，ios通过getLocalImgData得到的是纯正的base64图片数据，而安卓得到的却是没有base头的数据
解决方法：判断手机系统，若是安卓机，则手动加上**data:image/jpeg;base64,**头

const self=this;
wx.chooseImage({
    count: 1, // 默认9        // 选择图片数量，选项采用只能选择1张图片
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，选项采用压缩图
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (req) {
    wx.getLocalImgData({
        localId: req.localIds[0].toString(), // 图片的localID为第1个
        success: function (res) {
            const localData = res.localData;
            // localData是图片的base64数据，可以用img标签显示
            //因为安卓、苹果的处理方式不同（我们不一样！），在此做了些特殊的处理！
            if(localData.indexOf('data:image') == 0){  //判断转换中是否带'data:image'
                //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                self.image=localData;
            }else{
                //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                //感兴趣的可以自行console或代理调试看看~老司机都懂~
                //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                self.image="data:image/jpeg;base64,"+localData.replace(/\n/g,"");
            }
        }
    });
}
});

因为浏览器限制，对于隐藏的音频或是视频是不能直接通过js去自动播放文件的，但是微信内置的浏览器确实可以的

console.log("播放声音");
var audio = this.$refs.audio;
audio.currentTime = 0;


if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
    audio.play();
}, false);
} else {
    document.addEventListener("WeixinJSBridgeReady", function () {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        audio.play();
    });
    }, false);
}

详情请移步到微信开发者中心去：https://qydev.weixin.qq.com/wiki/index.php?title=WeixinJS接口&oldid=287

微信公众号里面的项目，微信浏览器有自带的调整字体，当字体调大之后，页面布局发生变化，导致布局错乱,影响用户体验,解决办法如下:

解决思路是禁止用户调整字体，在进入页面的时候重新设置字体大小，因为是进入页面才进行的操作，大概会有1s左右的延迟时间，可以加个loadding去优化用户体验

//安卓兼容
(function () {
        if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
            handleFontSize();
        } else {
            if (document.addEventListener) {
                document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
            } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
            }
        }
        function handleFontSize() {
            // 设置网页字体为默认大小
            WeixinJSBridge.invoke('setFontSizeCallback', {
                'fontSize': 0
            });
            // 重写设置网页字体大小的事件
            WeixinJSBridge.on('menu:setfont', function () {
                WeixinJSBridge.invoke('setFontSizeCallback', {
                    'fontSize': 0
                });
            });
        }
    })();

//ios兼容  ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;} 

注解：此文章是笔者在开发过程中遇到的一些有关微信的兼容性问题并且在网上找的解决方法的，内容并非原创，再次只为做个记录，此文章会持续更新的