Uni-app從入門到實戰

前言

uni-app是一個使用vue.js開發跨平臺應用的前端框架，開發者只須要編寫一套代碼，即可以發佈到IOS、Android和微信小程序等多個平臺。因此我打算學習下這個框架，快速瀏覽了一遍官網以後，在某課網買了一門uni-app入門到實戰的課程，而後開啓個人實戰之旅。

爲何要學習uni-app？

• 移動端技術太多，跨端框架或是將來發展的趨勢。
• 一套代碼多端發佈，受開發者青睞。
• 完整的生態，受企業青睞。

uni-app的開發工具

官網推薦的是HBuilderX，對uni-app的支持度很高，用起來簡直是愛不釋手。下載連接：https://www.dcloud.io/hbuilderx.html 

項目展現

在項目實戰中，主要實現了首頁功能模塊、搜索頁功能模塊、標籤頁功能模塊、詳情頁功能模塊、關注頁功能模塊、我的信息頁功能模塊。效果圖以下：

首頁

 

 

搜索頁

 

 

詳情頁

 

 

關注頁

 

 

項目源碼

項目源碼我放在github上，連接是https://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分支查看。