[TOC] # 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 ``` 代碼 ```html <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> ``` ## 配置文件 文件名：page.json ```js { //pages數組中第一項表示應用啟動頁 "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "首頁", } }, { "path": "pages/home/about", "style": { "navigationBarTextStyle": "black", "navigationBarTitleText": "About", "navigationBarBackgroundColor": "#F00", "backgroundColor": "#F8F8F8" } }], "globalStyle": { //全局設置 "navigationBarTextStyle": "black", //導航欄文本顏色 "navigationBarTitleText": "uni-app", //導航欄文本默認文字 "navigationBarBackgroundColor": "#F8F8F8", //導航欄背景顏色 "backgroundColor": "#F8F8F8" //頁面的背景色 } } ``` ## 動手試一試 根據向導創建HelloWorld項目，修改模版生成的index.vue文件，實現上述功能。 # 添加新的頁面 添加新的頁面“pages/home/hello.vue”，這個示例展示了uni-app的核心功能：數據的雙向綁定。通過計算屬性message對屬性name處理封裝，在輸入框內輸入的內容會同步展示在頁面的text標簽內，如圖所示。與傳統的HTML不一樣的是uni-app自定義了一系列的標簽，最基本的view標簽可以理解為HTML的div標簽。 > 添加新的頁面需要修改pages.json文件，參考下一節如何修改pages.json文件 首先定義data域的成員屬性name ```html <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返回一條消息 ```js computed: { message() { return `Hello, ${this.name}`; } }, ``` 這里的this指針指向vue實例本身。使用模版字符串構造復雜的字符串。 ```js `Hello,${this.name}` ``` 計算屬性message與name屬性密切相關，當name值改變的時候message自動更新。 ```html <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 第一個uni-app項目代碼清單 ```html <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?中使用時會存在一些差異。  微信開發者工具調試界面 ## 模式配置 在pages.js文件中約定pages數組的第一項為APP的啟動頁面，在開發階段，如果要啟動的頁面不是第一頁，例如測試某個頁面，例如直接啟動新建的hello頁面，就必須將hello設置為第一項，這樣改動起來非常麻煩，可以通過模式配置來解決。 > condition節的list數組存放多個配置的列表，索引從0開始，current屬性用于設置當前啟用的模式。 ```html "condition": { //模式配置，僅開發期間生效 "current": 1, //當前激活的模式（list 的索引項，從0開始） "list": [{ "name": "首頁", //模式名稱 "path": "pages/home/index", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 }, { "name": "Hello", //模式名稱 "path": "pages/home/hello", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 } ] } ``` ## 單頁程序配置 pages.json示例文件 ```html { //pages數組中第一項表示應用啟動頁 //參考：https://uniapp.dcloud.io/collocation/pages "pages": [{ "path": "pages/home/index", "style": { "navigationBarTitleText": "首頁", } }, { "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": 1, //當前激活的模式（list 的索引項，從0開始） "list": [{ "name": "首頁", //模式名稱 "path": "pages/home/index", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 }, { "name": "Hello", //模式名稱 "path": "pages/home/hello", //啟動頁面，必選 "query": "" //啟動參數，在頁面的onLoad函數里面得到。 } ] } } ```