接到一个需求,是通过小程序跳转jd app,我这里做的是通过h5作为中转跳转app,我感觉是更方便的,以下是简易的跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>接收参数示例</title>
</head>
<body>
<h1>接收到的参数</h1>
<p id="param1"></p>
<a href="" id="jd2" onclick="handleJdUrl">跳转1</a>
<a href="" id="jd4" onclick="TurnToJD">跳转2</a>
<script>
// 需要跳转的链接
// https://item.jd.com/100109471508.html
var url = window.location.href;
function handleJdUrl() {
let url = "https://item.jd.com/100109471508.html";
var openUrl = `openApp.jdMobile://virtual?params={"category":"jump","des":"m","sourceValue":"babel-act","sourceType":"babel","url":"https://u.jd.com/3I1C9vl","M_sourceFrom":"h5auto","msf_type":"auto"}`;
document.location.href = openUrl;
}
///跳转至京东商品详情页或店铺页
function TurnToJD() {
var id = "100109471508";
// 这里直接使用URLencode加密了
// "openapp.jdmobile://virtual?params={"sourceValue":"0_productDetail_97","des":"productDetail","skuId":"100109471508","category":"jump","sourceType":"PCUBE_CHANNEL"}"
window.location.href =
"openapp.jdmobile://virtual?params=%7B%22sourceValue%22:%220_productDetail_97%22,%22des%22:%22productDetail%22,%22skuId%22:%22" +
id +
"%22,%22category%22:%22jump%22,%22sourceType%22:%22PCUBE_CHANNEL%22%7D";
}
</script>
</body>
</html>
这里有两个方法
- handleJdUrl 跳转到app首页
- TurnToJD 跳转到商品详情页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>接收参数示例</title>
</head>
<body>
<h1>接收到的参数</h1>
<p id="param1"></p>
<a href="" id="jd4" onclick="TurnToJD">跳转4</a>
<script>
let jdDict = { category: "jump", des: "getCoupon", url: "" };
let url3 =
'openApp.jdmobile://virtual?params={"category":"jump", "des":"getCoupon", "url":"https://item.jd.com/100109471508.html"}';
document.getElementById("jd4").href = url3;
document.getElementById('param1').textContent = url3
</script>
</body>
</html>
这种也是可以的
补充:
以上的存在一个限制,那就是有些浏览器支持跳转,有些浏览器不支持,例如在移动端百度浏览器就不支持跳转,所以这里我重新做了另一个方案
- 就是通过将小程序(我这里本来是做的小程序)打包为h5
- 将h5部署到服务器(这是为了简单,也可以不部署)
- 新建一个5+app项目
- 配置相关的信息
- 然后直接打包即可
以下是修改后的代码
toJDDetail(url) {
// url :https://item.jd.com/10103374642969.html
console.log(url)
if (process.env.UNI_PLATFORM === 'h5') {
// 当前是H5环境
var skuId = url.split('/').pop().split('.html')[0] // 获得商品id 10103374642969
var shopUrl =
"openapp.jdmobile://virtual?params=%7B%22sourceValue%22:%220_productDetail_97%22,%22des%22:%22productDetail%22,%22skuId%22:%22" +
skuId + "%22,%22category%22:%22jump%22,%22sourceType%22:%22PCUBE_CHANNEL%22%7D"
// window.location.href = shopUrl
// 判断是否安装了京东app
var isApp = plus.runtime.isApplicationExist({
pname: "com.jingdong.app.mall",
action: "openApp.jdMobile://"
})
if (isApp) {
plus.runtime.openURL(shopUrl, function(error) {
alert(JSON.stringify(error))
}, 'com.jingdong.app.mall');
} else {
// 没有则跳转到应用市场安装
plus.runtime.openURL("market://details?id=com.jingdong.app.mall");
}
} else if (/^mp-/.test(process.env.UNI_PLATFORM)) {
// 当前是小程序环境
console.log('运行在小程序环境', process.env.UNI_PLATFORM);
uni.navigateTo({
url: '/pagesA/webview/webView?url=' + url
})
}
}
这里注意,plus是5+ 自带的一个api,这里需要通过这个去判断当前是什么端
以上就是我对于小程序唤起app,这个需求的不断迭代,后面也就变成了app->app的唤起了
上面讲的挺简略的,哪里有问题的欢迎交流哈!!!
补充:如果是APP,那么通过这个process.env.UNI_PLATFORM,判断的是app-plus