第一個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多頁導航模式,以本案例為基礎增加功能頁面。