小伙伴们，大家有没有开发过网页或者H5等等web页面时候遇到需要调用微信的jweixin.js的呢？
小编在开发过程中遇到了一个问题，因为我的项目是微信小程序内链的H5页面，所以当时我就使用uniapp开发H5，但是我们将代码上传到服务器的时候是需要打包的，并且小编当时是使用服务器中的一个页面使用iframe标签引用的。所以遇到使用不了jweixin.scanQRCode（）这个方法，就没办法使用微信自带的扫一扫功能了。
那么uniapp开发的H5要怎么实现调用微信自带扫一扫呢？
服务器前端入口文件
<body>
<!--不妨可以看出小编在服务器的入口文件下使用的是iframe引入uniapp打包后的页面 -->
<iframe name="iframe" id="iframe" src="https://xxxx.xxx.com/static/h5/index.html" style="position: absolute;width: 100%;height: 100%;border: none;"></iframe>
<!--这里需要引入微信jweixin-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
//在服务器入口文件中封装扫码方法
function scanQRCode(){
wx.scanQRCode({
needResult: 0,// 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"],// 可以指定扫二维码还是条形码
success: function (res) {
//扫码成功后回调的方法
},
fail: function (res) {
alert("系统错误:"+JSON.stringify(res))
}
})
}
</script>
</body>
接着在uniapp前端中
uniapp代码
<view @click="scanQRCode">点击扫码</view>
<script>
methods: {
// 扫码签到
scanQRCode(){
//这里使用parent.调用父页面中的方法，即调用服务器前端入口文件我们封装的scanQRCode()方法
parent.scanQRCode();
}
}
</script>
那么，小伙伴们就会问了，为什么我这里不直接在uniapp中引入jweixin.js呢?
其实小编一开始也有尝试着直接在uniapp文件中引入jweixin.js，但是却不能起到作用。
小编一开始的失败代码
<view @click="scanQRCode">点击扫码</view>
<script>
import com from '@/static/js/com.js';
export default {
data() {
return {
}
},
onload（）{
}，
methods: {
// 扫码签到
scanQRCode(){
com.jweixin.scanQRCode({
needResult: 1,// 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
// 可以指定扫二维码还是一维码，默认二者都有
scanType: ["qrCode", "barCode"],
success: function(res) {
//但是这里却不会打印出数据
console.log(res);
if (res.errMsg == 'scanQRCode:ok') {
console.log('扫码结果：',res.resultStr);
}
},
fail:function(err){
//即使这个也不会弹出提示框
alert(JSON.stringify(err))
}
});
}
}
}
</script>
小编找了度娘，博客等等，都没有可以解决微信jweixin.js在iframe子页面中直接签名验证使用的。
综上，如果我们使用uniapp开发的项目没有直接作为服务器前端的入口文件，是使用iframe引用的，那么在uniapp页面中是无法直接使用微信jweixin.js，那么你想要调用微信支付，微信扫码等微信功能，那么都是实现不了的；只可以在父页面先签名验证了，子页面中再直接调用父页面的方法，才可以实现。
以上是小编的一个解决方案，如果小伙伴们还有什么好的方法请在下方评论，告知一下小编哦！
2238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
