uni-app打开淘宝、京东，并跳转到对应的商品链接

最近因为需要开发一个跨平台的app，最终选定了uni-app，记录一下学习过程中遇到的一些问题。

要实现在app中打开淘宝、京东、应用商店，并跳转到对应商品的功能。

打开淘宝，按照官方的例子就可以

需要注意的是，打开京东时，需要添加一些参数，才能够实现跳转到对应商品。这个方法是在uni-app社区看到的。

直接复制下方代码，即可运行

<template>
	<view class="content">
		<button  @click="handleOpenJingdong">打开京东</button>
		<button  @click="handleOpenTaobao">打开淘宝</button>
		<button  @click="handleOpenShop">应用商店</button>
	</view>
</template>

<script>
	export default {
		methods: {
			/**
			 * 打开淘宝
			 */
			handleOpenTaobao() {
				// 淘宝的商品链接，换成需要访问的地址
				let url = "https://detail.tmall.com/item.htm?spm=a230r.1.14.1.3d4b76f0LV6kFy&id=605165654577&ns=1&abbucket=6";
				let openUrl = url;
				// 因为 url 一般是从其它地方获取的，所以这里要将 http 和 https 删去
				// 也可以直接输入 https:// 之后的内容，则不需要此步判断，直接调用 plus.runtime.openURL
				if (url.substr(0, 5) === 'https') {
					openUrl = `taobao://${url.substr(8)}`;
				} else if (url.substr(0, 4) === 'http') {
					openUrl = `taobao://${url.substr(7)}`;
				}
				plus.runtime.openURL(openUrl, function(res) {
					uni.showModal({
						content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
						success: function(res) {
							if (res.confirm) {
								plus.runtime.openURL(url);
							}
						}
					});
				});
			},
			/**
			 * 打开京东
			 */
			handleOpenJingdong() {
				// 京东的商品链接
				let url = "https://item.jd.com/1110592.html";
				let openUrl = url;
				if (url.substr(0, 5) === 'https') {
					// 按照打开淘宝的方式打开京东，会出现无法跳转到对应的商品链接的问题
					// 这里需要添加上参数，这样就能够正确跳转，这个方法是在uni-app社区看到的
					let data = {category:'jump', des:'getCoupon',url: url.substr(8)}
					openUrl = `openApp.jdMobile://virtual?params=${JSON.stringify(data)}`;
				} else if (url.substr(0, 4) === 'http') {
					let data = {category:'jump', des:'getCoupon',url: url.substr(7)}
					openUrl = `openApp.jdMobile://virtual?params=${JSON.stringify(data)}`;
				}
				plus.runtime.openURL(openUrl, function(res) {
					uni.showModal({
						content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
						success: function(res) {
							if (res.confirm) {
								plus.runtime.openURL(url);
							}
						}
					});
				});
			},
			/**
			 * 打开应用商店
			 */
			handleOpenShop() {
				let appurl = '';
				// 这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数
				// 下文提供了几个常见的应用商店的scheme
				if (plus.os.name=="Android") {  
				    appurl = "market://details?id=io.dcloud.hellouniapp";   
				}  
				else{  
				    appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253";  
				}
				plus.runtime.openURL(appurl, function(res) {
					uni.showModal({
						content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
						success: function(res) {
							if (res.confirm) {
								plus.runtime.openURL(url);
							}
						}
					});
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

另外记录一下常用的url scheme

这里参考了文章 https://ask.dcloud.net.cn/article/35621

[  

    {  
        name: 'App Store',  
        scheme: 'itms-apps://'  
    },  
    {  
        name: '支付宝',  
        pname: 'com.eg.android.AlipayGphone',  
        scheme: 'alipay://'  
    },  
    {  
        name: '淘宝',  
        pname: 'com.taobao.taobao',  
        scheme: 'taobao://'  
    },  
    {  
        name: 'QQ',  
        pname: 'com.tencent.mobileqq',  
        scheme: 'mqq://'  
    },  
    {  
        name: '微信',  
        pname: 'com.tencent.mm',  
        scheme: 'weixin://'  
    },  
    {  
        name: '京东',  
        pname: 'com.jingdong.app.mall',  
        scheme: 'openApp.jdMobile://'  
    },  
    {  
        name: '新浪微博',  
        pname: 'com.sina.weibo',  
        scheme: 'sinaweibo://'  
    },  
    {  
        name: '优酷',  
        pname: 'com.youku.phone',  
        scheme: 'youku://'  
    }  
]  

应用商店的

xiaomi: {
    scheme: "mimarket://details?id=com.xx.xx"
},
samsung: {
    scheme: "samsungapps://ProductDetail/com.xx.xx"
},
huawei: {
    scheme: "appmarket://details?id=com.xx.xx"
},
oppo: {
    scheme: "oppomarket://details?packagename=com.xx.xx",
},
vivo: {
    scheme: "vivomarket://details?id=com.xx.xx"
}