微信公众号跳转App-微信开放标签

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。说白了就是公众号跳转APP

因为是最近开放的功能，配置相关的请查看-官方文档，接下来就直接操作了。（基于vue）

先下包因为次功能为基于wxjssdk1.6.0版本+的, 还有一种直接引入wxjssdk的链接，这种方法官方文档里有就不介绍了。

为什么使用npm包的jssdk, 是为了按需加载, 其实也没啥必要, 直接在index.html, 直接引入wxjssdk的链接全局一次wx.config就ok。

两种随便选一个 npm 包 jweixin-1.6.0 / weixin-js-sdk 官方上这块具体也没说到底怎么用，所以开始实践。

在对应文件引入对应的包。

  import wx from 'jweixin-1.6.0';

在created/beforeCreated中调用获取你们微信公众号基本信息的参数，在回调用wx.config

created() {
 this.ceshi();
},
methods: {
 ceshi() {
  this.$ajax.get(url, {
    params: {
      ...params,
    },
  }).then((res) => {
    const returndata = res.data;
    wx.config({
      debug: false,
      appId: returndata.appId,
      timestamp: returndata.timestamp,
      nonceStr: returndata.nonceStr,
      signature: returndata.signature,
      jsApiList: [],
      openTagList: ['wx-open-launch-app'],
    });
    wx.ready(() => {
    });
    wx.error((err) => {
      console.log(err, 'error'); // 如果报错打印报错信息
    });
  })
 },
}

引用及加载部分就已经好了， 直接去使用就可以了。

在template部分使用,使用的方法为官方写法

<wx-open-launch-app id="launch-btn" appid="appid" extinfo="your-extinfo" @launch="getApp" @error="errorOpen">
  <template>
    <div class="diy-style">App跳转</div>
  </template>
</wx-open-launch-app>

介绍下wx-open-launch-app元素的属性

这时候你会发现，报错了，看报错信息为没有注册<wx-open-launch-app>组件

​​我们来解决下报错，在main.js里

Vue.config.ignoredElements = [ // 忽略自定义元素标签抛出的报错
  'wx-open-launch-app', 
];

​​

一切都好了， 发生产直接进行测试。

ios显示 config:fail 看意思是加载失败了走的wx.error

因为刚开始值调试ios机型没有使用安卓机， 所以就一直在试，考虑是否为异步问题，结果都是fali，后来用的安卓机试了一下😏

安卓显示 config:param is empty

​

百度了一下 这个意思是我们在wx.config中jsApiList这个属性是必填项，现在我们给的一个空数组。

既然ios没有显示具体的报错信息，就按照安卓显示的来修改下。

wx.config({
  debug: false,
  appId: returndata.appId,
  timestamp: returndata.timestamp,
  nonceStr: returndata.nonceStr,
  signature: returndata.signature,
  jsApiList: ['onMenuShareAppMessage'], // 因为不能为空，所以我随便写了一个微信的方法
  openTagList: ['wx-open-launch-app'],
});

​​再次发版。 两个端都显示config:ok

这时候我们点击我们的按钮， 不会跳转， 因为wx.config 已经成功了，说明已经注入好了，不会跳转是因为我们这块 类似scope的插槽写的有问题，

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替，来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的default插槽为默认插槽，可不声明插槽名称

直接通过<script type="text/wxtag-template"><script>代替<template></template>就可以了，这样我们自定义的样式也有了。

<wx-open-launch-app id="launch-btn" appid="对应appid" extinfo="your-extinfo" @launch="getApp" @error="errorOpen">
  <script type="text/wxtag-template">
    <style>
      .diy-style{
        <!-- 对应标签样式 -->
      }
    </style>
    <div class="diy-style">点击app</div>
  </script>
</wx-open-launch-app>

一切流程都通了，还剩一个问题， 就是我们的按钮， 在wx.config加载的时候 是空的， 加载好了才显示对应的文案, 这个时候我们就直接写一个样式一样的替代模块， 等加载好了再显示我们的这个对应可以跳转的元素就可以了。

over~ 有什么不明白的，可以评论联系奥。