微信内H5网页打开app

1、微信开放标签

wx-open-launch-app

官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22

Vue中使用：
https://blog.csdn.net/qq_35537652/article/details/110368520?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
https://blog.csdn.net/jane900/article/details/107410321
用于页面中提供一个可跳转指定App的按钮。

开放对象

此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。在使用该标签之前，首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》。

属性

名称	必填	默认值	备注
appid	是		所需跳转的AppID
extinfo	否		跳转所需额外信息

备注：对于extinfo属性，用于携带额外信息，格式自定义，由跳转的App自⾏解析处理。对应iOS微信openSDK中的messageExt字段（LaunchFromWXReq.message.messageExt），或对应Android微信openSDK中的messageExt字段（ShowMessageFromWX.Req.message.messageExt），详细参见文档《App获取开放标签<wx-open-launch-app>中的extinfo数据》。

插槽

名称	必填	默认值	备注
default	是		跳转按钮模版及样式

事件

名称	冒泡	返回值	备注
ready	否		标签初始化完毕，可以进行点击操作
launch	否		用户点击跳转按钮并对确认弹窗进行操作后触发
error	否	{ errMsg: string }	用户点击跳转按钮后出现错误

备注：error事件返回值errMsg说明如下。

errMsg	说明
"launch:fail"	调⽤失败，或安卓上该应用未安装，或iOS上用户在弹窗上点击确认但该应⽤未安装
"launch:fail_check fail"	校验App跳转权限失败，请确认是否正确绑定AppID

用例

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

2、openinstall一键跳转

<!-- 以下为openinstall集成代码，建议在html文档中尽量靠前放置，加快初始化过程 -->
<!-- 强烈建议直接引用下面的cdn加速链接，以得到最及时的更新，我们将持续跟踪各种主流浏览器的变化，提供最好的服务；不推荐将此js文件下载到自己的服务器-->
<script type="text/javascript" charset="UTF-8" src="https://web.cdn.openinstall.io/openinstall.js"></script>
<script type="text/javascript">
    //OpenInstall初始化时将与openinstall服务器交互，应尽可能早的调用
    /*web页面向app传递的json数据(json string/js Object)，应用被拉起或是首次安装时，通过相应的android/ios api可以获取此数据*/
    var data = OpenInstall.parseUrlParams();///openinstall.js中提供的工具函数，解析url中的所有查询参数
    new OpenInstall({
        /*appKey必选参数，openinstall平台为每个应用分配的ID*/
        appKey : "s1uswe",
        /*自定义遮罩的html*/
        //mask:function(){
        //  return "<div id='_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"
        //},
        /*OpenInstall初始化完成的回调函数，可选*/
        onready : function() {
            /*在app已安装的情况尝试拉起app*/
            this.schemeWakeup();         
            /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/
            var m = this, button = document.getElementById("downloadButton");
            button.onclick = function() {
                m.wakeupOrInstall();
                return false;
            }
        }
    }, data);
</script>