前言:
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)查實,本站將立刻刪除。