H5或Vue跳转微信小程序成功案例

本人使用的VUE框架。
代码提示:
1、vue代码;
2、点击事件代码;
3、php代码;

遇到的大坑重要提示:
3、必须是认证服务号;
4、必须是服务号绑定的微信小程序
5、https接口获取服务号的access_token
6、如果你的https接口没有问题,但是你的wx-open-launch-weapp标签没有显示或者点击无反应。有以下原因:
1》、vue代码样式问题,可以根据我的代码写样式,最好写成一样的。
2》、在微信开发者工具没有反应的话,最好在微信客户端试试。
3》、JSSDK版本是1.6.0。
4》、如果框架写上还不行,可以试试在文件main.js中,写上:
Vue.config.ignoredElements = [‘wx-open-launch-app’, ‘wx-open-launch-weapp’];

官方链接参考:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

还是不行的话,下方留言或者私信我。

1、

2、
onClickOpens() {
	this.$axios({
	method: "POST",
	url: "https://接口",
	data: {
		url: window.location.href,
	},
	}).then(function (res) {
		console.log(res);
		if (res.status == 200) {
			console.log(res.data.appid);
			wx.config({
				debug: true,
				appId: res.data.appid,
				timestamp: res.data.timestamp,
				nonceStr: res.data.nonce_str,
				signature: res.data.sign,
				jsApiList: ["scanQRCode"],
				openTagList: ["wx-open-launch-weapp"], // 可选,需要使用的开放标签列表,例如[‘wx-open- launch-weapp’]
			});
			wx.error(function (res) {
				console.log(res);
	            //config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
			});
		}
	});
},

H5或Vue跳转微信小程序成功案例_第1张图片

你可能感兴趣的:(微信小程序,H5,VUE,小程序,vue,javascript,html5,js)