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);
              }
            });
          },
	}
 }