现在有一个需求,App分享出来的页面需要在页面底部加一个浮窗 “APP查看”
就跟某乎一样
并且能打开"APP相应的页面"
先查一下资料
1、iOS的APP是可以通过
"universal link"(通用链接) 这个东西打开的
你的APP只要配过微信分享,微博分享 那你的APP应该就集成好了通用链接的
所以在微信里面iOS是可以打开APP的,稳得很
直接
var url=通用链接地址;
var path=跳转参数
location.href = url+path;
h5端已经完事
APP只需要对 启动的参数进行处理就可以
plus.runtime.launcher
plus.runtime.arguments
安卓其实应该是能 URL Schemes 达到这样的跳转,但是wx这个憨批,把URL Schemes过滤掉了,所以安卓并不能通过这种方式跳转,只能另找它法了。
微信h5是提供一种标签可以打开你们的app的 但是你得先去微信开放平台申请账号,再申请应用
看文档吧
这里说几个重要的步骤,千万别错了
1、开放平台一定要是公众账号&&移动应用
2、代码中的appid是移动应用中的appid,不是公众账号的appid
3、一定要将其关联在一起
4、代码中 微信sdk 初始化的时候有个参数 "openTagList" 一定要记得带上,因为很多人写的时候都是从微信js sdk过来的 而这里的只有jsApiList....
5、有点瑕疵就是 按照文档上说 是能监听到 “launch” “error” 事件的,但是我怎么监听得不太对劲
6、uni-app打的包需要是正式包,不能是调试包,至于正式包你怎么看启动日志我这边有个方法
可以参考下
在App.vue 的 onShow生命周期里面
onShow: function () {
console.log("App Show", is_one_modal);
// #ifdef H5
basics.h5_wx_share({});
// #endif
//#ifdef APP-PLUS
//由于线上不太好调试 把数据加到本地存储中
//
// 跳转页面(需要在setTimeout中,否则IOS会出现获取的plus.runtime.arguments是上一个赋值给plus.runtime.arguments的值,而不是当前传入的plus.runtime.arguments)
setTimeout(function () {
let temp_launcher = plus.runtime.launcher;
let temp_arguments = plus.runtime.arguments;
plus.runtime.arguments = null;
basics.sys_log("temp_launcher:" + temp_launcher);//加个记日志的方法
//其实就是把个数据存到本地存储里面 然后我们自己在开个后门啥的 通过后面进到一个 调试页面,这个调试页面在将 本地存储里面的日子都打印出来就行了
//这里的temp_launcher 就是 你标签中的 “extinfo” 你想怎么解析 怎么定义都行
//ios 安卓都可以通过这样打开我们的app
try {
if (temp_arguments) {
//basics.sys_log("存在temp_arguments", 1);
//解析 temp_arguments 该干嘛干嘛
} else {
}
} catch (e) {
basics.sys_log("temp_arguments catch " + e, 1);
}
}, 100)
// #endif
}
js代码如下
//#ifdef H5
import wx_sdk from '@/util/wxsdk.js';
var wx_sdk_is_init = !1;
//#endif
//一级基础方法 对象
export default {
//微信内服务号 打开app
h5_wx_open_app(extinfo) {
// #ifdef H5
let append_fun = function (extinfo) {
//return;
var element = document.createElement("div");
element.id = "float_app_open";
element.className = "i-font float-app-open";
var element1 = document.createElement("span");
element1.id = "app_open_close";
element1.innerHTML = "";
element.innerHTML = '<wx-open-launch-app id="launch-btn" extinfo="' + extinfo + '" appid="你的移动应用id" style="position: relative; left: 50%; margin-left: -60px; background-color: #f5222d; display: block; text-align: center; border: 0; text-shadow: 0 2px 8px 0px #f5222d; border-radius: 50px; text-align: center; width: 120px; height: 40px; line-height: 40px; ">'
+ '<script type="text/wxtag-template"><style>.btn-open-weapp { display:block; text-align: center; color: #fff; height: 40px; line-height: 40px;}</style><div class="btn-open-weapp">APP查看</button>'
+ '<//script></wx-open-launch-app>';
element.appendChild(element1);
document.body.appendChild(element);//添加到body 子节点下
try {
var btn = document.getElementById("launch-btn");
if (btn) {
btn.addEventListener('click', e => {
console.log('检测用户点击打开APP按钮', e);
});
console.log("找到launch-btn当前的按钮了")
btn.addEventListener('launch', e => {
console.log('打开app结果', e);
if (e.errMsg.indexOf("fail") != -1) {
this.jump_url(config.app_yyb_url, 3);//打开失败
}
});
btn.addEventListener('error', e => {
//console.error('fail', e.detail);
this.jump_url(config.app_yyb_url, 3);
// 唤醒失败的情况下,可用于降级处理比如在此处跳转到应用宝
});
}
} catch (e) {
}
try {
var close = document.getElementById("app_open_close");
if (close) {
console.log("找到app_open_close当前的按钮了")
close.addEventListener('click', e => {
document.getElementById("float_app_open").remove();
});
}
} catch (e) {
}
}
return new Promise((success, error) => {
let ua = navigator.userAgent.toLowerCase();
let is_wx = ua.indexOf('micromessenger') != -1;
if (is_wx) {
try {
if (wx_sdk_is_init) {
append_fun(extinfo);
success({ status: 0, message: '成功' });
} else {
api_data.weishare({
url: location.origin + location.pathname + location.search
}).then(res => {
wx_sdk.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature,// 必填,签名
openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'],//注意这个参数
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
"onMenuShareQQ",
'onMenuShareQZone'
]
});
}).catch(err => {
success({ status: -1, message: '失败' });
});
wx_sdk.ready(function () { //需在用户可能点击分享按钮前就先调用
wx_sdk_is_init = !0;
append_fun(extinfo);
success({ status: 0, message: '成功' });
});
wx_sdk.error(function () {
success({ status: -1, message: '失败' });
});
}
} catch (e) {
success({ status: -1, message: '失败' });
}
} else {
success({ status: -1, message: '失败' });
//append_fun(extinfo);
}
}).catch((e) => {
console.error("h5_wx_open_app catch ", e);
})
// #endif
},
}
参照的博客
https://ask.dcloud.net.cn/article/37584
https://ask.dcloud.net.cn/question/98097
https://blog.csdn.net/hahahhahahahha123456/article/details/109463412
https://blog.csdn.net/jane900/article/details/107410321