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

在這里插入圖片描述

安裝依賴庫

在這里插入圖片描述

npm init -y
npm i dayjs
npm i clipboard

在這里插入圖片描述
在這里插入圖片描述

修改 vite.config.js

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

安裝 :rollup-plugin-visualizer

npm i rollup-plugin-visualizer -D 

配置easycom組件模式

在這里插入圖片描述

typescript支持

在這里插入圖片描述
在這里插入圖片描述

測試

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

在這里插入圖片描述
在這里插入圖片描述

補充:清理日志

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
好了,這樣日志舊干凈了。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/95384.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/95384.shtml
英文地址,請注明出處:http://en.pswp.cn/web/95384.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

第4章:內存分析與堆轉儲

本章概述內存分析是 Java 應用性能調優的核心環節之一。本章將深入探討如何使用 VisualVM 進行內存分析,包括堆內存監控、堆轉儲生成與分析、內存泄漏檢測以及內存優化策略。通過本章的學習,你將掌握識別和解決內存相關問題的專業技能。學習目標理解 Jav…

面經分享一:分布式環境下的事務難題:理論邊界、實現路徑與選型邏輯

一、什么是分布式事務? 分布式事務是指事務的參與者、支持事務的服務器、資源服務器以及事務管理器分別位于不同的分布式系統的不同節點之上。 一個典型的例子就是跨行轉賬: 用戶從銀行A的賬戶向銀行B的賬戶轉賬100元。 這個操作包含兩個步驟: 從A賬戶扣減100元。 向B賬戶…

C++的演化歷史

C是一門這樣的編程語言: 兼顧底層計算機硬件系統和高層應用抽象機制從實際問題出發,注重零成本抽象、性能、可移植性、與C兼容語言特性和細節很多,學習成本較高,是一門讓程序員很難敢說精通的語言 C是自由的,支持5種…

Qt6實現繪圖工具:12種繪圖工具全家桶!這個項目滿足全部2D場景

項目概述 一個基于Qt框架開發的專業繪圖工具,實現了完整的2D圖形繪制、編輯和管理功能。該項目采用模塊化設計,包含圖形繪制、圖層管理、命令模式撤銷重做、用戶界面等多個子系統,是學習現代C++和Qt框架的最佳實踐。 核心功能特性 12種專業繪圖工具 多圖層繪制系統 完整的…

Linux驅動開發學習筆記

第1章 Linux驅動開發的方式mmap映射型設計方法。【不推薦】將芯片上的物理地址映射到用戶空間的虛擬地址上,用戶操作虛擬地址來操作硬件。使用文件操作集(file_operatiopns)設計方法。【極致推薦】platfrom總線型設置方法。【比較流行】設備樹。【推薦】第2章 Linux…

mac中進行適用于IOS的靜態庫構建

前沿: 進行C開發完成之后,需要將代碼編譯成靜態庫,并且在IOS的手機系統中執行,因此記錄該實現過程. 1主要涉及內容 1.1 整體文件架構 gongyonglocalhost Attention % tree -L 2 . ├── build │ ├── __.SYMDEF │ ├── cmake_install.cmake │ ├── CMakeCache…

C++二維數組的前綴和

C二維數組的前綴和的方法很簡單&#xff0c;可以利用公式res[i][j]arr[i][j]res[i-1][j]prefix[i][j-1]-res[i-1][j-1]。輸入4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16輸出1 3 6 10 6 14 24 36 15 33 54 78 28 60 96 136#include<bits/stdc.h> using namespace std; int…

Wifi開發上層學習1:實現一個wifi搜索以及打開的app

Wifi開發上層學習1&#xff1a;實現一個wifi搜索以及打開的app 文章目錄Wifi開發上層學習1&#xff1a;實現一個wifi搜索以及打開的app背景demo實現1.添加系統權限以及系統簽名2.布局配置3.邏輯設計3.1 wifi開關的實現3.2 wifi掃描功能3.3 連接wifi總結一、WiFi 狀態控制接口二…

【DSP28335 入門教程】定時器中斷:為你的系統注入精準的“心跳”

大家好&#xff0c;歡迎來到 DSP28335 的核心精講系列。我們已經掌握了如何通過外部中斷來響應“外部事件”&#xff0c;但系統內部同樣需要一個精準的節拍器來處理“內部周期性任務”。單純依靠 DELAY_US() 這樣的軟件延時&#xff0c;不僅精度差&#xff0c;而且會在延時期間…

從零開始:用代碼解析區塊鏈的核心工作原理

區塊鏈技術被譽為信任的機器&#xff0c;它正在重塑金融、供應鏈、數字身份等眾多領域。但對于許多開發者來說&#xff0c;它仍然像一個神秘的黑盒子。今天&#xff0c;我們將拋開炒作的泡沫&#xff0c;深入技術本質&#xff0c;用大約100行Python代碼構建一個簡易的區塊鏈&am…

網絡通信IP細節

目錄 1.通信的NAT技術 2.代理服務器 3.內網穿透和內網打洞 1.通信的NAT技術 NAT技術產生的背景是我們為了解決IPV4不夠用的問題&#xff0c;NAT在通信的時候可以對IP將私網IP轉化為公網IP&#xff0c;全局IP要求唯一&#xff0c;但是私人IP不是唯一的。 將報文發給路由器進行…

國內真實的交換機、路由器和分組情況

一、未考慮擁擠情況理想狀態的網絡通信 前面我對骨干網&#xff1a; 宜春城區SDH網圖分析-CSDN博客 數據鏈路層MAC傳輸&#xff1a; 無線通信網卡底層原理&#xff08;Inter Wi-Fi AX201&#xff09;_ax201ngw是cnvio轉pci-e-CSDN博客 物理層、數據鏈路層、網絡層及傳輸層…

atomic常用類方法

Java中的java.util.concurrent.atomic包提供了多種原子操作工具類&#xff0c;以下是核心類及其方法&#xff1a;?1. AtomicBoolean??方法?&#xff1a;get()&#xff1a;獲取當前值set(boolean newValue)&#xff1a;強制設置值compareAndSet(boolean expect, boolean upd…

算法題打卡力扣第3題:無重復字符的最長子串(mid)

文章目錄題目描述解法一&#xff1a;暴力解解法二&#xff1a;滑動窗口題目描述 解法一&#xff1a;暴力解 遍歷每一個可能的子串&#xff0c;然后逐一判斷每個子串中是否有重復字符。 具體步驟&#xff1a; 使用兩層嵌套循環來生成所有子串的起止位置&#xff1a; 外層循環 i…

HTML5 簡介和基礎骨架

一、HTML5 簡介HTML5 是 HTML&#xff08;超文本標記語言&#xff09;的第五個主要版本&#xff0c;于 2014 年 10 月由 W3C&#xff08;萬維網聯盟&#xff09;正式發布。它不僅是對 HTML4.01 和 XHTML 的升級&#xff0c;更是一套完整的 Web 技術標準&#xff0c;包含了新的標…

.NET技術深度解析:現代企業級開發指南

每日激勵&#xff1a; “不要一直責怪過去的自己&#xff0c;他曾經站在霧里也很迷茫” &#x1f31f; Hello&#xff0c;我是蔣星熠Jaxonic&#xff01; &#x1f308; 在浩瀚無垠的技術宇宙中&#xff0c;我是一名執著的星際旅人&#xff0c;用代碼繪制探索的軌跡。 &#x1…

蘋果手機文本轉音頻,自行制作背誦素材

當你在學習一段專業內容或者背誦重要知識點時&#xff0c;是不是有時會覺得眼睛看久了疲憊&#xff0c;而且記憶效果也不太理想呢&#xff1f;利用手頭的蘋果手機或iPad&#xff0c;你可以輕松將文本內容生成音頻文件&#xff0c;然后隨時隨地反復聽&#xff0c;這對于備考人士…

電子電子技術知識------MOSFET管

電子電子技術知識------MOSFET管前言一、結構與符號二、工作原理1.小功率MOSFET&#xff08;橫向導電&#xff09;2.電力MOS管三、基本特性總結前言 MOSFET是電力場效應晶體管的英文簡寫&#xff0c;又稱功率mos管&#xff0c;mos管 一、結構與符號 二、工作原理 1.小功率M…

仿真波導中超短脈沖傳輸中的各種非線性效應所產生的超連續譜

在波導中&#xff0c;超短脈沖傳輸時會受到各種非線性效應的影響&#xff0c;從而產生超連續譜。這些非線性效應包括自相位調制&#xff08;SPM&#xff09;、交叉相位調制&#xff08;XPM&#xff09;、四波混頻&#xff08;FWM&#xff09;等。基于MATLAB的仿真程序&#xff…

docker-compose的使用

目錄 1-查看容器 2-查看docker鏡像 3-運行兩個容器 4-進入idea 編寫docker-compose文件中的內容 5-編寫配置文件 6-運行 7-docker-compose中的一些命令 啟動服務 關閉服務 查看正在運行的容器 查看日志 重構新的服務 指令docker-compose 文件名 停止已運行的服務 啟動 重啟 1-查…