微信开放标签wx-open-launch-app

微信环境下H5打开app

前期准备 参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22

• 注册同一主体下的公众账号和开放平台
• 开放平台绑定公众账号（设置js安全域名）
• 在开放平台创建移动应用（获取appid）
• 开放平台绑定的公众账号关联移动应用（绑定公众账号下的js域名，只能绑定一个，每月可修改3次）

前端开发（基于Vue）

• 引入微信weixin-js-sdk,并配置config (同微信分享配置，之前项目中有使用微信分享的可略过)

// 使用1.6.0版本 npm版本中去除"^"
npm install weixin-js-sdk

• config添加开放标签

openTagList: ['wx-open-launch-app']

• 项目中引入开放标签代码
  样式使用内联样式

    // 打开app失败，如未安装或代码错误，具体看返回。
    // 可在此处理未安装app的情况
    handleErrorFn(e){
      console.log('err', e)
    },
    // 打开app成功
    handleLaunchFn(e){
      console.log('success', e)
    }

调试会报如下错误

image.png

解决方法：mian.js中添加

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

调试方案

1. 线上调试，把代码发布到设置的js域名下
2. 手机连接本地调试

• 本地启动服务，获取本地IP
• hosts 配置
  本地IP js域名 如

135.22.45.1 abc.test.com

• 本地测试 网页中abc.test.com代替135.22.45.1

3. 使用代理工具 如charles 连接手机
   在微信中打开本地服务地址

如需extinfo，需要APP配合开发

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/APP_GET_EXTINF.html

兼容问题

1. 使用html2canvas 时报错，会影响生成海报

   
   
   image.png
   
   

   没弄明白为什么，最后是这样解决的
   设置一个isMakingPoster变量 控制组件显示、隐藏
   生成海报时隐藏
   海报生成完成后显示

// OpenApp 为wx-open-launch-app组件