您的位置：首页 > 移动开发 > 微信开发

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

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

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

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：今天我重新登录公众平台查看，我记得之前设置的是二级域名的白名单的，今天竟然自动变成一级域名了。【百思不得其解…】
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  微信小程序
相关文章推荐
新的分享
章节导航