背景:需要根据淘宝的商品链接跳转到淘宝应用内商品详情、以及需要在app应用内打开任意某个url。
首先是简单的在app内打开任意url:
在应用内打开链接:
plus.runtime.openWeb("https://www.baidu.com/")
调用系统浏览器打开链接:
plus.runtime.openURL("https://www.baidu.com/")
再是在app内根据淘宝的商品链接直接打开淘宝并跳转到商品详情页:
因为每家的协议 Scheme 几乎都是不一样的,所以需要针对每个 App 进行单独适配,如:
weixin://dl/moments (微信朋友圈)
alipay://platformapi/startapp?appId=60000007 (支付宝扫码)
taobao://item.taobao.com/item.htm?id=1234567890 (淘宝商品详情)
openApp.jdMobile://virtual?params={"category":"jump","des":"m","skuId":"1234567890"} (京东商品详情)
所以说每家都是不一样的,关键点在于找到每家的协议 Scheme,这里不赘述。
我这里只以淘宝和京东为例,首先我们新建一个js公共方法文件,叫:target.js,内容如下:
/**
* 打开淘宝
*
* 链接(只要是淘宝系的https链接即可)示例:https://detail.tmall.com/item.htm?id=721564171913&skuId=5194628531137
*/
export const handleOpenTaobao = (url) => {// 使用更简洁的正则替换来移除协议头const taobaoUrl = `taobao://${url.replace(/^(https?:)?\/\//, '')}`;plus.runtime.openURL(taobaoUrl, (res) => {uni.showModal({content: '本机未检测到对应客户端,是否打开浏览器访问页面?',success: (res) => {if (res.confirm) {plus.runtime.openURL(url);}},});});
}
/**
* 打开京东
* 链接(只要是京东系的https链接即可)示例:https://u.jd.com/ig3GOaZ
*/
export const handleOpenJingdong = (url) => {const strippedUrl = url.replace(/^(https?:)?\/\//, '');const data = {category: 'jump',des: 'getCoupon',url: strippedUrl,};const openUrl = `openApp.jdMobile://virtual?params=${JSON.stringify(data)}`;plus.runtime.openURL(openUrl, (res) => {uni.showModal({content: '本机未检测到对应客户端,是否打开浏览器访问页面?',success: (res) => {if (res.confirm) {plus.runtime.openURL(url);}},});});
}
以上是淘宝和京东的协议 Scheme跳转。
使用:
import {handleOpenTaobao,handleOpenJingdong
} from 'target.js'// 以下是判断平台的伪代码
switch (平台) {case 京东:handleOpenJingdong(url)breakcase 淘宝:handleOpenTaobao(url)break// 其他平台
}
uniapp也不需要安装其他的东西就可以实现跳转到淘宝和京东的商品详情页了。
这篇分享文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。
想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。
感谢你的阅读与支持,期待在未来的文章中与你再次相遇!
我的微信公众号:【xdub】,欢迎大家订阅,我会同步文章到公众号上。