commit 0dcbd340e65c0617e66b17ad516f1e0dc2578264 Author: huangzhenbao <17818024429@163.com> Date: Wed Jan 14 18:19:33 2026 +0800 feat:初始提交uni-app项目 diff --git a/App.vue b/App.vue new file mode 100644 index 0000000..fa3b691 --- /dev/null +++ b/App.vue @@ -0,0 +1,18 @@ + + + diff --git a/api/apis.js b/api/apis.js new file mode 100644 index 0000000..8940d6d --- /dev/null +++ b/api/apis.js @@ -0,0 +1,96 @@ +import {request} from "@/utils/request.js" + +//获取首页banner栏内容 +export function apiGetBanner(){ + return request({ + url:"/homeBanner", + }) + +} + +//获取首页每日推荐栏内容 +export function apiGetDayRandom(){ + return request({url:"/randomWall"}) + +} + +//获取首页公告栏内容 +export function apiGetNotice(data={}){ + return request({ + url:"/wallNewsList", + data + }) +} + +//获取tabBar的“分类”里面的列表内容 +export function apiGetClassify(data={}){ + return request({ + url:"/classify", + data + }) +} + + +//获取tabBar的“分类”栏里面给一个板块的具体图片内容 +export function apiGetClassList(data={}){ + return request({ + url:"/wallList", + data + }) +} + +//为每一个壁纸评分 +export function apiGetSetScore(data={}){ + return request({ + url:"/setupScore", + data + }) +} + +//下载壁纸 +export function apiWriteDownload(data={}){ + return request({ + url:"/downloadWall", + data + }) +} + +// 判断用户是不是通过别人分享进来的,从而获取被分享壁纸的详情信息。只有一张 +export function apiDetailWall(data={}){ + return request({ + url:"/detailWall", + data + }) +} + +//获取 “我的” 页面的个人信息 +export function apiUserInfo(data={}){ + return request({ + url:"/userInfo", + data + }) +} + +//获取 “我的” 页面中"我的下载"和"我的评分"的区分信息 +export function apiGetHistoryList(data={}){ + return request({ + url:"/userWallList", + data + }) +} + +//获取 “我的” 页面中"我的下载"和"我的评分"的区分信息 +export function apiNoticeDetail(data={}){ + return request({ + url:"/wallNewsDetail", + data + }) +} + +//获取 “搜索”页面 壁纸信息 +export function apiSearchData(data={}){ + return request({ + url:"/searchWall", + data + }) +} diff --git a/common/images/banner1.jpg b/common/images/banner1.jpg new file mode 100644 index 0000000..5f6470e Binary files /dev/null and b/common/images/banner1.jpg differ diff --git a/common/images/banner2.jpg b/common/images/banner2.jpg new file mode 100644 index 0000000..218ba07 Binary files /dev/null and b/common/images/banner2.jpg differ diff --git a/common/images/banner3.jpg b/common/images/banner3.jpg new file mode 100644 index 0000000..c444a97 Binary files /dev/null and b/common/images/banner3.jpg differ diff --git a/common/images/classify1.jpg b/common/images/classify1.jpg new file mode 100644 index 0000000..040047c Binary files /dev/null and b/common/images/classify1.jpg differ diff --git a/common/images/classify2.jpg b/common/images/classify2.jpg new file mode 100644 index 0000000..7de667b Binary files /dev/null and b/common/images/classify2.jpg differ diff --git a/common/images/more.jpg b/common/images/more.jpg new file mode 100644 index 0000000..8cc2ff3 Binary files /dev/null and b/common/images/more.jpg differ diff --git a/common/images/preview1.jpg b/common/images/preview1.jpg new file mode 100644 index 0000000..0413ad8 Binary files /dev/null and b/common/images/preview1.jpg differ diff --git a/common/images/preview2.jpg b/common/images/preview2.jpg new file mode 100644 index 0000000..335d86a Binary files /dev/null and b/common/images/preview2.jpg differ diff --git a/common/images/preview_small.webp b/common/images/preview_small.webp new file mode 100644 index 0000000..716f2cb Binary files /dev/null and b/common/images/preview_small.webp differ diff --git a/common/style/base-style.scss b/common/style/base-style.scss new file mode 100644 index 0000000..00d9e4c --- /dev/null +++ b/common/style/base-style.scss @@ -0,0 +1,9 @@ +$brand-theme-color:#28B389; //品牌主题绿色 + +$border-color:#e0e0e0; //边框颜色 +$border-color-light:#efefef; //边框亮色 + +$text-font-color-1:#000; //文字主色 +$text-font-color-2:#676767; //副标题颜色 +$text-font-color-3:#a7a7a7; //浅色 +$text-font-color-4:#e4e4e4; //更浅色 \ No newline at end of file diff --git a/common/style/common-sytle.scss b/common/style/common-sytle.scss new file mode 100644 index 0000000..53d6ff7 --- /dev/null +++ b/common/style/common-sytle.scss @@ -0,0 +1,25 @@ +view,swiper,swiper-item{ + // 将盒子全部换成奇异盒,而不是普通盒 + box-sizing: border-box; +} + +//页面的背景 +.pageBg{ + background: + // 这个百分比控制的是颜色占的广度,越小表示从页面的百分之几开始融合 + //transparent 透明 = rgba(0,0,0,0) + linear-gradient(to bottom,transparent 0%,#fff 400rpx), + linear-gradient(to right,#beecd8 20%,#F4E2D8); + // 加一个最小高度,保证全部覆盖 + + min-height: 80vh; +} + + +.loadingLayout{ + padding: 30rpx 0; +} + +.safe-area-inset-bottom{ + height: env(safe-area-inset-bottom); +} \ No newline at end of file diff --git a/components/common-title/common-title.vue b/components/common-title/common-title.vue new file mode 100644 index 0000000..0018dbc --- /dev/null +++ b/components/common-title/common-title.vue @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/components/components.vue b/components/components.vue new file mode 100644 index 0000000..b1d06e9 --- /dev/null +++ b/components/components.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/components/custom-nav-bar/custom-nav-bar.vue b/components/custom-nav-bar/custom-nav-bar.vue new file mode 100644 index 0000000..0d8c741 --- /dev/null +++ b/components/custom-nav-bar/custom-nav-bar.vue @@ -0,0 +1,93 @@ + + + + + \ No newline at end of file diff --git a/components/theme-item/theme-item.vue b/components/theme-item/theme-item.vue new file mode 100644 index 0000000..8d133e0 --- /dev/null +++ b/components/theme-item/theme-item.vue @@ -0,0 +1,112 @@ + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b5d330d --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + +
+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..c1caf36 --- /dev/null +++ b/main.js @@ -0,0 +1,22 @@ +import App from './App' + +// #ifndef VUE3 +import Vue from 'vue' +import './uni.promisify.adaptor' +Vue.config.productionTip = false +App.mpType = 'app' +const app = new Vue({ + ...App +}) +app.$mount() +// #endif + +// #ifdef VUE3 +import { createSSRApp } from 'vue' +export function createApp() { + const app = createSSRApp(App) + return { + app + } +} +// #endif \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..a75b940 --- /dev/null +++ b/manifest.json @@ -0,0 +1,73 @@ +{ + "name" : "wallpaper-kt", + "appid" : "__UNI__CDCE98F", + "description" : "", + "versionName" : "1.0.0", + "versionCode" : "100", + "transformPx" : false, + /* 5+App特有相关 */ + "app-plus" : { + "usingComponents" : true, + "nvueStyleCompiler" : "uni-app", + "compilerVersion" : 3, + "splashscreen" : { + "alwaysShowBeforeRender" : true, + "waiting" : true, + "autoclose" : true, + "delay" : 0 + }, + /* 模块配置 */ + "modules" : {}, + /* 应用发布信息 */ + "distribute" : { + /* android打包配置 */ + "android" : { + "permissions" : [ + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "" + ] + }, + /* ios打包配置 */ + "ios" : {}, + /* SDK配置 */ + "sdkConfigs" : {} + } + }, + /* 快应用特有相关 */ + "quickapp" : {}, + /* 小程序特有相关 */ + "mp-weixin" : { + "appid" : "wxd0cd1606ac6a1936", + "setting" : { + "urlCheck" : false, + "minified" : true + }, + "usingComponents" : true + }, + "mp-alipay" : { + "usingComponents" : true + }, + "mp-baidu" : { + "usingComponents" : true + }, + "mp-toutiao" : { + "usingComponents" : true + }, + "uniStatistics" : { + "enable" : false + }, + "vueVersion" : "3" +} diff --git a/pages.json b/pages.json new file mode 100644 index 0000000..3f02045 --- /dev/null +++ b/pages.json @@ -0,0 +1,102 @@ +{ + "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages + { + "path": "pages/index/index", + "style": { + "navigationBarTitleText": "uni-app", + "navigationStyle": "custom" + } + }, + { + "path" : "components/components", + "style" : + { + "navigationBarTitleText" : "" + } + }, + { + "path" : "pages/classify/classify", + "style" : + { + "navigationBarTitleText" : "分类", + "enablePullDownRefresh": true, + "navigationStyle": "custom" + } + }, + { + "path" : "pages/user/user", + "style" : + { + "navigationBarTitleText" : "我的", + "navigationStyle": "custom" + } + }, + { + "path" : "pages/classlist/classlist", + "style" : + { + "navigationBarTitleText" : "分类列表" + } + }, + { + "path" : "pages/preview/preview", + "style" : + { + "navigationBarTitleText" : "预览", + "navigationStyle": "custom" + } + }, + { + "path" : "pages/notice/notice", + "style" : + { + "navigationBarTitleText" : "公告" + } + }, + { + "path" : "pages/notice/detail", + "style" : + { + "navigationBarTitleText" : "公告详情" + } + }, + { + "path" : "pages/search/search", + "style" : + { + "navigationBarTitleText" : "搜索" + } + } + ], + "globalStyle": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "咸虾米壁纸", + "navigationBarBackgroundColor": "#fff", + "backgroundColor": "#F8F8F8" + }, + "tabBar": { + "color": "#9799a5", + "selectedColor": "#28b389", + "list": [ + { + "text": "推荐", + "pagePath": "pages/index/index", + "iconPath": "/static/images/tabBar/home.png", + "selectedIconPath": "/static/images/tabBar/home-h.png" + }, + { + "text": "分类", + "pagePath": "pages/classify/classify", + "iconPath": "/static/images/tabBar/classify.png", + "selectedIconPath": "/static/images/tabBar/classify-h.png" + }, + { + "text": "我的", + "pagePath": "pages/user/user", + "iconPath": "/static/images/tabBar/user.png", + "selectedIconPath": "/static/images/tabBar/user-h.png" + } + ] + }, + "uniIdRouter": {} +} diff --git a/pages/classify/classify.vue b/pages/classify/classify.vue new file mode 100644 index 0000000..4034e23 --- /dev/null +++ b/pages/classify/classify.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/pages/classlist/classlist.vue b/pages/classlist/classlist.vue new file mode 100644 index 0000000..8330642 --- /dev/null +++ b/pages/classlist/classlist.vue @@ -0,0 +1,269 @@ + + + + + diff --git a/pages/index/index.vue b/pages/index/index.vue new file mode 100644 index 0000000..b5f2cd8 --- /dev/null +++ b/pages/index/index.vue @@ -0,0 +1,370 @@ + + + + + diff --git a/pages/notice/detail.vue b/pages/notice/detail.vue new file mode 100644 index 0000000..9ace384 --- /dev/null +++ b/pages/notice/detail.vue @@ -0,0 +1,116 @@ + + + + + + diff --git a/pages/notice/notice.vue b/pages/notice/notice.vue new file mode 100644 index 0000000..30d542f --- /dev/null +++ b/pages/notice/notice.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/pages/preview/preview.vue b/pages/preview/preview.vue new file mode 100644 index 0000000..3d0ffe2 --- /dev/null +++ b/pages/preview/preview.vue @@ -0,0 +1,707 @@ + + + + + \ No newline at end of file diff --git a/pages/search/search.vue b/pages/search/search.vue new file mode 100644 index 0000000..1543beb --- /dev/null +++ b/pages/search/search.vue @@ -0,0 +1,273 @@ + + + + + diff --git a/pages/user/user.vue b/pages/user/user.vue new file mode 100644 index 0000000..ec69377 --- /dev/null +++ b/pages/user/user.vue @@ -0,0 +1,239 @@ + + + + + diff --git a/project.config.json b/project.config.json new file mode 100644 index 0000000..1cea089 --- /dev/null +++ b/project.config.json @@ -0,0 +1,25 @@ +{ + "setting": { + "es6": true, + "postcss": true, + "minified": true, + "uglifyFileName": false, + "enhance": true, + "packNpmRelationList": [], + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "useCompilerPlugins": false, + "minifyWXML": true + }, + "compileType": "miniprogram", + "simulatorPluginLibVersion": {}, + "packOptions": { + "ignore": [], + "include": [] + }, + "appid": "wxd0cd1606ac6a1936", + "editorSetting": {} +} \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json new file mode 100644 index 0000000..46ee174 --- /dev/null +++ b/project.private.config.json @@ -0,0 +1,14 @@ +{ + "libVersion": "3.9.0", + "projectname": "wallpaper-kt", + "setting": { + "urlCheck": true, + "coverView": true, + "lazyloadPlaceholderEnable": false, + "skylineRenderEnable": false, + "preloadBackgroundData": false, + "autoAudits": false, + "showShadowRootInWxmlPanel": true, + "compileHotReLoad": true + } +} \ No newline at end of file diff --git a/static/images/tabBar/classify-h.png b/static/images/tabBar/classify-h.png new file mode 100644 index 0000000..2858107 Binary files /dev/null and b/static/images/tabBar/classify-h.png differ diff --git a/static/images/tabBar/classify.png b/static/images/tabBar/classify.png new file mode 100644 index 0000000..d32bc6c Binary files /dev/null and b/static/images/tabBar/classify.png differ diff --git a/static/images/tabBar/home-h.png b/static/images/tabBar/home-h.png new file mode 100644 index 0000000..e86e1dd Binary files /dev/null and b/static/images/tabBar/home-h.png differ diff --git a/static/images/tabBar/home.png b/static/images/tabBar/home.png new file mode 100644 index 0000000..591aa1a Binary files /dev/null and b/static/images/tabBar/home.png differ diff --git a/static/images/tabBar/user-h.png b/static/images/tabBar/user-h.png new file mode 100644 index 0000000..fa8b717 Binary files /dev/null and b/static/images/tabBar/user-h.png differ diff --git a/static/images/tabBar/user.png b/static/images/tabBar/user.png new file mode 100644 index 0000000..6d53fc0 Binary files /dev/null and b/static/images/tabBar/user.png differ diff --git a/static/images/xxmLogo.png b/static/images/xxmLogo.png new file mode 100644 index 0000000..d822b16 Binary files /dev/null and b/static/images/xxmLogo.png differ diff --git a/uni.promisify.adaptor.js b/uni.promisify.adaptor.js new file mode 100644 index 0000000..5fec4f3 --- /dev/null +++ b/uni.promisify.adaptor.js @@ -0,0 +1,13 @@ +uni.addInterceptor({ + returnValue (res) { + if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) { + return res; + } + return new Promise((resolve, reject) => { + res.then((res) => { + if (!res) return resolve(res) + return res[0] ? reject(res[0]) : resolve(res[1]) + }); + }); + }, +}); \ No newline at end of file diff --git a/uni.scss b/uni.scss new file mode 100644 index 0000000..a941223 --- /dev/null +++ b/uni.scss @@ -0,0 +1,88 @@ +/** + * 这里是uni-app内置的常用样式变量 + * + * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 + * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App + * + */ + +/** + * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 + * + * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 + */ + +/* 颜色变量 */ +@import "@/common/style/base-style.scss"; +// 定义一个 mixin +@mixin fix-position{ + position: absolute; + left: 0; + right: 0; + //单纯的给margin:auto的话,你的宽度会被拉长,需要给一个固定宽度 + margin: auto; + //宽度你给多少都不能准确到达中间位置,给一个fit-content自动适应 + width:fit-content; + color: #fff; +} + +/* 行为相关颜色 */ +$uni-color-primary: #007aff; +$uni-color-success: #4cd964; +$uni-color-warning: #f0ad4e; +$uni-color-error: #dd524d; + +/* 文字基本颜色 */ +$uni-text-color:#333;//基本色 +$uni-text-color-inverse:#fff;//反色 +$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息 +$uni-text-color-placeholder: #808080; +$uni-text-color-disable:#c0c0c0; + +/* 背景颜色 */ +$uni-bg-color:#ffffff; +$uni-bg-color-grey:#f8f8f8; +$uni-bg-color-hover:#f1f1f1;//点击状态颜色 +$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 + +/* 边框颜色 */ +$uni-border-color:#c8c7cc; + +/* 尺寸变量 */ + +/* 文字尺寸 */ +$uni-font-size-sm:12px; +$uni-font-size-base:14px; +$uni-font-size-lg:16px; + +/* 图片尺寸 */ +$uni-img-size-sm:20px; +$uni-img-size-base:26px; +$uni-img-size-lg:40px; + +/* Border Radius */ +$uni-border-radius-sm: 2px; +$uni-border-radius-base: 3px; +$uni-border-radius-lg: 6px; +$uni-border-radius-circle: 50%; + +/* 水平间距 */ +$uni-spacing-row-sm: 5px; +$uni-spacing-row-base: 10px; +$uni-spacing-row-lg: 15px; + +/* 垂直间距 */ +$uni-spacing-col-sm: 4px; +$uni-spacing-col-base: 8px; +$uni-spacing-col-lg: 12px; + +/* 透明度 */ +$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 + +/* 文章场景相关 */ +$uni-color-title: #2C405A; // 文章标题颜色 +$uni-font-size-title:20px; +$uni-color-subtitle: #555555; // 二级标题颜色 +$uni-font-size-subtitle:26px; +$uni-color-paragraph: #3F536E; // 文章段落颜色 +$uni-font-size-paragraph:15px; diff --git a/uni_modules/mp-html/README.md b/uni_modules/mp-html/README.md new file mode 100644 index 0000000..cf9ba73 --- /dev/null +++ b/uni_modules/mp-html/README.md @@ -0,0 +1,192 @@ +## 为减小组件包的大小,默认组件包中不包含编辑、latex 公式等扩展功能,需要使用扩展功能的请参考下方的 插件扩展 栏的说明 + +## 功能介绍 +- 全端支持(含 `v3、NVUE`) +- 支持丰富的标签(包括 `table`、`video`、`svg` 等) +- 支持丰富的事件效果(自动预览图片、链接处理等) +- 支持设置占位图(加载中、出错时、预览时) +- 支持锚点跳转、长按复制等丰富功能 +- 支持大部分 *html* 实体 +- 丰富的插件(关键词搜索、内容编辑、`latex` 公式等) +- 效率高、容错性强且轻量化 + +查看 [功能介绍](https://jin-yufeng.github.io/mp-html/#/overview/feature) 了解更多 + +## 使用方法 +- `uni_modules` 方式 + 1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules/mp-html` 目录下 + 2. 在需要使用页面的 `(n)vue` 文件中添加 + ```html + + + ``` + ```javascript + export default { + data() { + return { + html: '
Hello World!
' + } + } + } + ``` + 3. 需要更新版本时在 `HBuilder X` 中右键 `uni_modules/mp-html` 目录选择 `从插件市场更新` 即可 + +- 源码方式 + 1. 从 [github](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 或 [gitee](https://gitee.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 下载源码 + 插件市场的 **非 uni_modules 版本** 无法更新,不建议从插件市场获取 + 2. 在需要使用页面的 `(n)vue` 文件中添加 + ```html + + ``` + ```javascript + import mpHtml from '@/components/mp-html/mp-html' + export default { + // HBuilderX 2.5.5+ 可以通过 easycom 自动引入 + components: { + mpHtml + }, + data() { + return { + html: '
Hello World!
' + } + } + } + ``` + +- npm 方式 + 1. 在项目根目录下执行 + ```bash + npm install mp-html + ``` + 2. 在需要使用页面的 `(n)vue` 文件中添加 + ```html + + ``` + ```javascript + import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html' + export default { + // 不可省略 + components: { + mpHtml + }, + data() { + return { + html: '
Hello World!
' + } + } + } + ``` + 3. 需要更新版本时执行以下命令即可 + ```bash + npm update mp-html + ``` + + 使用 *cli* 方式运行的项目,通过 *npm* 方式引入时,需要在 *vue.config.js* 中配置 *transpileDependencies*,详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687) + 如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下,否则无法运行 + +查看 [快速开始](https://jin-yufeng.github.io/mp-html/#/overview/quickstart) 了解更多 + +## 组件属性 + +| 属性 | 类型 | 默认值 | 说明 | +|:---:|:---:|:---:|---| +| container-style | String | | 容器的样式([2.1.0+](https://jin-yufeng.github.io/mp-html/#/changelog/changelog#v210)) | +| content | String | | 用于渲染的 html 字符串 | +| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 | +| domain | String | | 主域名(用于链接拼接) | +| error-img | String | | 图片出错时的占位图链接 | +| lazy-load | Boolean | false | 是否开启图片懒加载 | +| loading-img | String | | 图片加载过程中的占位图链接 | +| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 | +| preview-img | Boolean | true | 是否允许图片被点击时自动预览 | +| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 | +| selectable | Boolean | false | 是否开启文本长按复制 | +| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 | +| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 | +| tag-style | Object | | 设置标签的默认样式 | +| use-anchor | Boolean | false | 是否使用锚点链接 | + +查看 [属性](https://jin-yufeng.github.io/mp-html/#/basic/prop) 了解更多 + +## 组件事件 + +| 名称 | 触发时机 | +|:---:|---| +| load | dom 树加载完毕时 | +| ready | 图片加载完毕时 | +| error | 发生渲染错误时 | +| imgtap | 图片被点击时 | +| linktap | 链接被点击时 | +| play | 音视频播放时 | + +查看 [事件](https://jin-yufeng.github.io/mp-html/#/basic/event) 了解更多 + +## api +组件实例上提供了一些 `api` 方法可供调用 + +| 名称 | 作用 | +|:---:|---| +| in | 将锚点跳转的范围限定在一个 scroll-view 内 | +| navigateTo | 锚点跳转 | +| getText | 获取文本内容 | +| getRect | 获取富文本内容的位置和大小 | +| setContent | 设置富文本内容 | +| imgList | 获取所有图片的数组 | +| pauseMedia | 暂停播放音视频([2.2.2+](https://jin-yufeng.github.io/mp-html/#/changelog/changelog#v222)) | +| setPlaybackRate | 设置音视频播放速率([2.4.0+](https://jin-yufeng.github.io/mp-html/#/changelog/changelog#v240)) | + +查看 [api](https://jin-yufeng.github.io/mp-html/#/advanced/api) 了解更多 + +## 插件扩展 +除基本功能外,本组件还提供了丰富的扩展,可按照需要选用 + +| 名称 | 作用 | +|:---:|---| +| audio | 音乐播放器 | +| editable | 富文本 **编辑**([示例项目](https://mp-html.oss-cn-hangzhou.aliyuncs.com/editable.zip)) | +| emoji | 解析 emoji | +| highlight | 代码块高亮显示 | +| markdown | 渲染 markdown | +| search | 关键词搜索 | +| style | 匹配 style 标签中的样式 | +| txv-video | 使用腾讯视频 | +| img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) | +| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) | + +从插件市场导入的包中 **不含有** 扩展插件,使用插件需通过微信小程序 `富文本插件` 获取或参考以下方法进行打包: +1. 获取完整组件包 + ```bash + npm install mp-html + ``` +2. 编辑 `tools/config.js` 中的 `plugins` 项,选择需要的插件 +3. 生成新的组件包 + 在 `node_modules/mp-html` 目录下执行 + ```bash + npm install + npm run build:uni-app + ``` +4. 拷贝 `dist/uni-app` 中的内容到项目根目录 + +查看 [插件](https://jin-yufeng.github.io/mp-html/#/advanced/plugin) 了解更多 + +## 关于 nvue +`nvue` 使用原生渲染,不支持部分 `css` 样式,为实现和 `html` 相同的效果,组件内部通过 `web-view` 进行渲染,性能上差于原生,根据 `weex` 官方建议,`web` 标签仅应用在非常规的降级场景。因此,如果通过原生的方式(如 `richtext`)能够满足需要,则不建议使用本组件,如果有较多的富文本内容,则可以直接使用 `vue` 页面 +由于渲染方式与其他端不同,有以下限制: +1. 不支持 `lazy-load` 属性 +2. 视频不支持全屏播放 +3. 如果在 `flex-direction: row` 的容器中使用,需要给组件设置宽度或设置 `flex: 1` 占满剩余宽度 + +纯 `nvue` 模式下,[此问题](https://ask.dcloud.net.cn/question/119678) 修复前,不支持通过 `uni_modules` 引入,需要本地引入(将 [dist/uni-app](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 中的内容拷贝到项目根目录下) + + +## 问题反馈 +遇到问题时,请先查阅 [常见问题](https://jin-yufeng.github.io/mp-html/#/question/faq) 和 [issue](https://github.com/jin-yufeng/mp-html/issues) 中是否已有相同的问题 +可通过 [issue](https://github.com/jin-yufeng/mp-html/issues/new/choose) 、插件问答或发送邮件到 [mp_html@126.com](mailto:mp_html@126.com) 提问,不建议在评论区提问(不方便回复) +提问请严格按照 [issue 模板](https://github.com/jin-yufeng/mp-html/issues/new/choose) ,描述清楚使用环境、`html` 内容或可复现的 `demo` 项目以及复现方式,对于 **描述不清**、**无法复现** 或重复的问题将不予回复 + +欢迎加入 `QQ` 交流群: +群1(已满):`699734691` +群2(已满):`778239129` +群3:`960265313` + +查看 [问题反馈](https://jin-yufeng.github.io/mp-html/#/question/feedback) 了解更多 diff --git a/uni_modules/mp-html/changelog.md b/uni_modules/mp-html/changelog.md new file mode 100644 index 0000000..ebb557a --- /dev/null +++ b/uni_modules/mp-html/changelog.md @@ -0,0 +1,156 @@ +## v2.5.1(2025-04-20) +1. `U` 适配鸿蒙 `APP` [详细](https://github.com/jin-yufeng/mp-html/issues/615) +2. `U` 微信小程序替换废弃 `api` `getSystemInfoSync` [详细](https://github.com/jin-yufeng/mp-html/issues/613) +3. `F` 修复了 `app` 端播放视频可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/617) +4. `F` 修复了 `latex` 插件可能出现 `xxx can be used only in display mode` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/632) +5. `F` 修复了 `uni-app` 包 `latex` 公式可能不显示的问题 [#599](https://github.com/jin-yufeng/mp-html/issues/599)、[#627](https://github.com/jin-yufeng/mp-html/issues/627) +## v2.5.0(2024-04-22) +1. `U` `play` 事件增加返回 `src` 等信息 [详细](https://github.com/jin-yufeng/mp-html/issues/526) +2. `U` `preview-img` 属性支持设置为 `all` 开启 `base64` 图片预览 [详细](https://github.com/jin-yufeng/mp-html/issues/536) +3. `U` `editable` 插件增加简易模式(点击文字直接编辑) +4. `U` `latex` 插件支持块级公式 [详细](https://github.com/jin-yufeng/mp-html/issues/582) +5. `F` 修复了表格部分情况下背景丢失的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/587) +6. `F` 修复了部分 `svg` 无法显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/591) +7. `F` 修复了 `h5` 和 `app` 端部分情况下样式无法识别的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/518) +8. `F` 修复了 `latex` 插件部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/580) +9. `F` 修复了 `editable` 插件表格无法删除的问题 +10. `F` 修复了 `editable` 插件 `vue3` `h5` 端点击图片报错的问题 +11. `F` 修复了 `editable` 插件点击表格没有菜单栏的问题 +## v2.4.3(2024-01-21) +1. `A` 增加 [card](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#card) 插件 [详细](https://github.com/jin-yufeng/mp-html/pull/533) by [@whoooami](https://github.com/whoooami) +2. `F` 修复了 `svg` 中包含 `foreignobject` 可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/523) +3. `F` 修复了合并单元格的表格部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/561) +4. `F` 修复了 `img` 标签设置 `object-fit` 无效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/567) +5. `F` 修复了 `latex` 插件公式会换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/540) +6. `F` 修复了 `editable` 和 `audio` 插件共用时点击 `audio` 无法编辑的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/529) by [@whoooami](https://github.com/whoooami) +7. `F` 修复了微信小程序部分情况下图片会报错 `replace of undefined` 的问题 +8. `F` 修复了快手小程序图片不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/571) +## v2.4.2(2023-05-14) +1. `A` `editable` 插件支持修改文字颜色 [详细](https://github.com/jin-yufeng/mp-html/issues/254) +2. `F` 修复了 `svg` 中有 `style` 不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/505) +3. `F` 修复了使用旧版编译器可能报错 `Bad attr nodes` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/472) +4. `F` 修复了 `app` 端可能出现无法读取 `lazyLoad` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/513) +5. `F` 修复了 `editable` 插件在点击换图时未拼接 `domain` 的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/497) by [@TwoKe945](https://github.com/TwoKe945) +6. `F` 修复了 `latex` 插件部分情况下不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/515) +7. `F` 修复了 `editable` 插件点击音视频时其他标签框不消失的问题 +## v2.4.1(2022-12-25) +1. `F` 修复了没有图片时 `ready` 事件可能不触发的问题 +2. `F` 修复了加载过程中可能出现 `Root label not found` 错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/470) +3. `F` 修复了 `audio` 插件退出页面可能会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/457) +4. `F` 修复了 `vue3` 运行到 `app` 在 `HBuilder X 3.6.10` 以上报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/480) +5. `F` 修复了 `nvue` 端链接中包含 `%22` 时可能无法显示的问题 +6. `F` 修复了 `vue3` 使用 `highlight` 插件可能报错的问题 +## v2.4.0(2022-08-27) +1. `A` 增加了 [setPlaybackRate](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#setPlaybackRate) 的 `api`,可以设置音视频的播放速率 [详细](https://github.com/jin-yufeng/mp-html/issues/452) +2. `A` 示例小程序代码开源 [详细](https://github.com/jin-yufeng/mp-html-demo) +3. `U` 优化 `ready` 事件触发时机,未设置懒加载的情况下基本可以准确触发 [详细](https://github.com/jin-yufeng/mp-html/issues/195) +4. `U` `highlight` 插件在编辑状态下不进行高亮处理,便于编辑 +5. `F` 修复了 `flex` 布局下图片大小可能不正确的问题 +6. `F` 修复了 `selectable` 属性没有设置 `force` 也可能出现渲染异常的问题 +7. `F` 修复了表格中的图片大小可能不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/448) +8. `F` 修复了含有合并单元格的表格可能无法设置竖直对齐的问题 +9. `F` 修复了 `editable` 插件在 `scroll-view` 中使用时工具条位置可能不正确的问题 +10. `F` 修复了 `vue3` 使用 [search](advanced/plugin#search) 插件可能导致错误换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/449) +## v2.3.2(2022-08-13) +1. `A` 增加 [latex](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#latex) 插件,可以渲染数学公式 [详细](https://github.com/jin-yufeng/mp-html/pull/447) by [@Zeng-J](https://github.com/Zeng-J) +2. `U` 优化根节点下有很多标签的长内容渲染速度 +3. `U` `highlight` 插件适配 `lang-xxx` 格式 +4. `F` 修复了 `table` 标签设置 `border` 属性后可能无法修改边框样式的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/439) by [@zouxingjie](https://github.com/zouxingjie) +5. `F` 修复了 `editable` 插件输入连续空格无效的问题 +6. `F` 修复了 `vue3` 图片设置 `inline` 会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/438) +7. `F` 修复了 `vue3` 使用 `table` 可能报错的问题 +## v2.3.1(2022-05-20) +1. `U` `app` 端支持使用本地图片 +2. `U` 优化了微信小程序 `selectable` 属性在 `ios` 端的处理 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable) +3. `F` 修复了 `editable` 插件不在顶部时 `tooltip` 位置可能错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/430) +4. `F` 修复了 `vue3` 运行到微信小程序可能报错丢失内容的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/414) +5. `F` 修复了 `vue3` 部分标签可能被错误换行的问题 +6. `F` 修复了 `editable` 插件 `app` 端插入视频无法预览的问题 +## v2.3.0(2022-04-01) +1. `A` 增加了 `play` 事件,音视频播放时触发,可用于与页面其他音视频进行互斥播放 [详细](basic/event#play) +2. `U` `show-img-menu` 属性支持控制预览时是否长按弹出菜单 +3. `U` 优化 `wxs` 处理,提高渲染性能 [详细](https://developers.weixin.qq.com/community/develop/article/doc/0006cc2b204740f601bd43fa25a413) +4. `U` `video` 标签支持 `object-fit` 属性 +5. `U` 增加支持一些常用实体编码 [详细](https://github.com/jin-yufeng/mp-html/issues/418) +6. `F` 修复了图片仅设置高度可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/410) +7. `F` 修复了 `video` 标签高度设置为 `auto` 不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/411) +8. `F` 修复了使用 `grid` 布局时可能样式错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/413) +9. `F` 修复了含有合并单元格的表格部分情况下显示异常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/417) +10. `F` 修复了 `editable` 插件连续插入内容时顺序不正确的问题 +11. `F` 修复了 `uni-app` 包 `vue3` 使用 `audio` 插件报错的问题 +12. `F` 修复了 `uni-app` 包 `highlight` 插件使用自定义的 `prism.min.js` 报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/416) +## v2.2.2(2022-02-26) +1. `A` 增加了 [pauseMedia](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#pauseMedia) 的 `api`,可用于暂停播放音视频 [详细](https://github.com/jin-yufeng/mp-html/issues/317) +2. `U` 优化了长内容的加载速度 +3. `U` 适配 `vue3` [#389](https://github.com/jin-yufeng/mp-html/issues/389)、[#398](https://github.com/jin-yufeng/mp-html/pull/398) by [@zhouhuafei](https://github.com/zhouhuafei)、[#400](https://github.com/jin-yufeng/mp-html/issues/400) +4. `F` 修复了小程序端图片高度设置为百分比时可能不显示的问题 +5. `F` 修复了 `highlight` 插件部分情况下可能显示不完整的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/403) +## v2.2.1(2021-12-24) +1. `A` `editable` 插件增加上下移动标签功能 +2. `U` `editable` 插件支持在文本中间光标处插入内容 +3. `F` 修复了 `nvue` 端设置 `margin` 后可能导致高度不正确的问题 +4. `F` 修复了 `highlight` 插件使用压缩版的 `prism.css` 可能导致背景失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/367) +5. `F` 修复了编辑状态下使用 `emoji` 插件内容为空时可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/371) +6. `F` 修复了使用 `editable` 插件后将 `selectable` 属性设置为 `force` 不生效的问题 +## v2.2.0(2021-10-12) +1. `A` 增加 `customElements` 配置项,便于添加自定义功能性标签 [详细](https://github.com/jin-yufeng/mp-html/issues/350) +2. `A` `editable` 插件增加切换音视频自动播放状态的功能 [详细](https://github.com/jin-yufeng/mp-html/pull/341) by [@leeseett](https://github.com/leeseett) +3. `A` `editable` 插件删除媒体标签时触发 `remove` 事件,便于删除已上传的文件 +4. `U` `editable` 插件 `insertImg` 方法支持同时插入多张图片 [详细](https://github.com/jin-yufeng/mp-html/issues/342) +5. `U` `editable` 插入图片和音视频时支持拼接 `domian` 主域名 +6. `F` 修复了内部链接参数中包含 `://` 时被认为是外部链接的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/356) +7. `F` 修复了部分 `svg` 标签名或属性名大小写不正确时不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/351) +8. `F` 修复了 `nvue` 页面运行到非 `app` 平台时可能样式错误的问题 +## v2.1.5(2021-08-13) +1. `A` 增加支持标签的 `dir` 属性 +2. `F` 修复了 `ruby` 标签文字与拼音没有居中对齐的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/325) +3. `F` 修复了音视频标签内有 `a` 标签时可能无法播放的问题 +4. `F` 修复了 `externStyle` 中的 `class` 名包含下划线或数字时可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326) +5. `F` 修复了 `h5` 端引入 `externStyle` 可能不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326) +## v2.1.4(2021-07-14) +1. `F` 修复了 `rt` 标签无法设置样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/318) +2. `F` 修复了表格中有单元格同时合并行和列时可能显示不正确的问题 +3. `F` 修复了 `app` 端无法关闭图片长按菜单的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/322) +4. `F` 修复了 `editable` 插件只能添加图片链接不能修改的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/312) by [@leeseett](https://github.com/leeseett) +## v2.1.3(2021-06-12) +1. `A` `editable` 插件增加 `insertTable` 方法 +2. `U` `editable` 插件支持编辑表格中的空白单元格 [详细](https://github.com/jin-yufeng/mp-html/issues/310) +3. `F` 修复了 `externStyle` 中使用伪类可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/298) +4. `F` 修复了多个组件同时使用时 `tag-style` 属性时可能互相影响的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/305) by [@woodguoyu](https://github.com/woodguoyu) +5. `F` 修复了包含 `linearGradient` 的 `svg` 可能无法显示的问题 +6. `F` 修复了编译到头条小程序时可能报错的问题 +7. `F` 修复了 `nvue` 端不触发 `click` 事件的问题 +8. `F` 修复了 `editable` 插件尾部插入时无法撤销的问题 +9. `F` 修复了 `editable` 插件的 `insertHtml` 方法只能在末尾插入的问题 +10. `F` 修复了 `editable` 插件插入音频不显示的问题 +## v2.1.2(2021-04-24) +1. `A` 增加了 [img-cache](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#img-cache) 插件,可以在 `app` 端缓存图片 [详细](https://github.com/jin-yufeng/mp-html/issues/292) by [@PentaTea](https://github.com/PentaTea) +2. `U` 支持通过 `container-style` 属性设置 `white-space` 来保留连续空格和换行符 [详细](https://jin-yufeng.gitee.io/mp-html/#/question/faq#space) +3. `U` 代码风格符合 [standard](https://standardjs.com) 标准 +4. `U` `editable` 插件编辑状态下支持预览视频 [详细](https://github.com/jin-yufeng/mp-html/issues/286) +5. `F` 修复了 `svg` 标签内嵌 `svg` 时无法显示的问题 +6. `F` 修复了编译到支付宝和头条小程序时部分区域不可复制的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/291) +## v2.1.1(2021-04-09) +1. 修复了对 `p` 标签设置 `tag-style` 可能不生效的问题 +2. 修复了 `svg` 标签中的文本无法显示的问题 +3. 修复了使用 `editable` 插件编辑表格时可能报错的问题 +4. 修复了使用 `highlight` 插件运行到头条小程序时可能没有样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/280) +5. 修复了使用 `editable` 插件 `editable` 属性为 `false` 时会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/284) +6. 修复了 `style` 插件连续子选择器失效的问题 +7. 修复了 `editable` 插件无法修改图片和字体大小的问题 +## v2.1.0.2(2021-03-21) +修复了 `nvue` 端使用可能报错的问题 +## v2.1.0(2021-03-20) +1. `A` 增加了 [container-style](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#container-style) 属性 [详细](https://gitee.com/jin-yufeng/mp-html/pulls/1) +2. `A` 增加支持 `strike` 标签 +3. `A` `editable` 插件增加 `placeholder` 属性 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable) +4. `A` `editable` 插件增加 `insertHtml` 方法 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable) +5. `U` 外部样式支持标签名选择器 [详细](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart#setting) +6. `F` 修复了 `nvue` 端部分情况下可能不显示的问题 +## v2.0.5(2021-03-12) +1. `U` [linktap](https://jin-yufeng.gitee.io/mp-html/#/basic/event#linktap) 事件增加返回内部文本内容 `innerText` [详细](https://github.com/jin-yufeng/mp-html/issues/271) +2. `U` [selectable](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable) 属性设置为 `force` 时能够在微信 `iOS` 端生效(文本块会变成 `inline-block`) [详细](https://github.com/jin-yufeng/mp-html/issues/267) +3. `F` 修复了部分情况下竖向无法滚动的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/182) +4. `F` 修复了多次修改富文本数据时部分内容可能不显示的问题 +5. `F` 修复了 [腾讯视频](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#txv-video) 插件可能无法播放的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/265) +6. `F` 修复了 [highlight](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#highlight) 插件没有设置高亮语言时没有应用默认样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/276) by [@fuzui](https://github.com/fuzui) diff --git a/uni_modules/mp-html/components/mp-html/mp-html.vue b/uni_modules/mp-html/components/mp-html/mp-html.vue new file mode 100644 index 0000000..796762b --- /dev/null +++ b/uni_modules/mp-html/components/mp-html/mp-html.vue @@ -0,0 +1,498 @@ + + + + + diff --git a/uni_modules/mp-html/components/mp-html/node/node.vue b/uni_modules/mp-html/components/mp-html/node/node.vue new file mode 100644 index 0000000..d3457c5 --- /dev/null +++ b/uni_modules/mp-html/components/mp-html/node/node.vue @@ -0,0 +1,597 @@ +