第一個uni-app項目 ================= [TOC] 這部分的項目文件為：“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) 規范 .vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每個 .vue 文件包含三種類型的頂級語言塊`<template>`、`<script>` 和` <style>`。 ``` <template> </template> <script> </script> <style> </style> ``` > template語言塊用于編寫頁面的定義代碼，script語言塊編寫頁面的模塊Javascript代碼，style語言塊用于編寫樣式定義腳本。 > vue-loader 會解析文件，提取每個語言塊，如有必要會通過其它 loader 處理，最后將他們組裝成一個 ES Module，它的默認導出是一個 Vue.js 組件選項的對象。 # UniAPP Hello World項目 我們先從一段簡單的腳本開始，感受一下uni-app最核心的功能，uni-app是基于Vue.js的前端框架，支持大部分的 Vue.js特性。 > 這個示例展示了uni-app的核心功能：數據的雙向綁定。屬性title自動顯示在屏幕正中間。 * [ ] 項目：01-UniAPP Hello World * [ ] 文件：pages/home/index.vue ## 第一個頁面 ``` // pages/home/index.vue <template> <view class="content"> <text class="title">{{title}}</text> </view> </template> <script> export default { data() { return { title: 'Hello world' } } } </script> <style> .content { flex: 1; justify-content: center; align-items: center; } .title { font-size: 36upx; color: #8f8f94; } </style> ``` ## 添加新的頁面 添加新的頁面“pages/home/hello.vue”，這個示例展示了uni-app的核心功能：數據的雙向綁定。通過計算屬性message對屬性name處理封裝，在輸入框內輸入的內容會同步展示在頁面的text標簽內，如圖所示。與傳統的HTML不一樣的是uni-app自定義了一系列的標簽，最基本的view標簽可以理解為HTML的div標簽。 > 添加新的頁面需要修改pages.json文件，參考下一節如何修改pages.json文件 首先定義data域的成員屬性name ``` <script> export default { data() { return { name: 'Jack', } }, computed: { message() { return `Hello, ${this.name}`; } }, } </script> ``` 然后template節中添加一個輸入框，將輸入的內容通過v-model綁定到變量name。 ~~~ <input type="text" v-model="name" placeholder="你的名字" /> ~~~ 增加一個計算屬性message，定義讀取message返回一條消息 ~~~ computed: { message() { return `Hello, ${this.name}`; } }, ~~~ 這里的this指針指向vue實例本身。使用模版字符串構造復雜的字符串。 ~~~ `Hello,${this.name}` ~~~ 計算屬性message與name屬性密切相關，當name值改變的時候message自動更新。 ~~~ <template> <view class="content"> <view> <input type="text" v-model="name" placeholder="你的名字" /> </view> <view> <text>{{ message }}</text> </view> </view> </template> ~~~ * [ ] 項目：01-UniAPP Hello World * [ ] 文件：pages/home/hello.vue 圖表 4?2 第一個uni-app項目代碼清單 ~~~ <template> <view class="content"> <view> <input type="text" v-model="name" placeholder="你的名字" /> </view> <view> <text>{{ message }}</text> </view> </view> </template> <script> export default { data() { return { name: 'Jack', } }, computed: { message() { return `Hello, ${this.name}`; } }, } </script> <style> .content { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; } input { border-bottom: 1px solid; } .name { font-size: 60px; font-weight: 600; } </style> ~~~ > uni-app修改了?Vue.js?的 runtime 和 compiler 實現，鑒于跨平臺及App特殊需求，相比Web平臺，?Vue.js?在?uni-app?中使用時會存在一些差異。  圖表 4?3 微信開發者工具調試界面 ## 配置文件 ### 配置文件概述 pages.json 文件用來對 uni-app 進行全局配置（globalStyle）、決定頁面文件的路徑和窗口表現（pages）、設置底部 tab 的表現（tabBar）和條件啟動（condition）。 圖表 4?4 配置文件pages.json 的配置項列表 | 選項 | 說明 | |-------------|----------------------------------------------------------------------------------------------| | globalStyle | 設置默認頁面的窗口表現 | | pages | 設置頁面路徑及窗口表現，pages數組中第一項表示應用啟動頁，項目中出現的所有的頁面必須在pages中列出 | | tabBar | 設置底部 tab 的表現 | | condition | 啟動模式配置，僅開發階段有效，方便給頁面傳遞參數測試功能 | - 完整的配置說明，參考配置文件一章。 ### 全局配置 配置文件的globalStyle節用于設置整個APP的全局設置，如頂部當航欄的文字顏色、標背景色以及整個頁面的背景色。 ~~~ "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#FF0000", "backgroundColor": "#F8F8F8" }, ~~~ 這些配置如果某個頁面想改變默認值，需要在特定頁面的配置中重載，例如將pages/index/index頁面的導航欄的背景色（navigationBarBackgroundColor）改成綠色（\#00FF00），需要修改style屬性的值。 ~~~ { "pages": [ //pages數組中第一項表示應用啟動頁 { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁", "navigationBarBackgroundColor": "#00FF00" } }, … ~~~ ### 模式配置 假設已經增加了3個頁面 * pages/home/index * pages/home/hello * pages/home/about 根據約定pages數組中第一項表示應用啟動頁 ~~~ "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屬性用于設置當前啟用的模式。 ~~~ "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事件中解析。 ~~~ onLoad: function (e) { console.log(JSON.stringify(e)); } ~~~ 打印的結果如下： ~~~ {"uid":"100","t":"1535987051"} ~~~ > 查詢字符串：問號后面所跟的參數“uid=100&t=1535987051”就是查詢字符串，字符串以鍵值對的形式出現，如果有多個參數，用"&"隔開就行了。 > 例如："about?uid=100&t=1535987051"表示帶兩個參數uid和t，他們的值分別為100和1535987051。參數的名稱和值含有特殊字符必須進行url轉義。 **注意：**?在5+app里真機運行可直接打開配置的頁面，微信開發者工具里需要手動改變編譯模式，如下圖：  ### 單頁程序配置示例 圖表 4?5 pages.json示例文件 ~~~ { //pages數組中第一項表示應用啟動頁 //參考：https://uniapp.dcloud.io/collocation/pages "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" } } ], "globalStyle": { //全局設置 "navigationBarTextStyle": "black", //導航欄文本顏色 "navigationBarTitleText": "uni-app", //導航欄文本默認文字 "navigationBarBackgroundColor": "#F8F8F8", //導航欄背景顏色 "backgroundColor": "#F8F8F8" //頁面的背景色 }, "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函數里面得到。 } ] } } ~~~ ### 多頁應用配置 一般一個應用不止一個頁面，我們習慣如圖所示，在主程序頁面按照多頁的方式來組織，  假設已經增加了兩個頁面 * [ ] pages/home/index * [ ] pages/home/about 我們希望底部通過Tab的形式切換這兩個頁面。 文件pages/home/index.vue頁面水平和垂直居中顯示一行文字'Hello'。 pages/home/about頁面類似，在頁面上簡單的顯示一行文字。 要增加多頁功能，需要在pages.json文件中增加對tabs的配置，例如 ~~~ "tabBar": { "color": "#cdcdcd", "selectedColor": "#1296db", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/home/index", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/homeHL.png", "text": "首頁" }, { "pagePath": "pages/home/about", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/myHL.png", "text": "關于" }] }, ~~~ uni-app每個頁面支持使用原生title，首頁支持使用原生底部tab，這些是要在pages.json里配置，這些并不是vue頁面的一部分。根據微信小程序的規范，底部的Tab最多有5個，最少2個。 ### 多頁程序配置的示例 項目：02-UniAPP Tabs ~~~ { //pages數組中第一項表示應用啟動頁 //參考：https://uniapp.dcloud.io/collocation/pages "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "Hello world" } }, { "path": "pages/home/about", //重載全局設置 "style": { "navigationBarTextStyle": "black", "navigationBarTitleText": "About", "navigationBarBackgroundColor": "#F00", "backgroundColor": "#F8F8F8" } } ], "globalStyle": { //全局設置 "navigationBarTextStyle": "black", //導航欄文本顏色 "navigationBarTitleText": "uni-app", //導航欄文本默認文字 "navigationBarBackgroundColor": "#F8F8F8", //導航欄背景顏色 "backgroundColor": "#F8F8F8" //頁面的背景色 }, "tabBar": { "color": "#cdcdcd", "selectedColor": "#1296db", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/home/index", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/homeHL.png", "text": "首頁" }, { "pagePath": "pages/home/about", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/myHL.png", "text": "關于" }] }, "condition": { //模式配置，僅開發期間生效 "current": 0, //當前激活的模式（list 的索引項，從0開始） "list": [{ "name": "首頁", //模式名稱 "path": "pages/home/index", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 }, { "name": "關于", //模式名稱 "path": "pages/home/about", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 } ] } } ~~~ > 以后的項目都是基于Tabs多頁導航模式，以本案例為基礎增加功能頁面。