微信环境下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']
- 项目中引入开放标签代码
样式使用内联样式
<wx-open-launch-app @error="handleErrorFn" @launch="handleLaunchFn" id="launch-btn" appid="wx4393ffb3b9fd4f91" :extinfo="extinfo">
<script type="text/wxtag-template">
<style>.btn { display: flex;align-items: center; }</style>
<div class="btn" style="display: inline-block;min-width: 111px;height: 32px;background: linear-gradient(180deg, #CDF27B 0%, #B0CF6A 100%);padding: 0 18px;box-sizing: border-box;border-radius: 16px;line-height: 32px;font-size: 13px;font-weight: normal;color: #FFFFFF;letter-spacing: 1px;text-align: center;margin: 0 auto;">{{ btnText }}</div>
</script>
</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']
调试方案
- 线上调试，把代码发布到设置的js域名下
- 手机连接本地调试
- 本地启动服务，获取本地IP
- hosts 配置
本地IP js域名 如
135.22.45.1 abc.test.com
- 本地测试 网页中abc.test.com代替135.22.45.1
- 使用代理工具 如charles 连接手机
在微信中打开本地服务地址
如需extinfo，需要APP配合开发
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/APP_GET_EXTINF.html
兼容问题
-
使用html2canvas 时报错，会影响生成海报
image.png
没弄明白为什么，最后是这样解决的
设置一个isMakingPoster变量 控制组件显示、隐藏
生成海报时隐藏
海报生成完成后显示
// OpenApp 为wx-open-launch-app组件
<div class="flex-center" v-if="!isMakingPoster">
<OpenApp :btnText="'前往APP'" />
</div>
