<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                第一個uni-app項目 ================= [TOC] 這部分的項目文件為:“01-UniAPP Hello World”和“02-UniAPP Tabs” # 目錄結構 一個uni-app工程,默認包含如下目錄及文件: ![](media/2019-03-03-23-45-10.png) 圖 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?中使用時會存在一些差異。 ![](media/fa8ab49bad405328a7078f22b3a4498f.png) 圖表 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里真機運行可直接打開配置的頁面,微信開發者工具里需要手動改變編譯模式,如下圖: ![](media/3bb0237feddec9da38de5325190bf807.png) ### 單頁程序配置示例 圖表 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函數里面得到。 } ] } } ~~~ ### 多頁應用配置 一般一個應用不止一個頁面,我們習慣如圖所示,在主程序頁面按照多頁的方式來組織, ![](media/aad199da214359257c11105175cf4101.png) 假設已經增加了兩個頁面 * [ ] 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多頁導航模式,以本案例為基礎增加功能頁面。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看