更新记录

1.0.0（2025-12-07） 下载此版本

一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页

平台兼容性

uni-app x(4.87)

appx-link 外部网页超链接组件帮助文档

组件介绍

appx-link 是基于 uni-app-x 开发的跨端外部链接处理组件，针对不同运行端实现差异化交互逻辑：

• H5端：打开新浏览器标签页访问链接；
• App端：优先跳转自定义webview页面，降级唤起系统外部浏览器；
• 小程序端/其他端：复制链接到剪贴板并展示友好提示。 组件支持样式高度自定义、点击交互反馈，适配 uni-app-x 各端渲染规则，无类型警告、无未定义API报错。

组件属性（Props）

组件事件

基础使用示例

<template>
  <view class="demo-page">
    <!-- 基础用法 -->
    <appx-link 
      url="https://www.uni-app.net.cn"
      text="访问uni-app官方文档"
    />
  </view>
</template>

<script lang="uts" setup>
// 无需额外逻辑，组件内置交互
</script>

自定义样式示例

<template>
  <appx-link 
    url="https://www.github.com"
    text="访问GitHub"
    textColor="#6E5494"
    activeColor="#553C9A"
    icon="🔗"
    iconColor="#6E5494"
    :containerStyle="{ 
      margin: '10rpx 0', 
      padding: '12rpx 16rpx', 
      backgroundColor: '#F5F5F5', 
      borderRadius: '8rpx' 
    }"
    :textStyle="{ fontWeight: 'bold', fontSize: '15px' }"
  />
</template>

禁用图标示例

<template>
  <appx-link 
    url="https://www.vuejs.org"
    text="Vue官方文档（无图标）"
    showIcon="false"
    textColor="#4FC08D"
    activeColor="#36B37E"
  />
</template>

自定义提示语示例

<template>
  <appx-link 
    url="https://www.example.com"
    text="自定义提示语示例"
    copyTips="链接已复制，快去浏览器打开吧～"
    openFailTips="抱歉，打开浏览器失败了，请手动复制链接"
  />
</template>

配套webview页面（App端可选）

若需在App端通过自定义webview打开链接，需创建 /pages/webview/webview.vue 页面：

<template>
  <web-view :src="url"></web-view>
</template>

<script lang="uts" setup>
import { onLoad } from '@dcloudio/uni-app';

const url = ref('');

onLoad((options) => {
  if (options.url) {
    url.value = decodeURIComponent(options.url);
  } else {
    uni.showToast({ title: '链接地址无效', icon: 'none' });
    uni.navigateBack();
  }
});
</script>

<style scoped>
web-view {
  width: 100%;
  height: 100vh;
}
</style>

多端表现说明

注意事项

1. 链接合法性：建议传入以http://或https://开头的完整链接，组件未内置链接校验，可在父组件补充；
2. 样式解析：自定义样式传入字符串时，需保证格式接近JSON（组件会自动替换单引号为双引号），推荐优先传对象格式；
3. 单位适配：尺寸类属性（如iconSize）传入数字时自动拼接px，如需rpx需传入字符串（如'24rpx'）；
4. plus API防护：组件已内置plus存在性检测，H5/小程序端访问不会报错；
5. 兼容性：适配 uni-app-x 所有官方支持的运行端，无类型警告、无未定义API报错。