H5微信公众号拉起APP端软件

概述

• H5公众号拉起APP

注意事项

• 要在正式环境，也就是管理公众号配置的那个域名下才有效，要不然出不来
• 微信sdk要1.6.0版本以上
• 微信浏览器版本要7.0.12版本以上
• 微信开发工具（版本：1.05.210390），即使是正式环境，都是能出现这个标签，但是不能正确渲染，所以调试起来非常麻烦，在手机端调试

main.js文件

• 在main.js 文件添加Vue.config.ignoredElements = ['wx-open-launch-app']这句代码，要不然vue会不识别这个标签，会有个警告，可能会影响显示

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

config的配置

• 要配置openTagList: ['wx-open-launch-app']
• 没有配置不知道会出现什么问题，我乖乖按照微信要求配置了

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

封装的组件

• 由于样式不好改，所以改成了弹框的形式

使用组件

图片

• 因为涉及公司隐私，所以有部分图片我不方便放出来

• 点击微信开放标签，会有个微信的弹框，询问你是否打开APP

  
  
  18d3b4263a89174ab898b0e99098474.jpg

完成

• 目前功能是已经做出来了，拉起对应的苹果和安卓APP，如果没有APP的就跳应用市场帮用户下载

有问题可以咨询谈论，互相学习