uniapp——开发微信H5调用jweixin微信js-sdk(uniapp开发H5使用微信扫一扫功能)

小伙伴们，大家有没有开发过网页或者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，那么你想要调用微信支付，微信扫码等微信功能，那么都是实现不了的；只可以在父页面先签名验证了，子页面中再直接调用父页面的方法，才可以实现。
以上是小编的一个解决方案，如果小伙伴们还有什么好的方法请在下方评论，告知一下小编哦！