更新记录

1.0.0（2026-10-27） 下载此版本

更新日志

1.0.0（2026-10-27）

首次发布。

新增

• 新增 le-browser-guide 引导弹窗组件，符合 easycom 规范，无需 import 即可使用
• 新增 JS API：openInBrowser() 尝试直接调起第三方浏览器，copyLink() 复制链接到剪贴板
• App 端：通过 plus.runtime.openURL() 调起系统默认浏览器
• 微信小程序端：平台限制无法调起外部浏览器，自动降级为「复制链接 + 三步操作引导」，支持长按链接框手动复制
• H5 端：window.open() 新标签页打开，被浏览器拦截时自动降级为当前页跳转
• 组件支持自定义标题、说明文案、按钮文案、遮罩点击关闭（title / desc / confirmText / maskClosable）
• 组件事件：open（浏览器调起成功）、copy（复制成功）、close（弹窗关闭）、update:show（配合 v-model:show）
• 浏览器图标采用纯 CSS 绘制，零图片资源依赖，样式使用 scoped + BEM 命名
• 提供演示页面 pages/index/index.vue，展示组件弹窗与 JS API 两种调用方式

兼容性

• 仅支持 Vue 3（<script setup> 语法）
• 支持平台：App（vue 页面）、微信小程序、H5

平台兼容性

uni-app(5.33)

其他

le-browser-guide 浏览器打开引导

引导用户使用第三方浏览器打开链接地址的 uniapp 插件，基于 Vue 3 + JavaScript，零第三方依赖，支持 easycom 自动注册。

平台兼容性

Vue 版本要求：仅支持 Vue 3（<script setup> 语法）。

目录结构

uni_modules/le-browser-guide/
├── components/
│   └── le-browser-guide/
│       └── le-browser-guide.vue   # 引导弹窗组件（符合 easycom 规范，无需手动 import）
├── index.js                       # JS API：openInBrowser / copyLink
├── package.json                   # 插件清单
└── readme.md                      # 使用说明

本项目演示页面：pages/index/index.vue。

快速开始

方式一：组件弹窗引导（推荐）

组件符合 easycom 规范，无需 import，直接在模板中使用：

<template>
    <view>
        <button @click="showGuideRef = true">打开链接</button>

        <le-browser-guide
            v-model:show="showGuideRef"
            :url="urlRef"
            @open="handleOpen"
            @copy="handleCopy"
        />
    </view>
</template>

<script setup>
import { ref } from 'vue'

const urlRef = ref('https://www.example.com')
const showGuideRef = ref(false)

function handleOpen(url) {
    console.log('已在浏览器中打开：', url)
}

function handleCopy(url) {
    console.log('链接已复制：', url)
}
</script>

方式二：JS API 直接调用

不展示弹窗，直接尝试调起浏览器（小程序端自动降级为复制链接并 toast 提示）：

import { openInBrowser } from '@/uni_modules/le-browser-guide/index.js'

async function handleOpen() {
    try {
        const opened = await openInBrowser('https://www.example.com')
        // opened = true：App / H5 已直接打开浏览器
        // opened = false：微信小程序已降级为复制链接
    } catch (err) {
        uni.showToast({ title: err.message || '打开失败', icon: 'none' })
    }
}

组件 API

Props

Events

JS API

openInBrowser(url, options?)

尝试直接调起第三方浏览器打开链接。

返回值：Promise<Boolean>

• true：App / H5 已直接打开浏览器
• false：微信小程序已降级为复制链接
• reject：链接为空或调起失败

copyLink(url)

仅复制链接到剪贴板。

返回值：Promise<Boolean>，成功 resolve true，失败 reject。

各端实现细节

• App：确认按钮触发 plus.runtime.openURL(url)，失败时 toast 提示「调起浏览器失败，请重试」。
• 微信小程序：由于平台安全策略，小程序内无法调起外部浏览器。弹窗展示三步引导文案与虚线链接框，点击「复制链接」调用 uni.setClipboardData()，同时支持长按链接框手动复制。
• H5：优先 window.open(url, '_blank') 打开新标签页；若被浏览器弹窗拦截（返回 null），自动降级为 window.location.href 当前页跳转。

注意事项

1. manifest.json：本项目已将 vueVersion 设置为 "3"，main.js 中的 Vue 3 条件编译分支自动生效。
2. 微信小程序：如需在微信内直接打开网页（而非引导至外部浏览器），需使用 web-view 并配置业务域名（仅限已认证主体），本插件不包含该能力。
3. App 端：plus.runtime.openURL() 依赖系统浏览器，iOS 无需额外配置；Android 请确保设备已安装浏览器应用。
4. 样式：组件使用 <style scoped> 与 BEM 类名，图标为纯 CSS 绘制，无图片资源依赖；如需定制主题色，修改样式中的 #3c9cff 即可。