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

小伙伴们,大家有没有开发过网页或者H5等等web页面时候遇到需要调用微信的jweixin.js的呢?
小编在开发过程中遇到了一个问题,因为我的项目是微信小程序内链的H5页面,所以当时我就使用uniapp开发H5,但是我们将代码上传到服务器的时候是需要打包的,并且小编当时是使用服务器中的一个页面使用iframe标签引用的。所以遇到使用不了jweixin.scanQRCode()这个方法,就没办法使用微信自带的扫一扫功能了。
那么uniapp开发的H5要怎么实现调用微信自带扫一扫呢?

服务器前端入口文件

<body>
	
	<iframe name="iframe" id="iframe" src="https://xxxx.xxx.com/static/h5/index.html" style="position: absolute;width: 100%;height: 100%;border: none;">iframe>
	
	<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,那么你想要调用微信支付,微信扫码等微信功能,那么都是实现不了的;只可以在父页面先签名验证了,子页面中再直接调用父页面的方法,才可以实现。
以上是小编的一个解决方案,如果小伙伴们还有什么好的方法请在下方评论,告知一下小编哦!

你可能感兴趣的:(uni-app,微信H5,javascript,微信,前端)