uni-app x使用uview-plus

深邃流年 發表於 2025-10-14 16:28:00

<h1>一、概述</h1>
<div data-module="head_module">
<div class=" ">
<div class="ai-entry">
<div>
<div class="cos-space-mt-xxs" data-show="summary" data-show-ext="{"component_content":{"component_name":"markdown","component_type":"abstract","reference_type":""},"hasCredibleRef":false}">
<div class="link-wrapper_2Zcj9">
<div class="cosd-markdown">
<div class="cosd-markdown-content ">
<div class="marklang">
‌uView-Plus官网提供完整框架文档与资源下载‌，是兼容多端开发的uni-app生态框架，支持安卓、iOS、微信小程序等10个平台。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cos-divider cos-space-mt-lg"> </div>
<div class="meet-demand-expand_2EgAi" data-module="content">
<div class="accordion-panels_6Tmay cos-space-mt-lg" data-module="content">
<div class="cos-accordion">
<div class="cos-accordion-panel accordion-panels-link_15js6 ">
<div class="cos-accordion-panel-header">
<div class="accordion-panels-link-header_3iv03">
<div>uView-Plus官网及框架概述</div>
</div>
</div>
<div class="cos-accordion-panel-content">
<div class=" accordion-panels-content_3WJL9 cos-space-pb-none ">
<div id="1" class="ai-entry">
<div data-show="block_summary" data-show-ext="{"component_content":{"component_name":"markdown","component_type":"abstract","reference_type":""},"hasCredibleRef":false}">
<div class="link-wrapper_2Zcj9">
<div class="cosd-markdown">
<div class="cosd-markdown-content ">
<div class="marklang"><ol>
<li>‌官网入口‌：主文档站（uiadmin.net）|GitHub Pages（ijry.github.io）。 包含组件文档、工具库说明及快速体验模板入口‌‌1‌‌2</li>
<li>‌核心特性‌：
<ul>
<li>基于uView2.0升级，支持Vue3组合式API开发。‌‌1</li>
<li>提供180+组件库，覆盖表单、布局、图表等场景。‌‌3</li>
<li>集成网络请求、路由跳转等工具库。‌‌4</li>

</ul>

</li>
<li>‌多端兼容‌： 一次编写即可发布到Android、iOS、微信/QQ/支付宝小程序等10个平台，H5适配度达95%‌‌</li>

</ol>
 
官网地址：https://uview-plus.jiangruyi.com/
官网组件预览：https://uview-plus.jiangruyi.com/h5/#/
<img src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251014161023989-759863103.png" alt="image" loading="lazy">
<h1>二、安装uview-plus</h1>
uview-plus是免费开源的，无需授权即可商用。
<h2>1.安装依赖</h2>
打开HBuilderX，新增终端标签卡
<img src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251014161306557-1154532670.png" alt="image" loading="lazy">
在项目根目录打开终端，执行
<div class="cnblogs_code">
<pre>npm install uview-plus
npm install dayjs
npm install clipboard</pre>
</div>
<h2>2. 配置 main.js</h2>
在 main.js 中引入并使用 uview-plus：
<div class="cnblogs_code">
<pre>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
}
}</pre>
</div>
<h2>3. 引入全局样式</h2>
在 uni.scss 中添加：
<div class="cnblogs_code">
<pre>@import 'uview-plus/theme.scss';</pre>
</div>
最后一行，增加即可
 
在 App.vue 的 <style lang="scss"> 中添加：
<div class="cnblogs_code">
<pre>@import 'uview-plus/index.scss';</pre>
</div>
App.vue默认没有scss，最后一行增加以下代码
<div class="cnblogs_code">
<pre><style lang="scss">
@import 'uview-plus/index.scss';
</style></pre>
</div>
<h2>4. 配置 easycom 自动引入</h2>
在 pages.json 中添加：
<div class="cnblogs_code">
<pre>"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"
}
}</pre>
</div>
最后几行，增加即可
 
<h2>5. 配置 manifest.json（可选）</h2>
如开发微信小程序，在 manifest.json 的源码视图中添加：
<div class="cnblogs_code">
<pre>"mp-weixin": {
"mergeVirtualHostAttributes": true
}</pre>
</div>
 
<h2>6. 重启 HBuilderX</h2>
完成上述配置后，重启 HBuilderX 使配置生效。
 
<h2>7. 测试使用</h2>
在页面中直接使用组件，例如：
<div class="cnblogs_code">
<pre><u-button type="primary">测试按钮</u-button></pre>
</div>
这里，直接在index.uvue里面，增加一行，例如：
<div class="cnblogs_code">
<pre><template>
<view>
 <image class="logo" src="/static/logo.png"></image>
 <text class="title">{{title}}</text>
 <u-button type="primary">测试按钮</u-button>
</view>
</template></pre>
</div>
运行，效果如下：
<img src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251014162224993-1958713730.png" alt="image" loading="lazy">
 
<h1>三、编写登录页面</h1>
在pages目录，新建一个文件夹login，然后在login里面，新增文件login.uvue，内容如下：
<div class="cnblogs_code">
<pre><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></pre>
</div>
编辑文件pages.json，增加login路由
<div class="cnblogs_code">
<pre>"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"
 }
]</pre>
</div>
访问页面：http://localhost:5173/#/pages/login/login
效果如下：
<img src="https://img2024.cnblogs.com/blog/1341090/202510/1341090-20251014162654779-1664692639.png" alt="image" loading="lazy">
目前安装的uview-plus，版本为3.6.4，使用HBuilderX运行是，会出现很多警告信息。
这是因为uview-plus 的 SFC 代码里大量用了隐式的 this 成员，在 uni-app x + TS 严格模式下被识别为 never，于是直接拉进项目就会报编译期类型警告，但运行期功能正常
uview-plus 仓库已知晓 uni-app x 的 TS 严格模式问题，3.3.8 之后计划发版解决。
因此，那些警告信息可以忽略，不影响项目正常运行。
 
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> 
来源：https://www.cnblogs.com/xiao987334176/p/19141406

頁: [1]

琼殿技术论坛's Archiver

uni-app x使用uview-plus