uni-app x使用uview-plus

一、概述

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

 

uView-Plus官网及框架概述

1. ‌官网入口‌：主文档站（uiadmin.net）|GitHub Pages（ijry.github.io）。
   包含组件文档、工具库说明及快速体验模板入口‌‌1‌‌2
2. ‌核心特性‌：
   • 基于uView2.0升级，支持Vue3组合式API开发。‌‌1
   • 提供180+组件库，覆盖表单、布局、图表等场景。‌‌3
   • 集成网络请求、路由跳转等工具库。‌‌4
3. ‌多端兼容‌：
   一次编写即可发布到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 = 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

效果如下：