微信开放标签【wx-open-launch-weapp】使用方法，亲测好用

如果你按照微信开放标签的文档来集成，那么恭喜你，绝对（99%）报错，今天在这里给大家演示一下在vue3中正确使用wx-open-launch-weapp的方法。

第一步： 配置wx.config，这个就不过多介绍了，那里不懂可以去翻官方文档，这个config的配置官方文档还是有可信度的，我的config设置如下：

wx.config({
  debug: false,
  appId: e.data.appId,
  timestamp: e.data.timestamp,
  nonceStr: e.data.noncestr,
  signature: e.data.signature,
  jsApiList: [
    'checkJsApi',
    'scanQRCode',
    'getLocation',
    'openLocation',
    'getLocalImgData',
    'chooseImage'],
  openTagList:['wx-open-launch-weapp']
});

其中e.data是我们接口给返回的数据，这个你们去找你们自己的后台人员要呀，openTagList字段就是开放标签，在这个字段中配置你要使用的标签，这里我要使用打开小程序的标签所以配置的内容是’wx-open-launch-weapp’，除了wx.config外还有两方方法需要注意，wx.ready和wx.error，如果调用完wx.config后没有回调wx.ready而是回调了wx.error，那么你得自己看看那里设置的不对，当前环境是否是微信环境，当前的域名是否是在白名单中的域名。

第二步： 解决警告，在vite.config.ts或者是vite.config.js中配置如下信息：

plugins: [
      vue({
        template: {
          compilerOptions: {
            //在这里配置忽略微信自定义组件
            isCustomElement: (tag) => tag.includes('wx-')
          }
        }
      })
   ]

这样处理完之后控制台就没有警告了，除了这种方式以外应该还有其他方式可以用，不过我没去研究如果你们的项目结构和我不一样，那你们自己想办法吧。

第三步： 绘制页面，代码如下：

<wx-open-launch-weapp :id="`launch-btn-${item.id}`" v-if="item.redirectType == 3" :username="item.rawid"
              :path="item.redirectURL" :appid="item.appid">
              <component :is="'script'" type="text/wxtag-template">
                <img style="width: 100%;" :src="item.picture" />
              </component>
            </wx-open-launch-weapp>

<component :is="'script'" type="text/wxtag-template">
  <img style="width: 100%;" :src="item.picture" />
</component>

这个代码不能照搬，这个里面有我们的业务逻辑，wx-open-launch-weapp标签的参数配置我就不多说了自己看文档吧，大家只需要关系wx-open-launch-weapp标签里的内容就行，如果大家用的vue那么就按照我这个写法就行。其中有几个需要注意的地方，wx-open-launch-weapp标签里的元素都不能再使用外联的class来设置样式了，推荐使用行内样式来做。

经过这三步之后我的项目算是可以正常使用了，如果大家有什么问题可以在评论区交流。