图文分享到微信 并在浏览器唤醒app跳转到指定页面
1.在app里，给要分享的按钮添加点击事件
uni.share({
provider: "weixin",
scene: "WXSceneSession",//选择分享到微信聊天界面
type: 0,
href: 'http://115.29.240.152:8080/share.html?oid=' + this.paymentInfo.id+'&pid='+ this.paymentInfo.goodsId + '&num=' + this.choiceNum,//分享链接，是一个h5页面，用ftp上传到服务器 生成访问链接
title: '砍价:' + this.paymentInfo.goodsName + '价格：' + this.paymentInfo.payAmount,
summary: "妙街 ~ 智慧云商引领者，全新综合商业生态平台 美好生活，尽在妙街",
imageUrl: pic,
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
2.写一个单独的h5页面 作为在微信中点击分享链接跳转到浏览器打开的页面
h5页面用到的技术点：
1.自适应布局
2.ajsx
3.es6字符串模板
4.判断浏览器类型
5.解析路径中的参数
6.跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>妙街-全民砍价</title>
</head>
<style>
html {
background-color: aliceblue;
}
.father {
width: 100%;
height: 100%;
}
.img {
width: 100%;
}
.goodName {
margin: 3% 0;
}
.goodInfo {
display: flex;
justify-content: space-around;
align-items: center;
color: #888;
font-size: 0.875em;
text-align: center;
}
.price2 {
text-decoration: line-through;
}
.price3 {
font-size: 1.3em;
color: red;
}
.user {
display: flex;
justify-content: center;
width: 90%;
margin: 5% auto;
padding: 2%;
border: 1px soliid #FF0000;
background-color: #fff;
border-radius: 1em;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5)
}
.img2 {
width: 38%;
height: 7em;
margin-right: 2%;
}
.user_right {
width: 60%;
}
.jindu {
width: 100%;
background-color: #ccc;
height: 5px;
border-radius: 10upx;
margin: 2% auto;
}
.img3 {
width: 20%;
height: 20%;
border-radius: 50%;
}
.userinfo {
display: flex;
justify-content: space-around;
align-items: center;
margin: 3% auto;
}
.userName {
font-size: 1.2em;
font-weight: 700;
}
.faqi {
width: 25%;
border: 1px solid #AE1D24;
border-radius: 0 20% 20% 20%;
padding: 2%;
color: #AE1D24;
font-size: 0.6em;
text-align: center;
}
.yuji {
color: red;
border: 1px solid red;
margin-top: 4%;
font-size: 0.8em;
text-align: center;
}
.btn {
width: 90%;
margin: 2% auto;
text-align: center;
background-color: #AE1D24;
font-size: 1.5em;
box-sizing: border-box;
padding: 2%;
color: #FFFFFF;
border-radius: 9em;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// http://115.29.240.152:8083/api/single/pms/goods/detail 传参 商品id
$(function() {
//接收url中传递的参数
function getString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
let jiedao_oid = getString("oid"); //订单id
let jiedao_pid = getString("pid"); //商品id
let jiedao_num = getString("num"); //砍价人数
let goodsinfo = {};
console.log('接收到的参数', jiedao_oid, jiedao_pid, jiedao_num)
$.ajax({
type: "GET",
url: 'http://192.168.3.18:8083/api/single/pms/goods...',
data: {
id: 501
},
dataType: "json", //服务器返回的数据类型
success: function(data) {
console.log('123', data.data.goods.goods)
goodsinfo = data.data.goods.goods;
let str = `
<img src="` + goodsinfo.albumPics +
`" class="img" />
<div class="goodName" id="goodName">` + goodsinfo.name +
`</div>
<div class="goodInfo">
<div class="price">优享价：￥` + goodsinfo.price +
`</div>
<div class="price2">市场价：￥` + goodsinfo.originalPrice +
`</div>
<div>可砍价：￥<span class="price3">` + goodsinfo.price +
`</span></div>
</div>
<div class="user">
<img src="` + goodsinfo.albumPics +
`"
class="img2">
<div class="user_right">
<div>已有3人砍价，仅差3人</div>
<div class="userinfo">
<img src="./avatar.jpg" class="img3">
<div class="userName">陶礼俊</div>
<div class="faqi">发起人</div>
</div>
<div class="yuji">
预计您可获得帮忙奖4元
</div>
</div>
</div>
`;
$('#father').append(str);
},
error: function() {
console.log("false");
}
});
// 检测是否在微信打开
let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
alert('请点击右上角，选择在浏览器打开！！！')
return
} else {
}
$("#lijiBtn").click(function() {
// navigator.userAgent.indexOf判断浏览器类型
let u = navigator.userAgent;
let d0 = new Date();
let t0 = d0.getTime();
if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
//直接唤醒妙街
window.location.href =
"miaojie://pages/bargain/help?type=1&oid=" + jiedao_oid + '&pid=' + jiedao_pid;
// 没有安装妙街app 在进入h5页面两秒后会显示下载链接。 此处有bug：如果用户下载了妙街 提示跳转时用户两秒内没有点击跳转，也会弹出下载妙街 应该加个return?
let delay = setInterval(function() {
let d = new Date();
let t1 = d.getTime();
if (t1 - t0 < 3000 && t1 - t0 > 2000) {
//下载妙街
window.location.href =
"https://www.appstore-cjq.com/down?pckId=0cc124362346488598b2f00edd240375";
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 3000);
} else if (u.indexOf("iPhone") > -1) {
window.location.href =
"miaojie://pages/bargain/help?type=1&oid=" + jiedao_oid + '&pid=' + jiedao_pid;
let delay = setInterval(function() {
let d = new Date();
let t1 = d.getTime();
if (t1 - t0 < 3000 && t1 - t0 > 2000) {
window.location.href =
"https://www.appstore-cjq.com/down?pckId=0cc124362346488598b2f00edd240375";
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 3000);
}
});
//这个函数不知道什么作用 查了iframe的用法。
function openApp(src) {
let ifr = document.createElement("iframe");
ifr.src = src;
ifr.style.display = "none";
document.body.appendChild(ifr);
window.setTimeout(function() {
document.body.removeChild(ifr);
}, 2000);
}
});
</script>
<body>
<div class="father" id="father">
</div>
<div class="btn" id="lijiBtn">
帮他砍价
</div>
</body>
</html>
4，下载链接是安装包上传至分发平台自动生成的链接。
5，配置h5页面唤醒app的唤醒链接
在项目manifest.json文件的源码视图中添加以下配置：
"schemes" : [ "miaojie" ],
"permissionPhoneState" : {
"request" : "always",
"prompt" : "为保证您正常、安全地使用，需要获取设备识别码（部分手机提示为获取手机号码）使用权限，请允许。"
}
唤醒链接： miaojie://pages/bargain/help pages/bargain/help为项目中的路径
6.在项目中的app.vue文件中添加检测启动 截取路径重传入参数 跳转到指定页面
// 检测启动
checkArguments() {
/// http://www.html5plus.org/doc/zh_cn/runtime.html
var launcher = plus.runtime.launcher;
// 得到启动方式
// 处理打开的参数
try {
// 使用API获取打开app的参数： plus.runtime.arguments
// 然后在解析参数 根据解析后的参数跳转到对应的URL
var args = plus.runtime.arguments;
obj = this.getURL(args);//obj 在全局定义 在onhide函数中清除，下一次唤醒时重新赋值
console.log('检测启动type', obj.type)
// 跳转得分享得商品得抢购页面
switch (obj.type) {
case "1": // 全民砍价
uni.navigateTo({
url: "/pages/bargain/help?oid=" + obj.oid + "&pid=" + obj.pid
})
break;
// case "4": // higou
// uni.navigateTo({
// url: "/pages/fatuanDetails/fatuanDetails?id=" + obj.id + "&shareData=" + 1
// })
// break;
}
} catch (e) {
console.log('解析参数 页面跳转失败' + e);
}
},
至此 结束！！
2442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
