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"
}