更新记录

0.0.3（2025-08-31） 下载此版本

• chore: 更新文档

0.0.2（2025-04-22） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.1（2025-01-02） 下载此版本

• init

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-link 超链接

一个功能丰富的超链接组件，可在应用内跳转链接，在APP端还能打开外部浏览器、拨打电话等功能。组件兼容uni-app和uni-app x，提供了多种样式和交互选项，满足各种场景下的链接需求。

插件依赖：lime-style、lime-call、lime-shared、lime-icon

文档链接

📚 组件详细文档请访问以下站点：

• 超链接组件文档 - 站点1
• 超链接组件文档 - 站点2
• 超链接组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-link
2. 导入后可能需要重新编译项目
3. 在页面中使用l-link组件（组件）或lime-link（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础使用

通过url可设置在应用内跳转，href可在APP端打开外部浏览器拨号等功能。

<l-link type="primary" url="/pages/test/index">内部跳转</l-link>
<l-link href="https://www.baidu.com">外部跳转</l-link>
<l-link type="primary" href="tel://177xxxxxx">拨号</l-link>
<l-link>跳转链接</l-link>

下划线

通过underline可设置下划线。

<l-link underline type="primary" url="/pages/test/index">跳转链接</l-link>
<l-link underline>跳转链接</l-link>

图标

通过prefix-icon可设置前置图标，suffix-icon可设置后置图标，图标库。

<l-link url="/pages/test/index" prefix-icon="link">跳转链接</l-link>
<l-link suffix-icon="jump">跳转链接</l-link>

尺寸

通过size可设置文本和图标的大小，可选值：small,large默认为medium,也可以设置具体的值如30px。

<l-link type="primary" size="large" url="/pages/test/index" prefix-icon="link">跳转链接</l-link>
<l-link prefix-icon="link">跳转链接</l-link>
<l-link prefix-icon="link" size="small">跳转链接</l-link>
<l-link prefix-icon="link" size="30px">自定义大小</l-link>

颜色

通过type可设置链接主题色，可选值:primary、danger、info、warning、success、default,也可以通过color设置具体的颜色。

<l-link size="large" prefix-icon="link">跳转链接</l-link>
<l-link type="primary" prefix-icon="link">跳转链接</l-link>
<l-link type="danger" prefix-icon="link">跳转链接</l-link>
<l-link type="info" prefix-icon="link">跳转链接</l-link>
<l-link type="warning" prefix-icon="link">跳转链接</l-link>
<l-link type="success" prefix-icon="link">跳转链接</l-link>
<l-link color="#ee0a24" prefix-icon="link">自定义颜色</l-link>

打开外部链接API

在APP端，如果只想使用API打开外部链接，可以使用下面代码。该代码来源于uts-openSchema

import { openSchema, canOpenURL } from '@/uni_modules/lime-link'

// #ifdef UNI-APP-X
// 使用外部浏览器打开指定URL
openSchema('https://uniapp.dcloud.io/uni-app-x')

// #ifdef APP-ANDROID
// Android 使用应用商店打开指定App
openSchema('market://details?id=com.tencent.mm')

// Android 打开地图坐标
// 可以先用canOpenURL判断是否安装了地图软件
if (canOpenURL('androidamap://')) {
  openSchema('androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0')
} else {
  console.log('未安装高德地图')
}
// #endif

// #ifdef APP-IOS
// 打开 AppStore 到搜索页
openSchema('itms-apps://search.itunes.apple.com//WebObjects//MZSearch.woa/wa/search?media=software&lterm=')

// 打开 iOS 地图坐标
openSchema('http://maps.apple.com/?q=Mexican+Restaurant&sll=50.894967,4.341626&z=10&t=s')
// #endif

// #endif

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-link/components/lime-link -->
<lime-link />

Vue2使用说明

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

Slots

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。注意：在uvue app中无效。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助