可以建站的網(wǎng)站,住小幫 家居裝修設(shè)計平臺,宇說建筑網(wǎng)站,知名自適應(yīng)網(wǎng)站建設(shè)哪家好一、概述?uView-Plus官網(wǎng)提供完整框架文檔與資源下載?#xff0c;是兼容多端開發(fā)的uni-app生態(tài)框架#xff0c;支持安卓、iOS、微信小程序等10個平臺。uView-Plus官網(wǎng)及框架概述?官網(wǎng)入口?#xff1a;主文檔站#xff08;uiadmin.net#xff09;|GitHub Pages#xf…一、概述?uView-Plus官網(wǎng)提供完整框架文檔與資源下載?是兼容多端開發(fā)的uni-app生態(tài)框架支持安卓、iOS、微信小程序等10個平臺。uView-Plus官網(wǎng)及框架概述?官網(wǎng)入口?主文檔站uiadmin.net|GitHub Pagesijry.github.io。包含組件文檔、工具庫說明及快速體驗?zāi)０迦肟??1??2?核心特性?基于uView2.0升級支持Vue3組合式API開發(fā)。??1提供180組件庫覆蓋表單、布局、圖表等場景。??3集成網(wǎng)絡(luò)請求、路由跳轉(zhuǎn)等工具庫。??4?多端兼容?一次編寫即可發(fā)布到Android、iOS、微信/QQ/支付寶小程序等10個平臺H5適配度達95%??官網(wǎng)地址https://uview-plus.jiangruyi.com/官網(wǎng)組件預(yù)覽https://uview-plus.jiangruyi.com/h5/#/image二、安裝uview-plusuview-plus是免費開源的無需授權(quán)即可商用。1.安裝依賴打開HBuilderX新增終端標簽卡image在項目根目錄打開終端執(zhí)行npm install uview-plusnpm install dayjsnpm install clipboard2. 配置 main.js在 main.js 中引入并使用 uview-plus復(fù)制代碼import App from ./App.uvueimport { createSSRApp } from vueimport uviewPlus from uview-plusexport function createApp() {const app createSSRApp(App)app.use(uviewPlus)return {app}}復(fù)制代碼3. 引入全局樣式在 uni.scss 中添加import uview-plus/theme.scss;最后一行增加即可在 App.vue 的 style langscss 中添加import uview-plus/index.scss;App.vue默認沒有scss最后一行增加以下代碼style langscssimport uview-plus/index.scss;/style4. 配置 easycom 自動引入在 pages.json 中添加復(fù)制代碼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}}復(fù)制代碼最后幾行增加即可5. 配置 manifest.json可選如開發(fā)微信小程序在 manifest.json 的源碼視圖中添加mp-weixin: {mergeVirtualHostAttributes: true}6. 重啟 HBuilderX完成上述配置后重啟 HBuilderX 使配置生效。7. 測試使用在頁面中直接使用組件例如u-button typeprimary測試按鈕/u-button這里直接在index.uvue里面增加一行例如復(fù)制代碼templateviewimage classlogo src/static/logo.png/imagetext classtitle{{title}}/textu-button typeprimary測試按鈕/u-button/view/template復(fù)制代碼運行效果如下image三、編寫登錄頁面在pages目錄新建一個文件夾login然后在login里面新增文件login.uvue內(nèi)容如下復(fù)制代碼templateview class!-- 導(dǎo)航欄 --u-navbar title用戶登錄 /!-- 內(nèi)容區(qū) --view classcontent!-- 頭像 --u-avatar :srclogo size80/u-avatar!-- 表單 --u--form :modelform labelPositionleftu--input v-modelform.username placeholder請輸入用戶名 prefixIconaccount /u--input v-modelform.password placeholder請輸入密碼 typepassword prefixIconlock //u--form!-- 按鈕 --u-button text登錄 typeprimary clicklogin :loadingloading /!-- 鏈接 --view classlinksu-cell title忘記密碼 isLink clickgotoForget /u-cell title注冊賬號 isLink clickgotoRegister //view/view/view/templatescriptexport 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 falseuni.showToast({ title: 登錄成功 })}, 1500)},gotoForget() {uni.navigateTo({ url: /pages/forget/index })},gotoRegister() {uni.navigateTo({ url: /pages/register/index })}}}/scriptstyle scoped.content {padding: 40rpx;display: flex;flex-direction: column;align-items: center;}.links {margin-top: 30rpx;width: 100%;}/style復(fù)制代碼編輯文件pages.json增加login路由復(fù)制代碼pages: [ //pages數(shù)組中第一項表示應(yīng)用啟動頁參考https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html{path: pages/index/index,style: {navigationBarTitleText: uni-app x}},{path: pages/login/login}]復(fù)制代碼訪問頁面http://localhost:5173/#/pages/login/login效果如下image目前安裝的uview-plus版本為3.6.4使用HBuilderX運行是會出現(xiàn)很多警告信息。這是因為uview-plus 的 SFC 代碼里大量用了隱式的 this 成員在 uni-app x TS 嚴格模式 下被識別為 never于是直接拉進項目就會報 編譯期類型警告但 運行期功能正常uview-plus 倉庫已知曉 uni-app x 的 TS 嚴格模式問題3.3.8 之后計劃發(fā)版解決。因此那些警告信息可以忽略不影響項目正常運行。