Uni-app從入門到實戰
前言
uni-app是一個使用vue.js開發跨平台應用的前端框架，開發者只需要編寫一套程式碼，便可以發布到IOS、Android和微信小程式等多個平台。所以我打算學習下這個框架，快速瀏覽了一遍官網之後，在某課網買了一門uni-app入門到實戰的課程，然後開啟我的實戰之旅。
為什麼要學習uni-app？
- 移動端技術太多，跨端框架或是未來發展的趨勢。
- 一套程式碼多端發布，受開發者青睞。
- 完整的生態，受企業青睞。
uni-app的開發工具
官網推薦的是HBuilderX，對uni-app的支援度很高，用起來簡直是愛不釋手。下載鏈接：//www.dcloud.io/hbuilderx.html
項目展示
在項目實戰中，主要實現了首頁功能模組、搜索頁功能模組、標籤頁功能模組、詳情頁功能模組、關注頁功能模組、個人資訊頁功能模組。效果圖如下：
首頁
搜索頁
詳情頁
關注頁
項目源碼
項目源碼我放在github上，鏈接是//github.com/ll527563266/uni-news，大家有興趣可以看看。
目錄結構
├── cloudfunctions-aliyun # 雲函數
├── common # 常用的文件
│ │── api # 請求介面函數
├── components # 自定義組件
├── pages # 頁面存放目錄
├── static # 靜態資源 (會被直接複製)
├── store # 全局 vuex store
├── unpackage # 編譯後的文件存放目錄
├── utils # 公用的工具類
├── App.vue # 入口頁面
├── main.js # 入口文件 載入組件 初始化等
├── manifest.json # 項目配置
├── pages.json # 頁面配置
├── uni.scss # sass常用變數
結語
- 目前我已經上手了這個框架，對於會vue.js的開發者來說，上手難度很低。
- 我的程式碼會跟老師的源程式碼有點不一致，我改寫過api的方法。大家要看該課程的源程式碼，可以切換到source分支查看。
