uni-app x使用uview-plus

一、概述

‌uView-Plus官网提供完整框架文档与资源下载‌，是兼容多端开发的uni-app生态框架，支持安卓、iOS、微信小程序等10个平台。
 uView-Plus官网及框架概述

• ‌官网入口‌：主文档站（uiadmin.net）|GitHub Pages（ijry.github.io）。
  包含组件文档、工具库说明及快速体验模板入口‌‌1‌‌2
  
• ‌核心特性‌：
  
  
  
  • 基于uView2.0升级，支持Vue3组合式API开发。‌‌1
    
  • 提供180+组件库，覆盖表单、布局、图表等场景。‌‌3
    
  • 集成网络请求、路由跳转等工具库。‌‌4
    
  
  
• ‌多端兼容‌：
  一次编写即可发布到Android、iOS、微信/QQ/支付宝小程序等10个平台，H5适配度达95%‌‌
  

 
官网地址：https://uview-plus.jiangruyi.com/
官网组件预览：https://uview-plus.jiangruyi.com/h5/#/

二、安装uview-plus

uview-plus是免费开源的，无需授权即可商用。
1.安装依赖

打开HBuilderX，新增终端标签卡

在项目根目录打开终端，执行

1. npm install uview-plus
2. npm install dayjs
3. npm install clipboard

复制代码

2. 配置 main.js

在 main.js 中引入并使用 uview-plus：

1. import App from './App.uvue'
3. import { createSSRApp } from 'vue'
5. import uviewPlus from 'uview-plus'
7. export function createApp() {
8.     const app = createSSRApp(App)
9.     app.use(uviewPlus)
10.     return {
11.         app
12.     }
13. }

复制代码

3. 引入全局样式

在 uni.scss 中添加：

1. @import 'uview-plus/theme.scss';

复制代码

最后一行，增加即可
 

在 App.vue 的 [/code]4. 配置 easycom 自动引入

在 pages.json 中添加：

1. "easycom": {
2.   "autoscan": true,
3.   "custom": {
4.     "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
5.     "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
6.     "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
7.   }
8. }

复制代码

最后几行，增加即可
 
5. 配置 manifest.json（可选）

如开发微信小程序，在 manifest.json 的源码视图中添加：

1. "mp-weixin": {
2.   "mergeVirtualHostAttributes": true
3. }

复制代码

 
6. 重启 HBuilderX

完成上述配置后，重启 HBuilderX 使配置生效。
 
7. 测试使用

在页面中直接使用组件，例如：

1. <u-button type="primary">测试按钮</u-button>

复制代码

这里，直接在index.uvue里面，增加一行，例如：

1.                     {{title}}        <u-button type="primary">测试按钮</u-button>   

复制代码

运行，效果如下：

 
三、编写登录页面

在pages目录，新建一个文件夹login，然后在login里面，新增文件login.uvue，内容如下：

1. <template>
2.     <view class="">
3.         
4.         <u-navbar title="用户登录" />
6.         
7.         <view class="content">
8.             
9.             <u-avatar :src="logo" size="80"></u-avatar>
11.             
12.             <u--form :model="form" labelPosition="left">
13.                 <u--input v-model="form.username" placeholder="请输入用户名" prefixIcon="account" />
14.                 <u--input v-model="form.password" placeholder="请输入密码" type="password" prefixIcon="lock" />
15.             </u--form>
17.             
18.             <u-button text="登录" type="primary" @click="login" :loading="loading" />
20.             
21.             <view class="links">
22.                 <u-cell title="忘记密码？" isLink @click="gotoForget" />
23.                 <u-cell title="注册账号" isLink @click="gotoRegister" />
24.             </view>
25.         </view>
26.     </view>
27. </template>

复制代码

编辑文件pages.json，增加login路由

1. "pages": [ //pages数组中第一项表示应用启动页，参考：https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html
2.         {
3.             "path": "pages/index/index",
4.             "style": {
5.                 "navigationBarTitleText": "uni-app x"
6.             }
7.         },
8.         {
9.             "path": "pages/login/login"
10.         }
11.     ]

复制代码

访问页面：http://localhost:5173/#/pages/login/login
效果如下：

目前安装的uview-plus，版本为3.6.4，使用HBuilderX运行是，会出现很多警告信息。
这是因为uview-plus 的 SFC 代码里大量用了隐式的 this 成员，在 uni-app x + TS 严格模式 下被识别为 never，于是直接拉进项目就会报 编译期类型警告，但 运行期功能正常
uview-plus 仓库已知晓 uni-app x 的 TS 严格模式问题，3.3.8 之后计划发版解决。
因此，那些警告信息可以忽略，不影响项目正常运行。
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！