H5跳小程序

最新推荐文章于 2025-05-31 00:17:52 发布

原创最新推荐文章于 2025-05-31 00:17:52 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信 #微信小程序

小卖部 js 专栏收录该内容

63 篇文章

订阅专栏

这篇博客介绍了如何在网页中通过微信JSSDK配置wx-open-launch-weapp，实现点击按钮跳转到微信小程序的流程。首先，设置wx-open-launch-weapp标签，然后通过后端接口获取必要的配置信息，包括appId、nonceStr、signature和timestamp。接着，调用wx.config进行配置，并处理可能的错误。最后，展示了一个示例按钮，用户点击后将启动微信小程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<wx-open-launch-weapp
          id="launch-btn"
          username="gh_4xxxxxxxxxxx"
          path="pages/index/index.html"
        >
          <script type="text/wxtag-template">
            <style>.btn { padding: 0; background: #6512AE;font-size: 15px;color: #fff; border: none; }</style>
            <button class="btn">去小程序解锁更多权限</button>
          </script>
        </wx-open-launch-weapp>

this.getWxParam();
getWxParam() {
        let that = this;
		const pageUrl = window.location.href.split("#")[0];

		this.$http.get('后台接口', {
          params: {
            url: pageUrl
          },
        })
        .then((res) => {
          if (res.success) {
            const {
              appId,
              nonceStr,
              signature,
              timestamp
            } = res.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: appId, // 必填，公众号的唯一标识
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: signature, // 必填，签名
              jsApiList: ["chooseWXPay", "showMenuItems"], // 必填，需要使用的JS接口列表
              openTagList: ['wx-open-launch-weapp']
            });
            wx.error(function(res) {
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
              console.log('获取微信失败')
              that.$refs.uToast.show({
                title: res,
              });
            });
          }
        });
			},

记得引入微信的jssdk