HBuilder X 4.76 开发微信小程序集成 uview-plus

简介

本文记录了在HBuilder中创建并配置uni-app项目的完整流程。

首先创建项目并测试运行,确认无报错后添加uView-Plus组件库。

随后修改了main.js、uni.scss、App.vue等核心文件,配置manifest.json并安装dayjs、clipboard等依赖库。

通过调整vite.config.js和添加rollup-plugin-visualizer插件优化构建配置,同时启用easycom组件模式。

最后完成了TypeScript支持配置,并通过多张截图展示了各组件在不同主题色下的测试效果,验证了整个项目的正常运行。

整个过程涵盖了从初始化到UI组件集成的完整开发环节。

创建项目

测试运行


需要在HBuilder 中补上AppId

运行正常,没有报错。

添加 uview-plus

打开地址 https://ext.dcloud.net.cn/plugin?name=uview-plus



修改 main.js

修改 uni.scss

修改App.vue

配置manifest

安装依赖库

bash 复制代码
npm init -y
npm i dayjs
npm i clipboard


修改 vite.config.js



安装 :rollup-plugin-visualizer

bash 复制代码
npm i rollup-plugin-visualizer -D 

配置easycom组件模式

typescript支持


测试






补充:清理日志



好了,这样日志旧干净了。

相关推荐
一几文3 小时前
2026年上半年软考高级-系统架构设计师考试真题回顾与解析-综合知识选择题6
小程序·架构·系统架构·软考高级·软考·it证书
zhangminghuan7 小时前
微信小程序开发核心知识点全景解析(前端必备硬核基础)
前端·微信小程序·小程序
游戏开发爱好者87 小时前
开心上架是什么,一站式 Apple 开发者工作台总览
android·小程序·https·uni-app·iphone·webview
sltin9 小时前
需求到落地:我如何在微信小程序里实现证件照换底、隐私打码与水印相机
数码相机·微信小程序·小程序
软件聚导航11 小时前
软件聚导航-前端工程师的“小家庭”,工具与生活并存
人工智能·小程序·学习方法·图片压缩
咸虾米_1 天前
小程序流量主哪种广告最赚钱?各类广告收益与实操建议
微信小程序·小程序·小程序开发·流量主广告
show4331 天前
2026小程序端AI配音技术实现:TTS多音色引擎集成与MP3生成性能优化
人工智能·性能优化·小程序
00后程序员张1 天前
Windows / Linux / Mac 上不用 Xcode 把 IPA 上传到 App Store,upload 命令详解
android·ios·小程序·https·uni-app·iphone·webview
梓彤科技2 天前
样式已经更新,用户仍看到旧页面?武汉网站建设中的缓存版本控制
搜索引擎·小程序·seo·网站开发·geo
mashirro2 天前
记一次基于ruoyi-vue新增小程序服务模块,小程序登陆相关
vue.js·小程序·mybatis