h5 跳转小程序

最新推荐文章于 2024-06-06 15:11:07 发布

默赜

最新推荐文章于 2024-06-06 15:11:07 发布

阅读量670

点赞数 1

分类专栏：学习文章标签：前端

本文链接：https://blog.csdn.net/s51511/article/details/124965537

版权

学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

连续两个项目用到了这个功能,想了一下 ,还是把它写下来吧,防止自己忘记.

绑定域名:

首先在微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

这个是第一步绑定要求:最好是一级域名。

权限签名算法：

后端处理给出一个接口，用于微信授权签名。

url要前端传入（动态传入，如果是静态链接会有影响）

前端处理：

1.安装weixin-js-sdk（1.6.0版本）

npm install weixin-js-sdk

2.调用方法并进行config接口注入权限验证

调用接口过程中有坑：获取的url必须动态的而且需要经过window.location.href.split('#')[0];处理的。

原因是链接被分享到微信后，微信会对链接进行加入一些参数。故需要此操作

async socketWeixinGetVxTicket () {
      let url = window.location.href.split('#')[0];//获取当前链接
      let data = { 'url':url}//请求参数
      let res = await socketWeixinGetVxTicket(data)//调用后端签名算法接口
      let wxData = res.data
      wx.config({
          debug: false, // 开启调试模式
          appId: wxData.appId, // 必填，公众号的唯一标识
          timestamp: wxData.timestamp, // 必填，生成签名的时间戳
          nonceStr: wxData.nonceStr, // 必填，生成签名的随机串
          signature: wxData.signature, // 必填，签名，见附录1
          jsApiList: [
              // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              'wx-open-launch-weapp',
              'chooseImage', 
              'previewImage'
          ],
          openTagList: [
              'wx-open-launch-weapp'
          ] 
      })
      wx.ready(function (res) {
        console.log('回调成功', res)
      })
      wx.error(function (res) {
          // config信息验证失败会执行error函数，
如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
也可以在返回的res参数中查看，对于SPA可以在这里更新签名
          console.log('回调失败',res)
      });
    },

使用：

 <div >
        <template >
            <wx-open-launch-weapp
                id="launch-btn"
                username="gh_xxxxxxxx"
                :path="xcxurl"
                @launch="handleLaunchFn"
                @error="handleErrorFn"
            >
                <script type="text/wxtag-template">
                  <div style='width: 10.46rem; height: 1.8rem; text-align: center;
                   line-height: 1.8rem; color: #ffffff; 
                   background: linear-gradient(318deg, #FF5050 0%, #FE6363 100%); 
                   border-radius: 0.6rem; font-size: 12px;'>了解更多店铺信息</div> 
                </script>
            </wx-open-launch-weapp>
        </template>
     </div>

  // 跳转小程序
    handleLaunchFn(e) {
        console.log('跳转小程序',e);
    },
    // 跳转失败
    handleErrorFn(e) {
        console.log("跳转失败", e.detail);
    },