[TOC] [TOC] # 第一個uni-app項目 這部分的項目文件為： * [ ] 01-UniAPP Hello World * [ ] 02-UniAPP Tabs # 目錄結構 一個uni-app工程，默認包含如下目錄及文件：  圖 uni-app工程文件目錄及說明 * components目錄：組件文件存放目錄 * pages目錄：業務頁面文件存放目錄 * static目錄：存放應用引用靜態資源（如圖片、視頻等）的地方，注意：靜態資源只能存放于此 * unpackage：編譯的臨時文件目錄 * App.vue：應用配置，用來配置App全局樣式以及監聽應用的生命周期 * main.js：Vue初始化入口文件 * manifest.json：配置應用名稱、appid、logo、版本等打包信息 * pages.json：配置頁面路由、導航條、選項卡等頁面類信息 # 頁面文件規范 為了實現微信小程序、原生App的跨端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發規范： > 頁面規范 - [Vue 單文件組件 (SFC) 規范 > ](http://doc.vue-js.com/v2/guide/single-file-components.html) .vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每個 .vue 文件包含三種類型的頂級語言塊`<template>`、`<script>` 和`<style>`。 ```html <template> </template> <script> </script> <style> </style> ``` * `template`語言塊用于編寫頁面的定義代碼 * script語言塊編寫頁面的模塊Javascript代碼 * style語言塊用于編寫樣式定義腳本 # 什么是組件 > 組件是視圖層的基本組成單元 一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。 ```html <template> <view> <tagname property="value"> content </tagname> </view> </template> ``` **Tips** * 所有組件與屬性名都是小寫，單詞之間以連字符-連接。 * 根節點為`<template>`，這個`<template>`下只能有一個根組件，即`<template>`元素的孩子節點構成一顆樹，樹只有一個根節點。 ## 相關文檔 > 框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。 > [uni-app組件使用規范](http://uniapp.dcloud.io/component/README) ## 配置文件 ### 配置文件概述 pages.json 文件用來對 uni-app 進行全局配置（globalStyle）、決定頁面文件的路徑和窗口表現（pages）、設置底部 tab 的表現（tabBar）和條件啟動（condition）。 圖表 4?4 配置文件pages.json 的配置項列表 | 選項 | 說明 | | --- | --- | | globalStyle | 設置默認頁面的窗口表現 | | pages | 設置頁面路徑及窗口表現，pages數組中第一項表示應用啟動頁，項目中出現的所有的頁面必須在pages中列出 | | tabBar | 設置底部 tab 的表現 | | condition | 啟動模式配置，僅開發階段有效，方便給頁面傳遞參數測試功能 | * 完整的配置說明，參考配置文件一章。 ### 全局配置 配置文件的globalStyle節用于設置整個APP的全局設置，如頂部當航欄的文字顏色、標背景色以及整個頁面的背景色。 ```html "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#FF0000", "backgroundColor": "#F8F8F8" }, ``` 這些配置如果某個頁面想改變默認值，需要在特定頁面的配置中重載，例如將pages/index/index頁面的導航欄的背景色（navigationBarBackgroundColor）改成綠色（#00FF00），需要修改style屬性的值。 ```html { "pages": [ //pages數組中第一項表示應用啟動頁 { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁", "navigationBarBackgroundColor": "#00FF00" } }, … ``` ### 模式配置 假設已經增加了3個頁面 * pages/home/index * pages/home/hello * pages/home/about 根據約定pages數組中第一項表示應用啟動頁 ```html "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "首頁", "navigationBarBackgroundColor": "#00FF00" } }, { "path": "pages/home/hello", "style": { "navigationBarTitleText": "Hello!" } }, { "path": "pages/home/about", //重載全局設置 "style": { "navigationBarTextStyle": "black", "navigationBarTitleText": "About", "navigationBarBackgroundColor": "#F00", "backgroundColor": "#F8F8F8" } } ], ``` 那么，在開發階段，如果要直接啟動about頁面，就必須將about設置為第一項，這樣改動起來非常麻煩，因此可以通過配置編譯模式賴解決，condition節的list數組存放多個配置的列表，索引從0開始，current屬性用于設置當前啟用的模式。 ```html "condition": { //模式配置，僅開發期間生效 "current": 2, //當前激活的模式（list 的索引項，從0開始） "list": [{ "name": "首頁", //模式名稱 "path": "pages/home/index", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 }, { "name": "Hello", //模式名稱 "path": "pages/home/hello", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 }, { "name": "關于", //模式名稱 "path": "pages/home/about", //啟動頁面，必選 "query": "uid=100&t=1535987051" //啟動參數，在頁面的onLoad函數里面得到。 } ] } ``` 如果頁面有參數，可以在onLoad事件中解析。 ```html onLoad: function (e) { console.log(JSON.stringify(e)); } ``` 打印的結果如下： ```html {"uid":"100","t":"1535987051"} ``` > 查詢字符串：問號后面所跟的參數“uid=100&t=1535987051”就是查詢字符串，字符串以鍵值對的形式出現，如果有多個參數，用"&"隔開就行了。 > 例如："about?uid=100&t=1535987051"表示帶兩個參數uid和t，他們的值分別為100和1535987051。參數的名稱和值含有特殊字符必須進行url轉義。 **注意：**?在5+app里真機運行可直接打開配置的頁面，微信開發者工具里需要手動改變編譯模式，如下圖：