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