微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置

一、微信分享

参看：微信分享：后端参数获取PHP实现

二、浏览器H5跳转到APP

user-agent.js

/**
* 判断设备类型
*/

function isClient(clientName) {
    return (
        window.navigator.userAgent
            .toLowerCase()
            .indexOf(clientName.toLowerCase()) > -1
    );
}

function isiPhone() {
    return isClient("iPhone");
}

function isAndroid() {
    return isClient("Android");
}

function isWeixin() {
    return isClient("MicroMessenger");
}

 
// 安卓和ios的跳转路径和下载地址
const configs = {
    Android: {
        scheme: "AndroidScheme://path",
        download: "https://www.demo.com/app-release.apk",
    },

    iPhone: {
        scheme: "iOSScheme://path",
        download: "https://itunes.apple.com/cn/app/app-id",
    },
}

// 通过环境判断获取配置

window.location.href = config.scheme

let downloader = window.setTimeout(() => {
    // 2s超时后跳转到app下载
    window.location.href = config.download;
}, 2500);

document.addEventListener(
    "visibilitychange webkitvisibilitychange",
    function () {
        // 如果页面隐藏，推测打开scheme成功，清除下载任务
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    }
);

window.addEventListener("pagehide", function () {
    clearTimeout(downloader);
});

三、微信H5跳转到APP

接口代码配置并不复杂，最麻烦的是准备账号

一、条件说明

微信内访问网页时跳转到 APP条件：

1. 服务号已认证
2. 开放平台账号已认证
3. 服务号与开放平台账号同主体

翻译一下就是：

1. 微信公众平台 注册一个【服务号】并微信认证（￥300）
2. 微信开放平台注册一个账号，并完成开发者资质认证（￥300）
3. 最关键的是需要【服务号】和【开放平台账号】认证主体一致！不然前面的钱就打水漂了

二、文档

官方文档很详细，这里不做赘述

1. 微信内网页跳转APP功能
2. 微信开放标签说明文档
3. App获取开放标签中的extinfo数据

三、重要的设置

1、微信公众平台设置IP白名单

该IP地址获取access_token

开发->基本配置->公众号开发信息->IP白名单

2、微信公众平台绑定安全域名

设置->公众号设置->功能设置->JS接口安全域名

3、微信开放平台绑定所需要跳转的App

这里也需要设置安全域名

管理中心 -> 公众帐号 -> 接口信息 -> 网页跳转移动应用 -> 关联设置中绑定所需要跳转的App

四、注意点

1、Android和iOS需要做好设置，才能拉起成功

2、几个重要参数的获取

1. 开发者ID(AppID) 来自 微信公众平台
2. 开发者密码(AppSecret) 来自 微信公众平台
3. 移动应用Appid 来自微信开放平台

配置示例：

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

<wx-open-launch-app
  id="launch-btn"
  appid="<移动应用Appid>"
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

五、样式设置

首先明确几点：

1. wx-open-launch-app标签外部样式和内部样式是隔离的
2. wx-open-launch-app这个标签可以加样式style

所以，如果在页面中使用这个拉起标签，这个地方的样式和周围的不一样。

设置样式：

1. 外层span标签设置相对定位;
2. wx-open-launch-app设置绝对定位，里边放一个空的元素，并设置高度和宽度，遮罩住底层标签;
3. 打开APP 处的span标签就可以使用外层样式了

<span style="position:relative;"><span>打开APP</span><wx-open-launch-app
    id="launch-btn"
    appid="APPID"
    extinfo='{"name": "Tom", "age": 18}'
    style="position:absolute;top:0;left:0;right:0;bottom:0;"
    >
     <template>
          <style>
            .wx-btn{
              width:100%%;
              height:20px;
            }
          </style>
          <div class="wx-btn"></div>
        </template>
</wx-open-launch-app></span>

参考
微信开放标签 wx-open-launch-app 样式设置技巧