vue h5公众号页面跳转小程序出坑

前段时间开发的微信h5公众号页面，又添加新需求了~ 原本有些跳转是直接跳h5外链，现在要改成跳转到小程序，通过一系列的文档、经验分享，发现这个坑可以踩，并且能够填上，那就开始吧。

首先要能成功填坑，需要满足最基础的三个条件：

1、微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

2、引入的sdk至少要1.6以上

3、公众号和要跳转的小程序需要进行关联

只有能做到以上三点，才能开始我们下边的开发工作~

一、需要在main.js里注册组件

就是在使用前要把组件绑定到app实例上，类似于日常我们的组件引用。

ini 复制代码

app.config.ignoredElements = [
  'wx-open-launch-weapp',
]

二、跳转内容开发

关于wx-open-launch-weapp这个组件的使用方法，是有两种：一种是在页面中直接使用组件方式插入，另一种是通过v-html的方式插入。

1、对于第一种方式我试过了，但是并没有生效，可能是缺少配置，有兴趣的小伙伴可以研究下，简单放个示例代码。

xml 复制代码

<wx-open-launch-weapp id="launch-btn" username="gh_12345678" path="pages/index/index" > 
    <script type="text/wxtag-template">
        <style>
            .btn { 
                width: 100px;
                height: 100px; 
            }
        </style> 
        <button class="btn">打开小程序</button>
    </script>
</wx-open-launch-weapp>

2、主要说一下第二种`v-html`方式：

简单说就是将上边代码的内容，通过模板字符串形式插入到html中，相比上边的写法，html插入的方式更接近我们日常的开发语法，写起来也更容易。

css 复制代码

// home.vue
<span v-html="indexData.miniHtml"></span>

const indexData = relative({
    miniHtml: ''
})

const getHtml = () => {
  let script = document.createElement('script')
  script.type = 'text/wxtag-template'
  script.text = `
    <div style="
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;"
    >
      <img style="width: 32px; height: 32px;" src="" />
      <span style="
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
        margin-top: 13px;
      ">充值</span>
    </div>`
  if(process.env.NODE_ENV === 'production'){
    // 生产环境
    indexData.miniHtml =
      `<wx-open-launch-weapp style="height: 107px;width: 100%;" id="launch-btn"
          username="gh_123456789"
          path="/pages/index/index">${script.outerHTML}
        </wx-open-launch-weapp>`
  } else {
    // 测试环境
    indexData.miniHtml =
      `<wx-open-launch-weapp style="height: 107px;width: 100%;" id="launch-btn"
          username="gh_987654321
          path="/pages/index/index">${script.outerHTML}
       </wx-open-launch-weapp>`
  }
  nextTick(() => {
    let launchButton = document.getElementById('launch-btn');
    (launchButton as any).addEventListener('launch', function(e: any) {
      console.log('success', e)
    });

    (launchButton as any).addEventListener('error', function(e: any) {
      console.log('fail', e)
    })
  })
}

说一下上边代码，通过动态创建一个script标签，添加到页面中。组件部分通过innerHtml方式插入，编写采用模板字符串方式。

其中wx-open-launch-weapp的几个主要参数：

username：要跳转的小程序原始id，就是gh开头的id

path：要跳转的小程序对应的路径，可以跳转webview内嵌的h5页面

最后通过addEventListener监听组件是否加载成功，如果有需要处理组件加载成功、失败逻辑的，可以在这里进行区分判断。

3、配置`wx.config`并加载组件

大家都知道，在wx内嵌的h5页面，如果需要调用相关api和组件，需要进行配置，配置成功后才可使用。

typescript 复制代码

const params = {
  
}
http.getWxShare(params).then((res) => {
  if (res.code === 200 && res.data) {
    (proxy as any).$wx.config({
      debug: false,
      appId: res.data.appId,  // 必填，公众号的唯一标识
      timestamp: res.data.timestamp,  // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr,  // 必填，生成签名的随机串
      signature: res.data.signature,  // 必填，签名
      jsApiList: ["onMenuShareAppMessage"],
      openTagList: ['wx-open-launch-weapp']  //,'wx-open-launch-weapp'
    });
    setTimeout(() => {
      // 加载组件内容
      getHtml();
      (proxy as any).$wx.ready(() => {
        document.addEventListener("WeixinOpenTagsError", function (e: any) {
          console.error(e!.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
        });
        console.log('config配置成功')
      });
      (proxy as any).$wx.error((res: any) => {
        console.log('config配置失败')
      });
    }, 1000)
  } else {
    console.log('准备失败');
  }
}, function (err: any) {
  console.log('准备失败', err);
})

上边代码就不过多解释了，很容易看懂。至此开发就完成了，发布测试环境我们可以看到能成功加载，并能正常跳转。

但是对于我这个页面，有个很明显的问题

有一列图标都可以点击跳转，其他图标是跳转h5页面或者公众号内部跳转，只有这一个是需要加载组件跳转小程序。

在页面初始化进来的时候可以看到，其他图标和文字都是瞬间加载出来了，但是跳转组件会晚一点才会出现，会有明显的空白位置出现，用户体验不好

针对上面的问题，我这边的处理方式是：先将图片和文字初始化进去，此时组件未加载，也就相当于页面上只是个静态图和文字，并不能点击。组件加载完成之后，直接替换掉初始化内容。体现在代码上就是我们给上边的miniHtml变量一个初始值：

css 复制代码

const indexData = reactive({
    miniHtml: `<div style="
      width: 100px;
      height: 100px;
    >
      <img style="width: 32px; height: 32px;" src="" />
      <span style="
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
        margin-top: 13px;
      ">充值</span>
    </div>`
)}

至此完美~入了坑并且完好的爬出来了

关于组件更详细的细节内容，有兴趣的小伙伴可以阅读官方文档开放标签说明文档