微信内 H5 页面唤起小程序 &App

2022 年 7 月 15 日
本文字数：1275 字
阅读完需：约 4 分钟

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。此文档面向网页开发者，介绍微信开放标签如何使用及相关注意事项。需要注意的是，微信开放标签有最低的微信版本要求，以及最低的系统版本要求。微信版本要求为：7.0.12 及以上。系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上。

开放标签使用步骤

1.绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”, JS 接口安全域名对应 H5 页面域名地址

2.引入 JS 文件

在需要调用 JS 接口的页面引入如下 JS 文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持 https）

也支持 npm 包方式引入, 版本需==1.6.0==及以上

npm install weixin-js-sdk --save

复制代码

3.通过 config 接口注入权限验证配置并申请所需开放标签

与使用 JS-SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过 openTagList 字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次）。

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

复制代码

4.页面唤起小程序代码

<wx-open-launch-weapp    id="launch-btn"    username="gh_XXXXX"    weappid="wxd44d0XXX0f0dXXX"    path="/pages/page/page.html?id=aaa">    <script type="text/wxtag-template">        <!--html页面展示代码-->    </script></wx-open-launch-weapp>

复制代码

5.页面唤起 App 代码

    <wx-open-launch-app       @launch="launch"       @error="launchError"       id="launch-btn"       appid="应用APP的Appid"       extinfo="传递给APP的参数（可用于打开app的后续逻辑）"      >         <script type="text/wxtag-template">               <!--html页面展示代码-->        </script>    </wx-open-launch-app>

复制代码

注意点

1.此功能的开放对象

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

2.参数说明

username 所需跳转的小程序原始 id，即小程序对应的以 gh_开头的 id, 注意不是公众号的 id 对于 path 属性，所声明的页面路径必须添加.html 后缀，如 pages/home/index.html 如果跳转提示缺少 ID, 检查 username 对应原始 ID 是否正确

3. Vue 项目中会报错该标签不存在

在 main.js 文件中添加忽略代码忽略打开微信小程序的组件

Vue.config.ignoredElements = ['wx-open-launch-weapp']

复制代码

参考

开放标签说明文档

发布于: 刚刚阅读数: 4

南城FE

关注

还未添加个人签名 2019.02.12 加入

专注前端开发，分享前端知识

发布

暂无评论

创作场景

微信内 H5 页面唤起小程序 &App

开放标签使用步骤

1.绑定域名

2.引入 JS 文件

3.通过 config 接口注入权限验证配置并申请所需开放标签

注意点

1.此功能的开放对象

2.参数说明

3. Vue 项目中会报错该标签不存在

参考

南城FE

评论