文章目录
- 1、uniapp
- 1.uview组件安装
- 2.uview-plus组件安装
- 2、条件编译
- 3、easycom规范
- 1.组件路径符合规范
- 2.自定义easycom配置的示例
- 总结
1、uniapp
UniApp的UI组件库，如TMUI、uViewUI、FirstUI、TuniaoUI、ThorUI等，这些组件库适用于Vue3和TypeScript，支持跨平台开发，包括APP、小程序和H5。它们提供了丰富的组件和模板，旨在加速开发进程并提供流畅的用户体验。
-
TMUI
- 优质Vue3 TS Pinia Vite跨端组件库,Uni App通用组件库跨端组件库,支持NVUE原生渲染,APP(安卓,IOS),微信小程序,H5,各家小程序;享受vue3的极速体验，享受TypeScript的强类型提示，性能强劲快速,vite编译速度极快；所有组件采用最新特性，性能翻倍。让uniapp在原生，小程序应用中流畅的运行，极致丝滑的体验
- tmui3.0 高性能、高颜值、多主题、暗黑模式vue3 ui组件库,没有比它更完美！
- 组件选项类别丰富,主要对标 vue3技术栈，UI视图风格新颖
- 插件地址：tmui3.2.0 vue3 typeScript nvue全平台ui组件库
-
uview
- uView是遵循MIT (opens new window)开源协议开源的uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台,2.0已全面兼容nvue.
- uview 生态完善，主要对标 vue2 技术栈
- uview-plus 特点 生态完善，主要对标 vue3 技术栈，为 uview 的升级版
uview-plus，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具，基于uView2.0初步修改，后续会陆续修复vue3兼容性，以及组合式API改造等。
-
Taro
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
官网地址： Taro -
uni ui
uni-ui就不用说了，是DCloud提供的一个跨端ui库，想必大家都用过，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
官网地址 -
ThorUI
ThorUI 轻量、简洁、全面的移动端组件库。能大幅提升开发效率，包含uniapp与微信小程序原生版本组件库！
目前uni版组件默认支持App端(IOS和Android)、H5、微信小程序、QQ小程序、支付宝小程序、百度小程序、头条小程序。
官网插件链接
- Tuniao UI
图鸟UI，是基于uni-app进行开发的UI框架，提供丰富的组件进行快速开发，已经支持APP、H5、微信小程序，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。
特性- 包含基础常用的布局元素，flex、grid、浮动
- 完整一体的配色体系，包含 4 种色深模式，同时包含 4 套渐变配色
- 700+风格统一的图标 icon，60+精选组件，让开发者可以快速进行开发，icon 提供了单独的 npm 包，让开发者更加方便的更
- 新图鸟 UI 的 icon
- 酷炫常用的页面模板，更有让你眼前一亮的界面效果
- 图片素材语雀便捷下载，图鸟生态共同成长
- FirstUI
First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容App-Nvue、App-vue、小程序（微信、支付宝、百度、字节、QQ）、H5。UI 样式可配置，拓展灵活，轻松适应不同的设计风格，100+ 丰富的组件，能够满足移动端开发的基本需求，提供开箱即用的常用布局，极大程度节省开发成本
特性- UI 样式可配置，拓展灵活，轻松适应不同的设计风格
- 100+ 丰富的组件，能够满足移动端开发的基本需求
- 提供开箱即用的常用布局，极大程度节省开发成本
- 细致、漂亮的 UI
- 支持App-vue（Android、IOS）、App-Nvue（Android、IOS）、小程序、H5
- 支持在 vue2 或 vue3 下使用（支持在vue3组合式API下使用）。
官网地址
- Wot Design Uni
wot-design-uni组件库基于vue3+Typescript构建，参照wot design的设计规范进行开发，提供70+高质量组件，支持暗黑模式、国际化和自定义主题，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
特性- 多平台覆盖，支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等.
- 70+ 个高质量组件，覆盖移动端主流场景.
- 使用 Typescript 构建，提供良好的组件类型系统.
- 支持国际化，内置 15 种语言包.
- 提供丰富的文档和组件示例.
- 支持修改 CSS 变量实现主题定制.
- 支持暗黑模式
1.uview组件安装
-
uView依赖SCSS
- 必须要安装此插件，否则无法正常运行。
- 如果项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
- 如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装sass npm i sass -D // 安装sass-loader npm i sass-loader -D -
Hbuilder X方式
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
下载地址 -
NPM方式
// 如果您的根目录没有package.json文件的话，请先执行如下命令： // npm init -y npm install uview-ui@2.0.38 // 更新 // npm update uview-ui
-
配置步骤
- 引入uView主JS库
在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。// main.js import uView from "uview-ui"; Vue.use(uView); - 在引入uView的全局SCSS主题文件
在项目src目录的uni.scss中引入此文件。/* uni.scss */ @import 'uview-ui/theme.scss'; - 引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性<style lang="scss"> /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ @import "uview-ui/index.scss"; </style> - 配置easycom组件模式
// pages.json { "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] }- Cli模式额外配置
如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：
// vue.config.js，如没有此文件则手动创建 module.exports = { transpileDependencies: ['uview-ui'] } - Cli模式额外配置
- 引入uView主JS库
2.uview-plus组件安装
-
uView依赖SCSS
- 必须要安装此插件，否则无法正常运行。
- 如果项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
- 如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装sass npm i sass -D // 安装sass-loader npm i sass-loader -D -
Hbuilder X方式
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
下载地址：零云®uview-plus3.0重磅发布，全面的Vue3移动组件库。 -
NPM方式
// 如果您的根目录没有package.json文件的话，请先执行如下命令： // npm init -y npm install uview-plus npm install dayjs npm install clipboard
-
配置步骤
-
引入uView主JS库
在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。// main.js import uviewPlus from 'uview-plus' // #ifdef VUE3 import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) app.use(uviewPlus) return { app } } // #endif -
在引入uView的全局SCSS主题文件
在项目src目录的uni.scss中引入此文件。/* uni.scss */ @import 'uview-plus/theme.scss'; -
引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性<style lang="scss"> /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ @import "uview-plus/index.scss"; </style> -
配置easycom组件模式
// pages.json { "easycom": { "autoscan": true, // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175 "custom": { "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue", "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue", "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue" } }, // 此为本身已有的内容 "pages": [ // ...... ] } -
typescript支持
在tsconfig.json中参考如下配置增加"uview-plus/types"{ "compilerOptions": { "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "lib": ["esnext", "dom"], "types": [ "@dcloudio/types", "uview-plus/types" ] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }<template> <view style="padding: 20px;"> <!-- #ifdef VUE3 --> <up-button type="primary" text="确定"></up-button> <up-button type="primary" :plain="true" text="镂空"></up-button> <up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button> <up-button type="primary" :disabled="disabled" text="禁用"></up-button> <up-button type="primary" loading loadingText="加载中"></up-button> <up-button type="primary" icon="map" text="图标按钮"></up-button> <up-button type="primary" shape="circle" text="按钮形状"></up-button> <up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button> <up-button type="primary" size="small" text="大小尺寸"></up-button> <!-- #endif --> </view> </template> <script> export default { data() { return { disabled: true }; } }; </script>
-
2、条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
uni-app 已将常用的组件、API封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
- 大量写 if else，会造成代码执行性能低下和管理混乱。
- 编译到不同的工程后二次修改，会让后续升级变的很麻烦。
- 为每个平台重写，明明主业务逻辑又一样
- 使用方法
以#ifdef 或 #ifndef加 %PLATFORM% 开头，以#endif结尾。#ifdef：if defined 仅在某平台存在#ifndef：if not defined 除了某平台均存在%PLATFORM%：平台名称
| 条件编译写法 | 说明 |
|---|---|
#ifdef APP-PLUS需条件编译的代码#endif | 仅出现在 App 平台下的代码 |
#ifndef H5需条件编译的代码#endif | 除了 H5 平台，其它平台均存在的代码（注意if后面有个n） |
#ifdef H5 或 MP-WEIXIN需条件编译的代码#endif | 在 H5 平台或微信小程序平台存在的代码（这里只有或，不可能出现&&，因为没有交集） |
%PLATFORM%取值
| 值 | 生效条件 | 版本支持 |
|---|---|---|
| VUE3 | uni-app js引擎版用于区分vue2和3 | HBuilderX 3.2.0+ |
| VUE2 | uni-app js引擎版用于区分vue2和3 | |
| UNI-APP-X | 用于区分是否是uni-app x项目 | HBuilderX 3.9.0+ |
| uniVersion | 用于区分编译器的版本 | HBuilderX 3.9.0+ |
| APP | App | |
| APP-PLUS | uni-app js引擎版编译为App时 | |
| APP-PLUS-NVUE或APP-NVUE | App nvue 页面 | |
| APP-ANDROID | App Android 平台 | |
| APP-IOS | App iOS 平台 | |
| APP-HARMONY | App HarmonyOS Next 平台 | |
| H5 | H5（推荐使用 WEB） | |
| WEB | web（同H5） | HBuilderX 3.6.3+ |
| MP-WEIXIN | 微信小程序 | |
| MP-ALIPAY | 支付宝小程序 | |
| MP-BAIDU | 百度小程序 | |
| MP-TOUTIAO | 抖音小程序 | |
| MP-LARK | 飞书小程序 | |
| MP-QQ | QQ小程序 | |
| MP-KUAISHOU | 快手小程序 | |
| MP-JD | 京东小程序 | |
| MP-360 | 360小程序 | |
| MP | 微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序 | |
| QUICKAPP-WEBVIEW | 快应用通用(包含联盟、华为) | |
| QUICKAPP-WEBVIEW-UNION | 快应用联盟 | |
| QUICKAPP-WEBVIEW-HUAWEI | 快应用华为 |
支持的文件：
- .vue/.nvue/.uvue
- .js/.uts
- .css
- pages.json
- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
注意
- 条件编译是利用注释实现的，在不同语法里注释写法不一样，js/uts使用 // 注释、css 使用 /* 注释 */、vue/nvue/uvue 模板里使用 ；
- 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
- 对于未定义平台名称，可能是名称写错了，也可能是低版本HBuilderX还不认识这个平台。此时的条件编译，#ifdef 中的代码不会生效，而 #ifndef 中的代码会生效；
- 使用条件编译请保证编译前和编译后文件的语法正确性，即要保障无论条件编译是否生效都能通过语法校验。比如：json文件中不能有多余的逗号，js中不能重复导入；
// #ifdef MP-WEIXIN
import a as aWx from 'a/wx'
// #endif
// #ifndef MP-WEIXIN
import a as aIndex from 'a/index'
// #endif
var a
// #ifdef MP-WEIXIN
a = aWx
// #endif
// #ifndef MP-WEIXIN
a = aIndex
// #endif
3、easycom规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
只要组件路径符合规范（具体见下），就可以不用引用、注册，直接在页面中使用
1.组件路径符合规范
-
安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue
-
安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue
┌─components
│ └─comp-a
│ └─comp-a.vue 符合easycom规范的组件
└─uni_modules uni_module中符合easycom规范的组件
└─uni_modules
└─uni-list
└─components
└─uni-list
└─ uni-list.vue不管components目录下安装了多少组件，easycom打包会自动剔除没有使用的组件，对组件库的使用尤为友好。
组件库批量安装，随意使用，自动按需打包。
2.自定义easycom配置的示例
easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。
- easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。
- easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。
- 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）。
- 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
- easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
- nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom。
- vue 与 uvue 组件优先级
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| autoscan | Boolean | true | 是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件 |
| custom | Object | - | 以正则方式自定义组件匹配规则。如果autoscan不能满足需求，可以使用custom自定义匹配规则 |
如果组件，不符合easycom前述的路径规范。可以在pages.json的easycom节点中自行定义路径规范。
如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
