uni-app 快速上手指南

• 2019 年 12 月 4 日
• 筆記

離職之後，基本上所有的時間都用在複習備考和玩上面了，之前一直有提及的獨立APP開發，一直沒有什麼動靜，最近也確實得收心轉向複習和獨立APP開發上面來，做一點有實際意義的事情來調節情緒和狀態，來面臨馬上要來的考試和做一些相對長遠的規劃。在公司基礎過一點點 uni-app 不得不說的是，開發效率實際上是非常高的，官方完善速度和社區相對來說也還算不錯。考慮到獨立APP 的開發效率已經時間等投入，最終還是選擇了 uni-app 並優先考慮微信小程序，後期再發佈webapp式移動應用。所以準備開一個系列，來說一下非0基礎，即有Web開發或者後端開發的開發人員，如何快速上手 uni-app 的開發。

uni-app 開發環境

官方有自己的 HbuilderX 實際上開發效率非常高，並且可以集成很多開發環境和插件來使用，但是由於開發習慣的原因，以及出生（軟狗的驕傲），還是使用Visual Studio Code 來作為開發環境，但是由於 uni-app 的編譯調試依賴 HbuilderX，因此這裡的解決方法是：

打開HbuilderX 新建/管理項目/編譯調試開啟，然後使用 VS Code 打開對應項目目錄，進行項目代碼的編寫，保存後，HbuilderX 會自動打開相應變更內容，然後同步編譯調試到微信開發者工具/模擬器/Web瀏覽器，從而實現調試。

路由和頁面跳轉

歸根到底，uni-app 的本質是 web 應用，因此，對於 web 應用而言，最重要的就是路由和頁面間的跳轉。

路由

先說 uni-app 的路由，和 vue 類似， uni-app 的路由文件編寫在項目根目錄中的 pages.json 文件中，先來看一下改文件的結構：

{      "pages" : [          //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages          {              "path" : "pages/index/index",              "style" : {                  "navigationBarTitleText" : "悅讀圈子"              }          },          {              "path" : "pages/HM-search/HM-search",              "style" : {}  		},  		{              "path" : "pages/List/list",              "style" : {}          }      ],      "globalStyle" : {          "navigationBarTextStyle" : "black",          "navigationBarTitleText" : "悅讀圈子",          "navigationBarBackgroundColor" : "#009688",          "backgroundColor" : "#009688"      }  }

該文件，兩大部分組成，一個是 pages 表示頁面列表，如官方注釋所示，pages中的第一項表示應用啟動頁，而globalStyle則是全局樣式，這裡可以定義小程序/應用的頭部欄樣式，是否開啟下拉刷新等等。

頁面跳轉

uni-app 的頁面跳轉，實際上是重寫了微信小程序的頁面跳轉 navigateTo等，同樣包含了如下五種方法：

• uni.navigateTo 保留當前頁面並跳轉，從A頁面跳轉到B頁面，綁定默認的返回
• uni.redirectTo 關閉當前頁面並跳轉，從A頁面跳轉到B頁面，沒有返回綁定，返回A的上級頁面
• uni.reLaunch 關閉所有頁面，打開到應用內的某個頁面。
• uni.switchTab 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
• uni.navigateBack 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。