diff --git a/package.json b/package.json index 5b8f3da..3f43701 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "dayjs": "^1.11.12", "echarts": "^5.5.1", "element-plus": "^2.8.0", + "github-markdown-css": "^5.8.1", "js-cookie": "^3.0.5", "localforage": "^1.10.0", "marked": "^15.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8d959db..af8cd3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: element-plus: specifier: ^2.8.0 version: 2.8.0(vue@3.4.38(typescript@5.5.4)) + github-markdown-css: + specifier: ^5.8.1 + version: 5.8.1 js-cookie: specifier: ^3.0.5 version: 3.0.5 @@ -1884,6 +1887,10 @@ packages: resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==} hasBin: true + github-markdown-css@5.8.1: + resolution: {integrity: sha512-8G+PFvqigBQSWLQjyzgpa2ThD9bo7+kDsriUIidGcRhXgmcaAWUIpCZf8DavJgc+xifjbCG+GvMyWr0XMXmc7g==} + engines: {node: '>=10'} + glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -5414,6 +5421,8 @@ snapshots: tar: 6.2.1 optional: true + github-markdown-css@5.8.1: {} + glob-parent@5.1.2: dependencies: is-glob: 4.0.3 diff --git a/public/md/h5唤起app.md b/public/md/h5唤起app.md new file mode 100644 index 0000000..52d4901 --- /dev/null +++ b/public/md/h5唤起app.md @@ -0,0 +1,107 @@ +# [H5 页面中实现跳转到其他 APP](https://www.cnblogs.com/yuzhihui/p/18707478) + +在 H5 页面中跳转到其他 APP，可以使用以下几种方式： + +### 1\. **URL Scheme（自定义协议）** + +许多 APP 都支持 URL Scheme 方式的跳转，例如： + +```html +| | | +| --- | --- | +| | 打开微信 | +| | 打开支付宝 | +| | 打开自定义 APP | +``` + +**注意：** + +* 需要目标 APP 支持 URL Scheme，未安装 APP 时会无响应或报错。 +* 在 iOS 9+ 之后，需在 `info.plist` 中配置 `LSApplicationQueriesSchemes`。 + +### 2\. **Universal Links（iOS）& Deep Link（Android）** + +Universal Links（iOS）和 Deep Link（Android）可以更安全地跳转到 APP，且未安装时可跳转至 Web 页面。 + +* 需要服务端配置特定文件（如 `apple-app-site-association`）。 +* 适用于 iOS 9+，不会弹出确认框，用户体验更好。 + +**示例：** + +```html +| | | +| --- | --- | +| | 打开 APP | +``` + +### 3\. **Intent Scheme（Android 专属）** + +在 Android 设备上可以使用 `intent://` 方案： + +```html +| | | +| --- | --- | +| | 打开 APP | +``` + +* 若 APP 已安装，则直接打开。 +* 若 APP 未安装，则可跳转到 Google Play。 + +### 4\. **iframe 方式（部分浏览器支持）** + +```html +| | | +| --- | --- | +| | | +``` + +* 可用于尝试静默拉起 APP，但可能被浏览器拦截。 + +### 5\. **混合方式（兼容性方案）** + +综合以上方法，推荐使用 JS 处理： + +```html +| | | +| --- | --- | +| | | +| | | +| | | +``` + +### **总结** + +| 方式 | 适用平台 | 适用场景 | 适配难度 | +| --- | --- | --- | --- | +| URL Scheme | iOS/Android | 适用于已知 APP | 低 | +| Universal Links / Deep Link | iOS/Android | 更安全，适用于已安装 APP | 高 | +| Intent Scheme | Android | 适用于 Android | 中 | +| iframe | 部分浏览器 | 适用于尝试拉起 APP | 低 | +| 综合方案 | iOS/Android | 适用于多种情况 | 中 | + +如果 APP 需要兼容性更好的跳转方式，建议结合 Universal Links（iOS）和 Deep Link（Android）。 \ No newline at end of file diff --git a/public/md/vue3中渲染markdown.md b/public/md/vue3中渲染markdown.md new file mode 100644 index 0000000..8cd782f --- /dev/null +++ b/public/md/vue3中渲染markdown.md @@ -0,0 +1,78 @@ +# Vue3中渲染markdown教程 + +### 1. 安装md插件 +```shell +pnpm add marked +``` + +### 2. 安装美化样式 +- **安装`github-markdown-css`** +```shell +pnpm add github-markdown-css +``` + +- **在main.js中全局引入样式（如果单个页面使用可以直接页面中引入即可）** +```javascript +import 'github-markdown-css/github-markdown.css' +``` + +- **reset.scss初始化样式中添加如下代码** +```scss +// markdown 解析格式美化 +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 100%; + margin: 0 auto; + padding: 20px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} +``` + +### 3. 页面使用 +```vue3 + + + +``` +getMarkdownContent方法实现 +```javascript +/** 获取远程资源markdown内的内容 */ +export const getMarkdownContent = (filePath) => { + return new Promise((resolve, reject) => { + fetch(filePath, { + method: 'GET', + }) + .then((result) => { + result + .text() + .then((res) => { + resolve(res); + }) + .catch((err) => reject(err)); + }) + .catch((err) => reject(err)); + }); +}; +``` + diff --git a/src/main.ts b/src/main.ts index 0587e99..54ff57c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -22,6 +22,8 @@ import 'element-plus/dist/index.css'; // 导入字体图标 import './assets/iconfont/iconfont.js'; import './assets/iconfont/iconfont.css'; +// github-markdown-css 全局md样式美化 +import 'github-markdown-css/github-markdown.css'; const app = createApp(App); diff --git a/src/router/modules/template.ts b/src/router/modules/template.ts index fbbb9d2..60f24a6 100644 --- a/src/router/modules/template.ts +++ b/src/router/modules/template.ts @@ -37,5 +37,14 @@ export default { keepAlive: true, }, }, + { + path: '/template/markdown', + name: 'TemplateMarkdown', + component: () => import('@/views/template/markdown/index.vue'), + meta: { + title: 'Markdown模版', + keepAlive: true, + }, + }, ], } satisfies RouteConfigsTable; diff --git a/src/style/reset.scss b/src/style/reset.scss index 20a31d1..f7d83d0 100644 --- a/src/style/reset.scss +++ b/src/style/reset.scss @@ -255,23 +255,16 @@ div:focus { } // markdown 解析格式美化 -.md-main { - p, - ul, - ol { - margin: 16px 0; - } - h3 { - margin: 18px 0; - } - ul, - ol { - padding-left: 40px; - list-style: disc; - } - hr { - margin: 40px 0; - height: 10px; - background: #f5f5f5; +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 100%; + margin: 0 auto; + padding: 20px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; } } diff --git a/src/views/demo/h5OpenApp.vue b/src/views/demo/h5OpenApp.vue new file mode 100644 index 0000000..e82d50d --- /dev/null +++ b/src/views/demo/h5OpenApp.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/views/demo/module/index.vue b/src/views/demo/module/index.vue index 5a88b81..737c64f 100644 --- a/src/views/demo/module/index.vue +++ b/src/views/demo/module/index.vue @@ -1,11 +1,11 @@