h5浏览器跳转打开微信小程序
目录
h5浏览器跳转打开微信小程序
步骤 1:安装微信 JSSDK
首先,在项目中引入微信 JSSDK。你可以直接在 HTML 文件中引入,也可以通过 npm 安装:
npm install weixin-js-sdk --save
步骤2:创建 Vue 组件处理跳转``
import wx from 'weixin-js-sdk';
export default {
data(){
return{
isWeChatBrowser: false,
}
},
mounted(){
this.isWeChatBrowser = this.checkWeChatBrowser();
if (this.isWeChatBrowser) {
this.initWeChatSDK();
}else{
//正式版为release,体验版为trial,开发版为develop,仅在微信外打开时生效。注意:若不填写,则默认打开正式版小程序。
window.location.href="weixin://dl/business/appid=appid&path=pages/mine/index/index&env_version=trial"
}
},
methods:{
// 检查是否为微信浏览器
checkWeChatBrowser() {
const ua = window.navigator.userAgent.toLowerCase();
return ua.includes('micromessenger');
},
// 初始化微信 JSSDK
initWeChatSDK() {
const configData = {
appId: '公众号ID', // 必填,公众号的唯一标识
timestamp: 'your_timestamp', // 必填,生成签名的时间戳
nonceStr: 'your_nonceStr', // 必填,生成签名的随机串
signature: 'your_signature', // 必填,签名
jsApiList: ['checkJsApi', 'navigateToMiniProgram'], // 必填,需要使用的JS接口列表
openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
};
wx.config(configData);
wx.ready(() => {
this.redirectToWeChatMiniProgram();
});
wx.error((err) => {
console.error('微信 JSSDK 配置错误:', err);
});
},
// 跳转到微信小程序
redirectToWeChatMiniProgram() {
wx.miniProgram.navigateTo({
appId: '', // 必填,小程序的唯一标识
url: '/pages/mine/index/index',
envVersion: 'trial',
success() {
console.log('成功跳转到小程序');
},
fail(err) {
console.error('跳转到小程序失败', err);
}
});
},
}
}