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