一、概述
uView-Plus官网提供完整框架文档与资源下载,是兼容多端开发的uni-app生态框架,支持安卓、iOS、微信小程序等10个平台。
uView-Plus官网及框架概述
- 官网入口:主文档站(uiadmin.net)|GitHub Pages(ijry.github.io)。
包含组件文档、工具库说明及快速体验模板入口12 - 核心特性:
- 基于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,新增终端标签卡
在项目根目录打开终端,执行
npm install uview-plus npm install dayjs npm install clipboard
2. 配置 main.js
在 main.js 中引入并使用 uview-plus:
import App from './App.uvue'import { createSSRApp } from 'vue'import uviewPlus from 'uview-plus'export function createApp() {const app = createSSRApp(App)app.use(uviewPlus)return {app} }
3. 引入全局样式
在 uni.scss 中添加:
@import 'uview-plus/theme.scss';
最后一行,增加即可
在 App.vue 的 <style lang="scss"> 中添加:
@import 'uview-plus/index.scss';
App.vue默认没有scss,最后一行增加以下代码
<style lang="scss">@import 'uview-plus/index.scss'; </style>
4. 配置 easycom 自动引入
在 pages.json 中添加:
"easycom": {"autoscan": true,"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"} }
最后几行,增加即可
5. 配置 manifest.json(可选)
如开发微信小程序,在 manifest.json 的源码视图中添加:
"mp-weixin": {"mergeVirtualHostAttributes": true }
6. 重启 HBuilderX
完成上述配置后,重启 HBuilderX 使配置生效。
7. 测试使用
在页面中直接使用组件,例如:
<u-button type="primary">测试按钮</u-button>
这里,直接在index.uvue里面,增加一行,例如:
<template><view><image class="logo" src="/static/logo.png"></image><text class="title">{{title}}</text><u-button type="primary">测试按钮</u-button></view> </template>
运行,效果如下:
三、编写登录页面
在pages目录,新建一个文件夹login,然后在login里面,新增文件login.uvue,内容如下:
<template><view class=""><!-- 导航栏 --><u-navbar title="用户登录" /><!-- 内容区 --><view class="content"><!-- 头像 --><u-avatar :src="logo" size="80"></u-avatar><!-- 表单 --><u--form :model="form" labelPosition="left"><u--input v-model="form.username" placeholder="请输入用户名" prefixIcon="account" /><u--input v-model="form.password" placeholder="请输入密码" type="password" prefixIcon="lock" /></u--form><!-- 按钮 --><u-button text="登录" type="primary" @click="login" :loading="loading" /><!-- 链接 --><view class="links"><u-cell title="忘记密码?" isLink @click="gotoForget" /><u-cell title="注册账号" isLink @click="gotoRegister" /></view></view></view> </template><script>export default {data() {return {title: 'Hello',logo: '/static/logo.png',loading: false,form: {username: '',password: '',}}},onLoad() {},methods: {login() {if (!this.form.username) {uni.showToast({ title: '请输入用户名', icon: 'none' })return}this.loading = true// 模拟登录请求setTimeout(() => {this.loading = falseuni.showToast({ title: '登录成功' })}, 1500)},gotoForget() {uni.navigateTo({ url: '/pages/forget/index' })},gotoRegister() {uni.navigateTo({ url: '/pages/register/index' })}}} </script><style scoped>.content {padding: 40rpx;display: flex;flex-direction: column;align-items: center;}.links {margin-top: 30rpx;width: 100%;} </style>
编辑文件pages.json,增加login路由
"pages": [ //pages数组中第一项表示应用启动页,参考:https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app x"}},{"path": "pages/login/login"}]
访问页面:http://localhost:5173/#/pages/login/login
效果如下: