微信开放标签唤起App

作者: RiverSouthMan | 来源:发表于2020-07-07 00:22 被阅读0次

微信开放标签唤起App
解决6.5.16及以上版本微信内部M页不能唤起APP
微信内H5网页打开app
微信内H5页面唤起小程序
微信开放标签
微信开放标签样式rem单位适配
Android端微信开放标签打开app
iOS如何调用微信支付
iOS微信支付步骤以及出现的问题总结（一）
对微信支付和支付宝支付SDK的封装

相关配置说明文档
先了解一下webcomponent
我们自己实现一个“微信开放标签”
项目中引入开放标签的思路
完整参考代码
微信开放标签调试
异常场景
优化建议

先了解一下webcomponent

微信开放标签的实质就是webcomponent
了解webcomponent的概念，有助于我们更好的使用微信开放标签。
Using custom elements
Using shadow DOM
Using templates and slots

Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML templates（HTML模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。

image.png

这里，有一些 Shadow DOM 特有的术语需要我们了解：

Shadow host：一个常规 DOM节点，Shadow DOM 会被附加到这个节点上。
Shadow tree：Shadow DOM内部的DOM树。
Shadow boundary：Shadow DOM结束的地方，也是常规 DOM开始的地方。
Shadow root: Shadow tree的根节点。

我们自己实现一个“微信开放标签”

customElements.define('wx-open-launch-app',
      class extends HTMLElement {
        constructor () {
          super()
          console.log('this', this)
          // console.log('template', this.getElementsByTagName('template'))
          const shadowContent = document.createElement('a')
          shadowContent.innerHTML = '唤起App'
          shadowContent.addEventListener('click', function () {
            alert('launch app')
          })
          const shadowRoot = this.attachShadow({mode: 'open'}) // 微信把mode设置为了closed，外界无法获取到shadow内部的元素
            .appendChild(shadowContent)
          console.log('shadowRoot:', shadowRoot)
        }
      }
    )
    let dom = document.createElement('wx-open-launch-app')
    let box = document.createElement('div')
    box.style.width = 100 + 'px'
    box.style.height = 100 + 'px'
    box.style.position = 'fixed'
    box.style.top = '0'
    box.style.left = '0'
    box.style.zIndex = '999'
    box.style.overflow = 'hidden'
    box.appendChild(dom)
    document.body.appendChild(box)

项目中引入开放标签思路：

微信jssdk初始化
开放标签创建。把开放标签当做普通标签处理。
（由于公司ios端使用了openInstall唤起的方案，所以只对安卓做了处理）

image.png

创建开放标签，模板内容样式做特殊处理

export const createOpenApp = (root, schema) => {
  root.setAttribute('launch-box-created', true)
  const box = document.createElement('div')
  // 创建开放标签
  const clickDom = document.createElement('wx-open-launch-app')
  box.appendChild(clickDom)
  // 设置Shadow host节点css样式，是其可以完全覆盖在目标元素上。注意设置overflow:hidden;属性
  box.style.width = root.clientWidth + 'px'
  box.style.height = root.clientHeight + 'px'
  box.style.position = 'absolute'
  box.style.top = '0'
  box.style.left = '0'
  box.style.zIndex = '999'
  box.style.overflow = 'hidden'
  box.setAttribute('class', 'launch-app-box')
  // 模板内容样式特殊处理为width: 1000px; height: 1000px;目的是能完全覆盖
  clickDom.innerHTML =
    `<template>
      <style>
        .btn {
          width: 1000px;
          height: 1000px;
        }
      </style>
      <div class="btn"><div>
    </template>`
  clickDom.setAttribute('extinfo', schema)
  clickDom.setAttribute('appid', '********')
  if (window.getComputedStyle(root, null).position === 'static') {
    // 为目标元素设置position属性
    root.style.position = 'relative'
  }
  root.appendChild(box)
  clickDom.addEventListener('ready', function () {
    console.log('dom ready', new Date().getTime() - domReadyTime)
    removeLoading() // 移除loading遮罩
  })
  clickDom.addEventListener('click', function (e) {
    e.preventDefault()
  })
  clickDom.addEventListener('launch', function (e) {
    console.log('success', e)
  })
  clickDom.addEventListener('error', function (e) {
    console.log('fail', e.detail)
  })
}

遍历所有需要点击添加开放标签的dom节点

export const domTraverse = function (rootElement) {
  const startTime = new Date().getTime()
  // console.log('==domTraverse start==', startTime)
  let domList = []
  if (rootElement) {
    domList = rootElement.getElementsByClassName('root-wx-open-launch-app')
  } else {
    domList = document.getElementsByClassName('root-wx-open-launch-app')
  }
  let j = 0
  for (let i = 0; i < domList.length; i++) {
    const item = domList[i]
    const schema = item.getAttribute('schema')
    const launchCreated = item.getAttribute('launch-box-created')
    if (!launchCreated) {
      j++
      createOpenApp(item, schema)
    }
  }
  console.log('开放标签数量：', j)
  console.log('所有开放标签创建花费时间：', (new Date().getTime() - startTime) + 'ms')
}

完整参考代码

import Vue from 'vue'
import axios from 'axios'
import $ from 'jquery'
let wxConfidReady = false
let logInstance = new Vue()
let loadingDom = null
let asyncStartTime = 0 // 记录微信jssdk加载到wx.ready触发的时长
let domReadyTime = 0 // 记录微信开放标签的初始化时长
// 判断ios、android
export const getPlatform = () => {
  if (new Date('2016-11-11 11:11:11').getTime() > 0) {
    return 'android'
  }
  return 'ios'
}
// 异步加载微信jssdk
export const asyncWeiXinJS = (cb) => {
  asyncStartTime = new Date().getTime()
  if (isWeixinFn()) {
    const script = document.createElement('script')
    script.src = '//res.wx.qq.com/open/js/jweixin-1.6.0.js'
    document.body.appendChild(script)
    if (cb) {
      script.addEventListener('load', cb)
    }
  }
}
// 判断微信内浏览器环境
export const isWeixinFn = () => { // 判断是否是微信
  const ua = navigator.userAgent.toLowerCase()
  return ua.indexOf('micromessenger') !== -1
}
// 页面loading遮罩层
const addLoading = function () {
  const vm = new Vue({
    data () {
      return {
        show: true
      }
    },
    template: `
    <div v-if="show" style="position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.6);
    ">
      <div style="display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;">
        <van-loading type="spinner" />
      </div>
    </div>`
  }).$mount()
  loadingDom = vm.$el
  document.body.append(loadingDom)
}
// 移除loading
const removeLoading = function () {
  try {
    setTimeout(() => {
      if (loadingDom) {
        document.body.removeChild(loadingDom)
        loadingDom = null
      }
    }, 300)
  } catch (e) {
    console.log(e)
  }
}
// 微信jssdk config校验
export const wxConfig = async () => {
  if (wxConfidReady) return
  addLoading()
  const { msg: { wxConf } } = await axios.post('https://xxx.com/conf')
  wxConf.openTagList = ['wx-open-launch-app']
  console.log('wxConf:', wxConf)
  // wxConf.debug = true
  wxConf.timestamp = wxConf.timeStamp
  delete wxConf.timeStamp
  window.wx.config(wxConf)
  window.wx.ready(function () {
    domReadyTime = new Date().getTime()
    console.log('wx.ready时间', (new Date().getTime() - asyncStartTime) + 'ms')
    wxConfidReady = true
    // removeLoading()
  })
  window.wx.error(function (res) {
    console.log('==wx.error==', res)
    wxConfidReady = true
    // removeLoading()
  })
  setTimeout(() => {
    removeLoading()
  }, 10000)
}
export const createOpenApp = (root, schema) => {
  root.setAttribute('launch-box-created', true)
  const box = document.createElement('div')
  // 创建开放标签
  const clickDom = document.createElement('wx-open-launch-app')
  box.appendChild(clickDom)
  // 设置Shadow host节点css样式，是其可以完全覆盖在目标元素上。注意设置overflow:hidden;属性
  box.style.width = root.clientWidth + 'px'
  box.style.height = root.clientHeight + 'px'
  box.style.position = 'absolute'
  box.style.top = '0'
  box.style.left = '0'
  box.style.zIndex = '999'
  box.style.overflow = 'hidden'
  box.setAttribute('class', 'launch-app-box')
  // 模板内容样式特殊处理为width: 1000px; height: 1000px;目的是能完全覆盖
  clickDom.innerHTML =
    `<template>
      <style>
        .btn {
          width: 1000px;
          height: 1000px;
        }
      </style>
      <div class="btn"><div>
    </template>`
  clickDom.setAttribute('extinfo', schema)
  clickDom.setAttribute('appid', '********')
  if (window.getComputedStyle(root, null).position === 'static') {
    // 为目标元素设置position属性
    root.style.position = 'relative'
  }
  root.appendChild(box)
  clickDom.addEventListener('ready', function () {
    console.log('dom ready', new Date().getTime() - domReadyTime)
    removeLoading() // 移除loading遮罩
  })
  clickDom.addEventListener('click', function (e) {
    e.preventDefault()
  })
  clickDom.addEventListener('launch', function (e) {
    console.log('success', e)
  })
  clickDom.addEventListener('error', function (e) {
    console.log('fail', e.detail)
  })
}
export const domTraverse = function (rootElement) {
  const startTime = new Date().getTime()
  // console.log('==domTraverse start==', startTime)
  let domList = []
  if (rootElement) {
    domList = rootElement.getElementsByClassName('root-wx-open-launch-app')
  } else {
    domList = document.getElementsByClassName('root-wx-open-launch-app')
  }
  let j = 0
  for (let i = 0; i < domList.length; i++) {
    const item = domList[i]
    const schema = item.getAttribute('schema')
    const launchCreated = item.getAttribute('launch-box-created')
    if (!launchCreated) {
      j++
      createOpenApp(item, schema)
    }
  }
  console.log('开放标签数量：', j)
  console.log('所有开放标签创建花费时间：', (new Date().getTime() - startTime) + 'ms')
}

/* 应对简单场景页面，直接调用该方法即可，
 * 由于是对dom进行操作，如果复杂异步渲染dom的场景可以酌情组合使用asyncWeiXinJS，wxConfig，domTraverse等方法
*/
export const createWXOpenTag = function (schema) {
  if (isWeixinFn() && (getPlatform() === 'android')) {
    domTraverse()
    asyncWeiXinJS(() => {
      wxConfig()
    })
  }
}

vue框架中使用演示

<template>
  <div class="app">
    <div class="root-wx-open-launch-app">点击热区</div>
  </div>
</template>
<script>
import { createWXOpenTag } from './util.js'
export default {
  mounted () {
    createWXOpenTag()
  }
}
</script>

微信开放标签调试

调试分为两种：微信开发者工具、真机调试

3.1用微信开发者工具调试：需要添加公众号开发者权限

注意：微信开发者工具无法模拟唤起应用弹框，只能看dom元素中开放标签是否添加成功。

image.png

3.2测试环境下真机调试

本地电脑开代理，host切为测试环境（如：Charles）。检查电脑所有vpn并确保关闭，安卓手机配置并连接代理。微信中打开测试页面地址即可。

注意：由于微信公众号安全域名限制，本地服务手机无法弹起跳转弹框，如本地服务 localhost:8080/xxx是无法正常弹起跳转应用弹框的）

image.png

备注：跳转应用的弹框只能是线上环境或者测试环境下真机。

异常场景

如果真机调试出现下图报错: [WXTAG][JSCORE]。

image.png
出现原因：手机链接代理、测试环境下无法加载微信js脚本导致

优化

开放标签数量增多，导致开放标签初始化时间增长。

开放标签新增ready事件。标签初始化完毕，可以进行点击操作。

减少首屏创建开放标签数量，非首屏延迟异步创建开放标签，可以缓解等待ready事件触发时间过久。

微信开放标签唤起App
目录相关配置说明文档先了解一下webcomponent 我们自己实现一个“微信开放标签” 项目中引入开放标签的...
解决6.5.16及以上版本微信内部M页不能唤起APP
背景最近微信唤起app的数据急速下降，产品同学告诉我们大事来了，微信不能唤起Android的App了！！微信语...
微信内H5网页打开app
1、微信开放标签 wx-open-launch-app 官方文档：https://developers.weixi...
微信内H5页面唤起小程序
微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或...
微信开放标签
微信开放标签[https://developers.weixin.qq.com/doc/offiaccount/O...
微信开放标签样式rem单位适配
2020年5月左右，微信公众后推出了开放标签，可以让微信浏览器内的网页跳转到在开放平台登记过的app。跳转方法入如...
Android端微信开放标签打开app
文档： https://developers.weixin.qq.com/doc/oplatform/Mobile...
iOS如何调用微信支付
微信APP支付 1.到微信开放平台注册并开通开发者资质微信开放平台 2.提交APP应用进行审核，只有审核通过...
iOS微信支付步骤以及出现的问题总结（一）
一、微信支付的步骤： 1.在微信开放平台注册。微信开放平台 2.创建一个App应用。（需要填写App的资料，审核一...
对微信支付和支付宝支付SDK的封装
本文首发地址微信支付有提供的pod库提供使用，但是只提供了唤起微信app进行支付。但是想要在唤起的时候获取支付结果...