2021微信网页跳转APP

一、跳转APP：wx-open-launch-app

用于页面中提供一个可跳转指定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"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</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>

 

二、跳转小程序：wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

 

开放对象

1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

 

错误提示

若跳转时出现以下页面，表示网页绑定的服务号或小程序无权限，请检查是否符合上述开放对象条件。 

 

属性

名称	必填	默认值	备注
username	是		所需跳转的小程序原始id，即小程序对应的以gh_开头的id
path	否		所需跳转的小程序内页面路径及参数

 

插槽

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

 

事件

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

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

errMsg	说明
"launch:fail"	跳转失败

 

用例

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<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>

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