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

╰半夏微凉° 2023-02-16 05:54 4阅读 0赞

最近因为需要开发一个跨平台的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][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"
    }

[https_ask.dcloud.net.cn_article_35621]: https://ask.dcloud.net.cn/article/35621