前言：
uni-app 是一個(gè)使用 Vue.js?開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web、以及各種小程序、快應(yīng)用等多個(gè)平臺(tái)。
本文通過(guò)開(kāi)發(fā)一個(gè)簡(jiǎn)單頁(yè)面，總結(jié)了一下uni-app開(kāi)發(fā)流程。
- uni-app項(xiàng)目結(jié)構(gòu)
通過(guò)HBuilderX 新建項(xiàng)目，可以選擇不同模板，如圖：
新建項(xiàng)目
項(xiàng)目結(jié)構(gòu)
pages.json 文件用來(lái)對(duì) uni-app 進(jìn)行全局配置，設(shè)置頁(yè)面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。
manifest.json 文件是應(yīng)用的配置文件，用于指定應(yīng)用的名稱(chēng)、圖標(biāo)、權(quán)限等。HBuilderX 創(chuàng)建的工程此文件在根目錄，CLI 創(chuàng)建的工程此文件在 src 目錄。
main.js是 uni-app 的入口文件，主要作用是初始化vue實(shí)例、定義全局組件、使用需要的插件如 vuex。
uni.scss文件的用途是為了方便整體控制應(yīng)用的風(fēng)格。預(yù)置了一批scss變量，比如按鈕顏色、邊框風(fēng)格。uni.scss是一個(gè)特殊文件，在代碼中無(wú)需 import 這個(gè)文件即可在scss代碼中使用這里的樣式變量。
App.vue是uni-app的主組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的，是頁(yè)面入口文件。
這個(gè)文件的作用包括：調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲(chǔ)globalData應(yīng)用生命周期僅可在App.vue中監(jiān)聽(tīng)，在頁(yè)面監(jiān)聽(tīng)無(wú)效。
通過(guò)開(kāi)發(fā)應(yīng)用首頁(yè)，進(jìn)行uni-app學(xué)習(xí)。實(shí)現(xiàn)效果：
- 新建頁(yè)面
項(xiàng)目->右鍵->新建頁(yè)面,選擇相應(yīng)模板，默認(rèn)頁(yè)面自動(dòng)注冊(cè)，也可以直接修改pages.json文件，是否顯示標(biāo)題欄，標(biāo)題欄樣式，是否有返回按鈕，搜索框等。
pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)面。uni-app官網(wǎng) (dcloud.net.cn)
https://uniapp.dcloud.net.cn/collocation/pages.html#pages
配置tabbar 設(shè)置顯示文字、圖片、字體樣式，點(diǎn)擊后樣式等。
- 擴(kuò)展組件引用
引用組件需要導(dǎo)入 – 注冊(cè) – 使用三個(gè)步驟
- 從插件市場(chǎng) https://ext.dcloud.net.cn/ 下載或者從uni-app demo中uni_modules 中拷貝，如宮格組件 。
拷貝到項(xiàng)目components文件夾
import uniGrid from '@/components/uni-grid/uni-grid.vue'
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
注冊(cè)
components: {
uniGrid,
uniGridItem
}
使用
<uni-grid :column="3" :showBorder="false" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in menus" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="text">{{item}}</text>
</view>
</uni-grid-item>
</uni-grid>
- 網(wǎng)絡(luò)請(qǐng)求
這樣通過(guò)瀏覽器就可以預(yù)覽效果了。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
