H5跳转App、跳转小程序

就在昨天，微信发布了一个功能，这个需求终于可以满足大家了。

定义: 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验

开放标签

<wx-open-launch-weapp>打开小程序
用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序
<wx-open-launch-app>打开app

接入要求

主体要求: 仅开放给已认证的服务号
系统要求：微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

接入方法

打开小程序使用步骤与微信JS-SDK类似，需要绑定安全域名、引入JS文件等步骤
打开app需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App
在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

小程序跳转按钮：`<wx-open-launch-weapp>`

用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。

<wx-open-launch-weappid="launch-btn"// 小程序idusername="gh_xxxxxxxx"// 小程序路径path="/a/b/c?d=1&e=2#fg"
><template><style>.btn { padding: 12px }</style><button class="btn">打开小程序<button></template>
</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>
App跳转按钮：

App跳转按钮：`<wx-open-launch-app>`

用于页面中提供一个可跳转指定小程序的按钮。此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。

<wx-open-launch-appid="launch-btn"// 移动应用appidappid="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>

希望微信团队再接再厉

H5跳转App、跳转小程序相关推荐

h5网页url跳转微信链接，小程序外链跳转任意站技术大揭秘
见多识广的你,想必也领略过"跳一跳"小游戏的魅力! 但你未必知道,小程序也能"跳"上那么一"跳"! 怎么个"跳"法? 来 ...
微信支付，JSAPI支付，APP支付，H5支付，Native支付，小程序支付功能详情以及回调处理
一.支付相关文档地址支付wiki:https://pay.weixin.qq.com/wiki/doc/apiv3/index.shtml 支付api: https://pay.weixin.qq. ...
微信小程序实现跳转到另外一个小程序的方法
微信小程序实现跳转到另外一个小程序的方法 1,首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn "navigateToMiniProgramApp ...
跳转饿了么小程序、跳转美团小程序、获取小程序路径、小程序生成小程序码不能选择第三方小程序、领红包功能开发（附源码）
先上成果和功能我做的是随机推荐美食的小程序,食物数据是存库的而且后续会开放给用户新增食物的权限,然后有些小功能就是跳转到饿了么小程序和美团小程序领外卖红包,技术使用uniapp,开发工具是HBuil ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
小程序跳转到另一个小程序很慢很卡
小程序跳转另一个小程序使用的方法有wx.navigateToMiniProgram 和 navigator 标签, 如果有碰到跳转到另一个小程序很慢的开发者,然后又没找到问题,看看自己小程序页面上的广 ...
APP、微信小程序、网页H5
APP.微信小程序.网页H5之间区别 1.APP 使用条件:苹果要去app store搜索下载,安卓需要在各应用商店搜素下载更新条件:如需要修改内容,需要通过第三方审核应用场景:适用于有较大流量, ...
京东联盟-怎么跳转到京东购物小程序领券下单
我们在自己的小程序里接入京东联盟,实际上模式是用户点击商品详情页下单,然后跳转到"京东购物"小程序领券下单(像下面那样),但是这个接口是需要申请的,且自有小程序日均访问人数> ...
uniapp一套代码开发app和微信小程序
为什么选择uniapp开发? 为什么选择uniapp进行开发? 1.uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的 ...

H5跳转App、跳转小程序

开放标签

接入要求

接入方法

小程序跳转按钮：`<wx-open-launch-weapp>`

App跳转按钮：`<wx-open-launch-app>`

H5跳转App、跳转小程序相关推荐

最新文章

热门文章

H5跳转App、跳转小程序

开放标签

接入要求

接入方法

小程序跳转按钮：<wx-open-launch-weapp>

App跳转按钮：<wx-open-launch-app>

H5跳转App、跳转小程序相关推荐

最新文章

热门文章

小程序跳转按钮：`<wx-open-launch-weapp>`

App跳转按钮：`<wx-open-launch-app>`