vue h5跳转小程序

最新推荐文章于 2025-10-28 10:07:31 发布

原创最新推荐文章于 2025-10-28 10:07:31 发布 · 2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了在项目中通过两种方式实现从微信公众号页面按钮跳转到小程序首页：方案一是利用URLScheme进行配置并直接跳转，无需额外配置；方案二是使用wx-open-launch-weapp标签，但需在服务器配置和前端请求接口获取签名。

项目中需要从一个微信公众号得页面按钮跳转到另一个小程序首页。目前亲测有效有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)
    //     }
    //   });