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

最新推荐文章于 2024-08-15 09:46:16 发布

XujiRe

最新推荐文章于 2024-08-15 09:46:16 发布

阅读量8.5k

点赞数 1

分类专栏： uni-app 微信H5 文章标签： javascript 微信前端

本文链接：https://blog.csdn.net/XujiRe/article/details/122604140

版权

uni-app 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

微信H5

2 篇文章 0 订阅

订阅专栏

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