vue转html5,vue项目-h5跳转小程序

根据微信的开放标签wx-open-launch-weapp可以实现从h5页面跳转小程序的需求

微信文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

一、安装weixin-js-sdk

版本要求1.6.0

npm install weixin-js-sdk

二、config注入

wx.config({

debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: appId, // 必填，公众号的唯一标识，填自己的！

timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据

nonceStr: nonceStr, // 必填，生成签名的随机串

signature: signature, // 必填，签名，见附录1

jsApiList: [

'wx-open-launch-weapp',

],

openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填

})

let _this = this

wx.ready(function (res) {

console.log(res)

})

wx.error(function (res) {

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名

console.log(res)

});

三、页面引入

class="openweapp"

id="launch-btn"

username="gh_c001fa831731"

path="pages/index/index.html"

>

打开小程序

mounted() {

var btn = document.getElementById("launch-btn");

btn.addEventListener("launch", function (e) {

console.log("success");

});

btn.addEventListener("error", function (e) {

alert("小程序打开失败");

console.log("fail", e.detail);

});

},

四、vue报错

vue会显示wx-open-launch-weapp组件未注册

在main.js中加入

Vue.config.ignoredElements = ['wx-open-launch-weapp']

五、效果展示

9005739c46c226971939fefbb388b45.jpg