【前言】

在有些情况下，我们需要在微信环境下，由公众号跳转小程序。现微信官方已提供此微信开放标签， <wx-open-launch-weapp>,此标签可跳转至任意指定小程序哦（亲测）

官方链接

【目录】

官方补充 2.代码实例
踩坑历史

【正文】

一. 官方补充

官方已经很详细了，我这里就班门弄斧，复制粘贴，顺便划一下重点

使用步骤

微信开放标签使用步骤与微信JS-SDK类似，也需要引入JS文件等步骤。如果是公众号身份的网页，需要绑定安全域名，如果是使用小程序云开发静态网站托管的小程序网页，则不需绑定安全域名即可直接使用（即跳过下面"步骤一：绑定安全域名"）。

绑定域名（这步很重要，一定要确定域名填写正确）登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
引入JS文件在需要调用JS接口的页面引入如下JS文件：res.wx.qq.com/open/js/jwe… （支持https）

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）

备注：支持使用 AMD/CMD 标准模块加载方法加载。

通过config接口注入权限验证配置并申请所需开放标签与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印.
  !!!!重点调试时一定要打开，否则不知道错在哪
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [      'checkJsApi',
                    'scanQRCode',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getLocation',
                ], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

通过ready接口处理成功验证

wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});

通过error接口处理失败验证(调试可用，相当于.catch)

wx.error(function (res) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

二.代码实例


//react hooks函数
const ref = useRef(null);

useEffect(() => {
        const btn = ref.current;
        if (!btn) return;
        btn.addEventListener('touchstart', onTClick);
        btn.addEventListener('click', onClickStart);
        btn.addEventListener('launch', onClick);
        btn.addEventListener('error', onError);
        return () => {
            btn.removeEventListener('touchstart', onTClick);
            btn.removeEventListener('click', onClickStart);
            btn.removeEventListener('launch', onClick);
            btn.removeEventListener('error', onError);
        };
    }, []);
    
<wx-open-launch-weapp
     username="gh_230d7d88c7d0" //必填 所需跳转的小程序原始id，即小程序对应的以gh_开头的id
     path={path} //选填 所需跳转的小程序内页面路径及参数
     style={{
         width: '1.3rem',
     }}
 >
     <script type="text/wxtag-template">
         <button style={{
         width: '100%',
         height: '1.5rem',
         color: '#fff',
         borderRadius: '0.3rem',
         border:'none',
         background:'#ee485c',
     }}>去购买</button>
     </script>
</wx-open-launch-weapp>

三.踩坑历史

公众号必须是已认证，小程序必须是合法合规 2.权限验证配置必须正确，特别是签名，签名排查方法

a.利用
```
wx.error(function (res) {}
```

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名 });

b.打开

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印. });

如果签名错误

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68ae053023454eb2b9868200c9758d7c~tplv-k3u1fbpfcp-watermark.image)

3.为什么要使用\<template>\</template>

由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过\<template>\</template>进行包裹。对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"></script>进行代替，来包裹插槽模版和样式

也正是因为这个原因，会导致如果配置错误，会导致按钮不显示

公众号跳转小程序，APP