微信回归-开放标签(wx-open-launch-app)

在移动互联网时代，“用户增长”已经成为每个企业的重点话题。推广和创新是大多数企业的核心。为了将更多的用户引导到客户端，主要有哪些渠道？又是通过什么方式返回给客户端的？从系统上区分：Android、iOS。从方法上区分：网页（拼多多、私服、掘金、知乎大部分公司都用这种方法）、密码（支付宝、淘宝、拼多多主要网页被屏蔽）、图片&视频（抖音过年发现，可以把图片保存到本地再返回）从环境和渠道来区分：微信（重要渠道）、QQ、各厂商浏览器（短信.vivo、oppo、qq浏览器、华为、小米）环境复杂，多变。简单说一下我们之前的逻辑：Android和微信中的方案一：应用宝，变相引入新的应用宝。方案二：打开右上角的浏览器，然后使用scheme。解决方案三：目前被微信屏蔽的下载头，变相成为了QQ浏览器的新版本。方案四：公网代理到本机。在QQ其他环境下使用URLSchemes需要先设置一堆权限，一般都是iframe触发的。Intent在手机自带的应用市场跳转到iOS微信中的通用链接。iOS9+系统右上角打开浏览器截取param和reflow。想吐槽下Safari在其他环境下使用schemeQQ的逻辑。问题是它需要不时更改。一度。用不了多久就稳定了。突然，5月1日前一天，微信开放平台多了一个功能，微信中网页跳转到APP的功能，然后我们就接入了。打开标签微信版本要求：7.0.12及以上。系统版本要求为：iOS10.3（感觉13以下体验很差，我们人为处理）及以上，Android5.0及以上。开放标签说明文档接入开放标签类似于微信JS-SDK，同样需要绑定安全域名（登录微信公众平台进入“公众号设置”的“功能设置”填写“JS接口安全域名”）、导入JS文件（https://res.wx.qq.com/open/js...）等步骤。注入配置信息，通过openTagList字段申请需要的开放标签。wx.config({debug:true,//开启debug模式，所有API调用的返回值都会显示在客户端alert上，如果想查看传入的参数，可以在PC端打开，并且会通过日志打印出参数信息,appId:'',//required,公众号的唯一标识timestamp:,//required,生成签名的时间戳nonceStr:'',//required,生成的签名Randomstringsignature:'',//必填，签名jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'],//必填，需要使用的JS接口列表openTagList:['wx-open-launch-app']//可选，需要使用的打开标签列表，如['wx-open-launch-app']});添加到DOM在vue中使用模板冲突使用而不是打开客户端指定页面剪贴板，因为剪贴板是一个老逻辑，所以希望第一版可以尽快使用（结果openSDK在我连接小程序的时候就已经搞定了，可惜了我的辛苦）。这里我使用breakdown来实现。突破实现https://www.lilnong.top/static/html/touchstart-click.html因为渲染慢而且异步，所以我实际使用的时候换了另外一种方案，在外面渲染，然后绝对定位。然后是剪贴板复制的问题。需要在touchendhttps://www.lilnong.top/static/html/copy-execCommand.html使用DOM上的extinfo属性进行处理来实现。格式自定义，由重定向的App解析处理。对应iOS微信openSDK中的messageExt字段（LaunchFromWXReq.message.messageExt），或对应Android微信openSDK中的messageExt字段（ShowMessageFromWX.Req.message.messageExt），详见文档《App获取开放标签<wx-open-launch-app>中的extinfo数据》。其他方式解释URLSchemevar_iframe=document.createElement('iframe');_iframe.src=scheme;_iframe.style.display='none';文档.body.appendChild(_iframe);window.setTimeout(function(){document.body.removeChild(_iframe);if((+newDate())-openTime>2500){window.location.href=url;}},2000);但是也有用户没有安装App的情况，所以使用iframe比较常见。当用户还没有安装时，通过setTimeout跳转到下载页面。打开标签功能无法接收事件冒泡和事件捕获。异步渲染本质上可以理解为webComponent。模板理解为插槽，可以通过内容获取。在控制台打开ShadowDOM，还可以看到微信公众号：前端linong相关资料https://github.com/jawidx/web...https://www.jianshu.com/p/136。..