跑鴨：這是我的畢業設計，“跑鴨”微信小程序-一款基于校園跑步的社交小程序（實時里程配速、運動路徑、整公里提醒、周榜月榜、打卡分享、熱門推薦、線上活動、勛章墻、隱私設置），技術棧：Vant-Weapp UI、Laravel+MySQL

?跑鴨”微信小程序的核心功能就是：跑步+社交+活動，詳細劃分如下：

（1）跑步（首屏）：當前位置地圖、排行榜（周榜、月榜）、運動路徑、實時數據（里程、配速）、隨機一言。

（2）動態圈子：打卡分享、發布分享、熱門推薦、點贊評論、消息通知。

（3）活動廣場：線上活動（報名、完賽條件、獎勵）、跑步教程。

（4）個人中心：運動管理、動態管理、設置（通用設置、隱私設置）、勛章墻、等級稱號、個人主頁、資料編輯。

• 產品原型：（已失效）
• 開發手冊：登錄 · PopRun-前端（已失效）

設置：

---

一、功能設計

“跑鴨”微信小程序的核心功能就是：跑步+社交+活動，詳細劃分如下：

（1）跑步（首屏）：當前位置地圖、排行榜（周榜、月榜）、運動路徑、實時數據（里程、配速）、隨機一言。

（2）動態圈子：打卡分享、發布分享、熱門推薦、點贊評論、消息通知。

（3）活動廣場：線上活動（報名、完賽條件、獎勵）、跑步教程。

（4）個人中心：運動管理、動態管理、設置（通用設置、隱私設置）、勛章墻、等級稱號、個人主頁、資料編輯。

• 產品原型：（已失效）
• 開發手冊：登錄 · PopRun-前端（已失效）

E-R圖：

根據功能分析，一共規劃出11個實體，形成E-R圖：

目錄結構：

├─.vscode #VS Code配置，含'EasyLess'插件配置 ├─components #自定義公共組件 ├─dist #iVew-Weapp庫 ├─imgs #圖標、默認圖片 ├─pages │ ├─run #跑步（首頁） │ │ └─sharePage #分享到動態圈子頁 │ ├─moments #動態圈子 │ │ ├─messages #消息盒子 │ │ └─newMoment #新建動態 │ ├─pub #活動廣場 │ │ ├─blockDetail #教程詳細 │ │ ├─blockMore #教程列表 │ │ ├─listDetail #活動詳細 │ │ └─listMore #活動列表 │ └─user #個人中心 │ ├─edit #個人資料編輯 │ ├─modals #勛章墻 │ ├─myMoments #我的動態 │ ├─myRuns #我的運動 │ ├─privacy #隱私設置 │ ├─setting #通用設置 │ └─userPage #個人主頁 ├─theme #主題定制 ├─utils #公共模塊 └─voice #音頻文件

2.3 構建npm

（1）在微信開發者工具，啟用npm：

? 點擊詳細-本地設置-使用npm模塊

（2）構建

? 點擊工具-構建npm

2.4 完成

恭喜！完成前面的步驟你已經能夠正常運行程序了，前提是我服務器上沒有下線后端程序，如果發現接口不能用，就說明時下線了，你就需要在本地構建后端項目

2.5 創建活動和教程

如果我沒有下線后端程序，以下創建接口可在線使用：

• 創建活動：Pop Run！ 跑鴨！創建課程活動

• 創建課程：Pop Run！ 跑鴨！創建課程

2.6 如果需要使用less

如果不需要使用less，直接編輯wxss文件，以下內容請忽略

• VS Code：Easy Less 插件-可以將less編譯為wxss

  配置文件在 /.vscode/settings.json

總結

以上是生活随笔為你收集整理的跑鸭”微信小程序-一款基于校园跑步的社交小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。