微信小程序：web-view开发实践

使用该组件有个先决条件，就是得到小程序公众平台设置网页的域名白名单，具体做法请自行登录查看。

然后在小程序写入如下测试页：：
test.js：：

onLoad: function (options) {
    this.setData({
      url: 'https://你的域名/test.html?rnd=' + new Date().getTime()
    })
  }

test.wxml：：

<web-view src="{{url}}"></web-view>

test.html：：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test web-view </title>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
    <script>
      window.onload=function(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", '/getConfigData.htm?wxShareUrl=' + encodeURIComponent(location.href.toString()) + '&randomStr=' + new Date().getTime());
        xhr.send();
        xhr.onreadystatechange = function () {
          if ((xhr.readyState == 4) && (xhr.status == 200)) {
            var data = JSON.parse(xhr.response);
            if (data.status) {
              var item = data.data;
              wx.config({
                debug: true, // 开启调试模式
                appId: item.appId, // 必填，公众号的唯一标识
                timestamp: item.timestamp, // 必填，生成签名的时间戳
                nonceStr: item.nonceStr, // 必填，生成签名的随机串
                signature: item.signature,// 必填，签名，见附录1
                jsApiList: item.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
              var shareObj = item.shareObj;
              wx.ready(function () {
                console.log(window.__wxjs_environment === 'miniprogram') // true
                document.getElementById('div').innerHTML+=(window.__wxjs_environment).toString();
              });
            }
          }
        };
        // web-view下的页面内
        //wx.ready(function() {
          //console.log(window.__wxjs_environment === 'miniprogram') // true
          //document.getElementById('div').innerHTML+=(window.__wxjs_environment).toString();            
        //})
      }
    </script>
  </head>
  <!--_-->
  <body id="app">
    <div id="div">
      小程序环境：：
    </div>
  </body>
</html>

然后将test.html上传到指定的域名目录下进行测试。测试结果如下：

真机调试
使用wx.config配置测试：开发者工具和真机上的调试

真机调试
未使用wx.config配置测试：开发者工具和真机上的调试

反复比对测试发现，发现一定要使用通过config接口注入权限验证配置。也就是说要安装使用weixin-js-sdk的步骤来使用的。如果仅仅单独使用wx.ready是检测不到小程序环境的。还有发现即使wx.config配置不成功也可以正常检测，我在签名错误的前提下仍然能检测到环境标示。但是一定得有这个配置

然后，如果你是使用vue开发的项目，目前npm提供的weixin-js-sdk包版本是1.2.0，因此只能使用index.html全局引入weixin-js-sdk文件。

PS：今天我重新登录公众平台查看，我记得之前设置的是二级域名的白名单的，今天竟然自动变成一级域名了。【百思不得其解…】

微信小程序：web-view开发实践

猜你喜欢