微信网页开发总结

今年开发了几个微信端活动，也遇到很多微信端bug，整理一下。

1. 真机微信环境下调试网页

//1：vconsole。引入后在真机会出现一个绿色按钮，点击后就可以看到开发者工具
     <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
     <script>
         var vConsole = new VConsole();
     </script>
//2：eruda。使用方式跟vconsole类似，但是功能比vconsole多，引入后会在真机看到一个设置的按钮
    <script src="//cdn.jsdelivr.net/eruda/1.2.2/eruda.min.js"></script>
    <script>
        eruda.init()
    </script>

2. 因改变微信字体大小造成排版错误

 //禁止安卓缩放
    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字体缩放
body {
   /* IOS禁止微信调整字体大小 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
  }

3. 微信浏览器ios虚拟键盘顶起页面，收起时不恢复

//解决微信端键盘顶起页面
    $("body").on('blur', 'input', function () {
        repairHight()
    })
    $("body").on('change', 'select', function () {
        repairHight()
    })
    function repairHight() {
        let currentPosition, timer
        let speed = 1 // 页面滚动距离
        timer = setInterval(function () {
            currentPosition = document.documentElement.scrollTop || document.body.scrollTop
            currentPosition -= speed
            window.scrollTo(0, currentPosition)
            currentPosition += speed
            window.scrollTo(0, currentPosition)
            clearInterval(timer)
        }, 1)
    }

4.微信分享相关

var share_data = {
        title: '标题', // 分享标题
        desc: '描述', // 分享描述
        link: encodeURI(location.origin + '/index.html?id=123') , // 分享链接
        imgUrl: location.origin + '/img/wx.jpg', // 分享图标
        success: function () {
            console.log("分享成功")
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    }
    $.post(
        baseUrl + '/WeChat/Common/JSSDK_Signature',//此处为自己业务后端写的接口
        { url: window.location.href },
        function (rsp) {
            var res = eval('(' + rsp + ')')
            var appId = res.data.appId;
            var nonceStr = res.data.nonceStr;
            var jsapi_ticket = res.data.jsapi_ticket;
            var timestamp = res.data.timestamp;
            var signature = res.data.signature;
            wx.config({
                debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, //必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, //必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideAllNonBaseMenuItem', 'showMenuItems'] //必填，需要使用的JS接口列表，所有JS接口列表 见附录2
            });
             wx.ready(function () {
                //分享到朋友圈
                wx.onMenuShareTimeline(share_data)
                //分享给朋友
                wx.onMenuShareAppMessage(share_data)
            })
        }
    )

5. 微信jssdk常见问题

• code:40048

一般是当前域名跟公众号后台配置的域名不一致；

• 安卓自定义分享成功，ios失败

        一般是安全域名问题，分享的link域名或者imgUrl不在微信后台配置的域名内；

• 安全域名配置成功，link带参分享失败

       需要encodeURI编码一下

• 部分机型打开空白（华为和小米某些老款机型），或者出现不安全的弹框，浏览器打开正常

        排查很久发现是证书链的问题，部分机型下要求严格，https协议和证书链都要求完整且有效