Uni-app從入門到實戰

林磚頭發表於2020-08-16
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分支檢視。

 

相關文章