主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP
- 使用说明
- 关联说明
- 设置入口
- 绑定域名和移动应用
- 接入微信开放标签
- 绑定域名
- 引入JS文件
- 通过config接口注入权限验证配置并申请所需开放标签
- 通过ready接口处理成功验证
- 通过error接口处理失败验证
代码示例 :
在H5页面中添加点击跳转的元素
<wx-open-launch-app id="launch-btn" appid="appid" extinfo="goods/1234">
//appid是在微信中绑定的APPId , extinfo为打开APP时传给APP的值,比如我传的是商品这个单词和商品id,用"/"隔开方便截取
<template>
<p style="color:#fff;background-color: #0095FF;padding:5px 15px;">
APP内打开
</p>
</template>
</wx-open-launch-app
在JS中
<script>
var btn = document.getElementById(\'launch-btn\');
btn.addEventListener(\'launch\', function (e) {
console.log(\'success\');
});
btn.addEventListener(\'error\', function (e) {
//如果打开失败可以跳转到提醒下载APP的页面(展示二维码,长按识别公众号下载)
console.log(\'fail\', e.detail);
});
</script>
注意:
如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>进行代替,来包裹插槽模版和样式。另外,对于具名插槽还需要通过slot属性声明插槽名称,下文标签插槽中的default插槽为默认插槽,可不声明插槽名称
在uniapp的app.vue的onLaunch里写
this.checkArguments();
plus.globalEvent.addEventListener(\'newintent\', e => {
this.checkArguments(); // 检测启动参数
});
在app.vue的methods中添加方法
checkArguments() {
console.log(\'runtime.launcher: \' + plus.runtime.launcher);
// 判断APP打开方式 miniProgram为微信小程序打开
if (plus.runtime.launcher == \'miniProgram\') {
// plus.runtime.argumrnts为打开时APP传的值(<wx-open-launch-app>中的extinfo),可以传字符串通过符号截取判断类型
console.log(plus.runtime.arguments);
if (plus.runtime.arguments) {
//我截取了字符串,判断是商品并且根据ID跳转到商品详情页
var str = plus.runtime.arguments;
var arr = str.split(\'/\');
var id = arr[1];
if (arr[0] == \'goods\') {
//跳转到商品详情页,注意pages前面的"/"不要忘记,否则会造成无法跳转。使用navigateTo跳转到页面会有返回按钮,点击返回到首页
uni.navigateTo({
url: \'/pages/goods/goods?id=\' + id
});
}
}
}
}