用mpvue實現的微信小程式版cnode社群

flytam發表於2018-04-30

五一放假,沒出去玩,想熟悉下vue的開發流程,又想體驗下mpvue,於是寫了個練手專案。一個用mpvue實現的cnode微信小程式版。

程式碼在倉庫。歡迎各位star、fork、issue、pr。目前已經完成了百分之80的功能。個人感覺這個專案還是非常適合作為vue和微信小程式的入門專案的。

API來自於cnode社群

預覽流程

npm install

npm run dev

//使用微信開發者工具開啟dist目錄,關閉域名和https檢查即可
複製程式碼

v0.0.5 修復帖子詳情滑動卡頓問題 首頁欄目切換動畫修復 部分圖示修復

v0.0.4 修復幾處樣式,新增帖子熱帖選型,發帖新增markdown預覽,通知新增一鍵已讀和點選已讀 點贊修復。新增了一些首屏欄目切換的動畫

v0.0.3 新增掃碼登陸

v0.0.2 帖子評論框修復、通知點選詳情跳轉修復

體驗地址

用mpvue實現的微信小程式版cnode社群

目錄結構

  • src
    • pages
      • index 主頁
      • detail 帖子詳情頁
      • me 我的主頁
      • publish 發帖頁
      • notice 通知頁
      • login 登入頁
      • user 使用者主頁
      • list 帖子列表展示頁
    • components
      • card 單一帖子頭元件
      • authorHead 作者資訊頭
      • login 登入元件
    • const.js 常量
    • utils 一些工具函式
  • static 靜態圖片部分 目前已經完成了絕大部分功能,尚未完成的功能在和遇到的問題在todo中

目前存在的問題

  • markdwon的解析有點問題,該問題我已適配了一個mpvue-wemark的庫來解決了

todo

  • 編輯自己發過的主題
  • 部分頁面新增下拉重新整理

後話:

這個專案沒有涉及到太多複雜的部分,主要到是業務邏輯的開發,對於作為一個vue和mpvue小程式入門專案是非常合適的。由於開發時間短,部分程式碼質量和互動做得不太好。對於未完成的部分和部分未知bug歡迎各位star、提issue、提pr一起來玩2333.

效果圖

用mpvue實現的微信小程式版cnode社群

用mpvue實現的微信小程式版cnode社群

用mpvue實現的微信小程式版cnode社群

用mpvue實現的微信小程式版cnode社群

用mpvue實現的微信小程式版cnode社群

相關文章