vue h5跳转小程序

项目中需要从一个微信公众号得页面按钮跳转到另一个小程序首页。目前亲测有效有2种方案如下

方案一（此种方式最简单直接，不需要配置各种config参数，一个链接搞定）：

1、在跳转方的小程序平台上配置一个URL Scheme,配置好要唤起的地址，根据官网提供的流程生成链接如下(appid就是要跳转小程序的Appid；path就是你配置好要跳转的URL Scheme)：weixin://dl/business/appid=wx71234567777ffd45&path=pages/index/index&query=&env_version=release

官网参考链接：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

2、上面配置好后在代码里写好点击事件直接location.href跳转即可。

方案二(使用wx-open-launch-weapp标签跳转)：

前言，使用此标签跳转需要配置公众号的IP白名单，需要在当前h5代码存放的服务器上配置appsetting参数，需要在vue页面中请求接口获取wx.config的timestamp、nonceStr、signature；注意这里的参数获取最好通过接口返回，否则本地配置发送到正式环境测试时，会报错signature不合符要求。

1、服务器上的配置参数如下图圈出的部分（登录微信公众号找到对应的参数放进来）：

2、vue页面初始化时获取到wx.config的参数。

  getShopWxConfig() {
      let urlParam = window.location.href;//.split("#")[0]
      this.$api.user.GetWXConfig(urlParam)
      .then( res => {
        let resData = JSON.stringify(res);//此处不需要反序列化，下面参数直接res.取值即可
        wx.config({
          debug: false, // 验证结果弹窗控制（成功或者失败）
          appId: "wxaff27***********", // 必填，微信公众号appid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名
          jsApiList: ["onMenuShareAppMessage"], // 必填，如果只是为了跳转小程序，随便填个值都行
          openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
        });
        wx.ready(function() {
          //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
          // alert("ceshi"+resData);
        });
        wx.error(function(res) {
          // console.log('res',res);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
      })
      .catch( err => {
        Toast(err);
      })
    },

3、使用wx-open-launch-weapp来跳转，标签内的样式自行定义即可，注意：标签内的样式动态的不能解析。

完成这几步就可以开心的跳转了。

还有一种方案，测试未能正常跳转，如有使用此种方案能跳转的，欢迎留言指教。

增加click事件，使用wx.miniProgram.navigateTo跳转。

//   wx.miniProgram.navigateTo({
    //     appId: 'wx42f1*******',//要跳转的小程序的AppID
    //     path: 'pages/home/***',//要跳转的页面路径
    //     extraData: {
    //       // 传递的参数
    //     },
    //     success(res) {
    //       // 成功回调
    //        let resD = JSON.stringify(res);
    //       alert(resD+'sucessbug')
    //       console.log(resD)
    //     },
    //     fail(res) {
    //       let resD = JSON.stringify(res);
    //       // 失败回调
    //       alert("failddd"+resD)
    //       alert(resD)
    //       console.log(resD)
    //     }
    //   });