记录一下使用微信小程序wx-open-launch-weapp组件

最新推荐文章于 2024-06-30 00:09:04 发布

触不可及的Allen

最新推荐文章于 2024-06-30 00:09:04 发布

阅读量1.8k

点赞数

分类专栏：微信小程序文章标签：微信小程序微信小程序

本文链接：https://blog.csdn.net/Jy123_/article/details/121697299

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

微信小程序wx-open-launch-weapp组件

H5跳小程序的组件
官方文档：微信开放文档

开始配置

这个组件只能在微信内置浏览器里面使用
前期可以用微信开发者工具进行调试（公众号网页模式）
在这里插入图片描述

第一步需要在微信公众平台设置JS安全域名

H5一般授权就是通过微信公众号
配置完成引入JS文件

第二步就是配置config

在这里插入图片描述
前端需要后端传过来的参数就是这些
后端需要的签名算法签名算法文档
debug建议开启

官方用例
<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

这样就可以获取到H5传给小程序的参数了
之前用URL scheme 生成的链接不能动态添加参数

坑的地方，这个组件要用生成或者vue 模板插入，文档没有写

一般错误 url 错误就是配置域名（公众号）
签名错误就是微信公众号的appid写错了或者不是服务号还需要认证
后面一定要在真机上运行模拟器会提示
在这里插入图片描述

一定要真机，微信内置浏览器！！！

最后贴上代码，代码只是测试后面可以封装成一个方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
 

    #launch-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      overflow: hidden;
    }
  </style>
  
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
  <div id='app'>
    <div id="launch-btn">
      
    </div>
  </div>
  <script src='https://cdn.jsdelivr.net/npm/vue@2'>

  </script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {}
      },
      created() {

        this.getWxconfig();
        // setTimeout(() => {
        this.renderDom()
        // }, 2000)

      },
      methods: {
        // 动态渲染微信开发标签 跳转小程序
        renderDom() {
          var btn = document.getElementById('launch-btn');
          console.log('btn', btn)
          let script = document.createElement('script')
          script.type = 'text/wxtag-template'

          script.text =
            `<div style="height:100%;width:100%;text-align:center;">
              
              打开小程序</div>`
          let html =
            `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="	
     小程序的gh原始id" path="跳转小程序地址和参数">${script.outerHTML}</wx-open-launch-weapp>`

          btn.innerHTML = html; // html字符串赋值
          // 点击按钮 正常跳转触发
          btn.addEventListener("launch", function (e) {
            console.log("success");
            alert(`跳转成功 - ${e.detail}`)

          });
          // 点击跳转 抛出异常
          btn.addEventListener("error", function (e) {
            console.log("fail", e.detail);
            alert(`跳转异常 - ${e.detail}`)
          });
          document.addEventListener('WeixinOpenTagsError', function (e) {
            console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响
          });


          // return html
        },
        // h5页面先获取config
        async getWxconfig() {

          let t = this;
          let href = window.location.href;

          let u = navigator.userAgent;
          let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
          let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          let url = '';
          if (isAndroid) {
            url = location.href;
            console.log('android', url)
          }
          if (isIOS) {
            url = location.href.split('#')[0]; //hash后面的部分如果带上ios中config会不对
            console.log('ios', url)
          } else {
            url = location.href;
          }

          var params = new URLSearchParams();
          params.append('字段', '参数');
       

          axios.post('链接url', params).then(function (res) {

            if (res.data.retcode === '0000') {
          
              wx.config({
                debug: true,
              
                appId: '公众号的appid',
                timestamp: res.data.timestamp,
                nonceStr: res.data.noncestr,
                signature: res.data.signature,
                jsApiList: [""],
                openTagList: ['wx-open-launch-weapp']
              });
              wx.ready(function () {
                console.log('初始化成功！')
              });
            }
          }).catch(function (error) {
            console.log(error);
          });


        },

      }





    })
  </script>
  <script>
  
  </script>
</body>

</html>