uni-app x使用uview-plus
一、概述
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/#/
image
二、安装uview-plus
uview-plus是免费开源的，无需授权即可商用。
1.安装依赖
打开HBuilderX，新增终端标签卡
image
在项目根目录打开终端，执行
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>
复制代码
运行，效果如下：
image
三、编写登录页面
在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 = false
uni.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
效果如下：
image
目前安装的uview-plus，版本为3.6.4，使用HBuilderX运行是，会出现很多警告信息。
这是因为uview-plus 的 SFC 代码里大量用了隐式的 this 成员，在 uni-app x + TS 严格模式 下被识别为 never，于是直接拉进项目就会报 编译期类型警告，但 运行期功能正常
uview-plus 仓库已知晓 uni-app x 的 TS 严格模式问题，3.3.8 之后计划发版解决。
因此，那些警告信息可以忽略，不影响项目正常运行。