PopRun

เป็ดวิ่ง

นี่คือโปรเจ็กต์สำเร็จการศึกษาของฉัน: แอปเพล็ต WeChat "Running Duck" - แอปเพล็ตโซเชียลที่อิงตามการดำเนินงานของมหาวิทยาลัย ใช้: Less / Vant-Weapp / Iview-Weapp

การพัฒนาแบ็กเอนด์โดยใช้เฟรมเวิร์ก PHP Laravel

• โครงการแบ็กเอนด์: https://github.com/Chef5/PopRun-b
• เอกสารประกอบอินเทอร์เฟซ: https://chef5.github.io/PopRun/

หากคุณคิดว่ามันมีค่าอ้างอิง โปรดให้ดาวเพื่อสนับสนุน

หน้าแรก วงไดนามิก (เลียนแบบ WeChat Moments) จัตุรัสกิจกรรม ศูนย์ส่วนบุคคล:

ตั้งค่า:

1. การออกแบบฟังก์ชั่น

ฟังก์ชั่นหลักของแอปเพล็ต "Running Duck" WeChat คือ: การวิ่ง + เครือข่ายโซเชียล + กิจกรรม โดยมีรายละเอียดดังนี้:

(1) การวิ่ง (หน้าจอแรก): แผนที่ตำแหน่งปัจจุบัน การจัดอันดับ (อันดับรายสัปดาห์ การจัดอันดับรายเดือน) เส้นทางการออกกำลังกาย ข้อมูลแบบเรียลไทม์ (ระยะทาง ก้าว) คำสุ่ม

(2) แวดวงไดนามิก: เช็คอินและแชร์ โพสต์และแชร์ คำแนะนำยอดนิยม การถูกใจและความคิดเห็น และการแจ้งเตือนข้อความ

(3) จัตุรัสกิจกรรม: กิจกรรมออนไลน์ (การลงทะเบียน เงื่อนไขการสำเร็จ รางวัล) การฝึกสอนการวิ่ง

(4) ศูนย์ส่วนบุคคล: การจัดการกีฬา การจัดการแบบไดนามิก การตั้งค่า (การตั้งค่าทั่วไป การตั้งค่าความเป็นส่วนตัว) ผนังเหรียญ ชื่อระดับ หน้าแรกส่วนบุคคล และการแก้ไขข้อมูล

แผนภาพเอ้อ:

จากการวิเคราะห์เชิงฟังก์ชัน มีการวางแผนเอนทิตีทั้งหมด 11 เอนทิตีเพื่อสร้างแผนภาพ ER:

แผนภาพแบบจำลองข้อมูล:

จากแผนภาพ ER มีการแปลงตารางทั้งหมด 16 ตาราง และแผนภาพแบบจำลองข้อมูลถูกส่งออกโดย Navicat

โครงสร้างไดเร็กทอรี:

├─.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. วิธีการใช้งาน

สำคัญ: แอปเพล็ตนี้จำเป็นต้องเปิดใช้งานสิทธิ์อินเทอร์เฟซ wx.getLocation , wx.onLocationChange และ wx.startLocationUpdate โปรดสมัครเพื่อรับสิทธิ์นี้ล่วงหน้า คุณสามารถใช้ภาพหน้าจอในเอกสารนี้เพื่อนำไปใช้

ไม่สามารถใช้หมายเลขทดสอบได้ ดังนั้นจึงไม่สามารถใช้หมายเลขทดสอบได้

ขั้นแรกให้ลงทะเบียนโปรแกรมขนาดเล็กด้วยตัวเอง จากนั้นจึงยื่นขออนุญาต获取当前的地理位置、速度监听实时地理位置变化事件และ接收位置消息（前台） ในการตั้งค่าการพัฒนา-การจัดการการพัฒนา-อินเทอร์เฟซ

คู่มือการสมัคร: (ไม่ว่าคุณจะสมัครได้หรือไม่ขึ้นอยู่กับโอกาส)

• รับตำแหน่งทางภูมิศาสตร์และความเร็วปัจจุบัน (wx.getLocation): หมายความว่าธุรกิจเกี่ยวข้องกับการวิ่งและจำเป็นต้องเริ่มต้นตำแหน่งของผู้ใช้และยืนยันว่าปรากฏบนแผนที่ (รูปภาพที่แนบมา: ภาพหน้าจอของหน้าแรก)
• การตรวจสอบเหตุการณ์การเปลี่ยนแปลงตำแหน่งทางภูมิศาสตร์แบบเรียลไทม์ (wx.onLocationChange): หมายความว่าธุรกิจเกี่ยวข้องกับการวิ่งกีฬา และจำเป็นต้องตรวจสอบเหตุการณ์การเปลี่ยนแปลงตำแหน่งทางภูมิศาสตร์แบบเรียลไทม์ (ภาพที่แนบมา: ภาพหน้าจอของหน้าแรก)
• รับข้อความแสดงตำแหน่ง (แผนกต้อนรับ) (wx.startLocationUpdate): ข้อความนี้ระบุว่าธุรกิจเกี่ยวข้องกับการวิ่งกีฬาและจำเป็นต้องได้รับข้อความแสดงตำแหน่ง (แผนกต้อนรับ) (แนบมาด้วย: ภาพหน้าจอหน้าแรก)

ขั้นตอนต่อไปนี้เสร็จสิ้นทีละขั้นตอน และโดยปกติแล้วคำสั่งซื้อจะไม่เลอะเทอะ!

2.1 โคลนโค้ดในเครื่อง

git clone https://github.com/Chef5/PopRun.git

2.2 ติดตั้งการพึ่งพา

ดำเนินการในไดเรกทอรีรากของโครงการ:

npm install

อาจมีการรายงานข้อผิดพลาดของเส้นทาง: สร้างไดเร็กทอรีที่ระบุตามรายงานข้อผิดพลาด

2.3 โครงการนำเข้า

นำเข้าโครงการไปยังเครื่องมือนักพัฒนา WeChat และกรอก AppID ของคุณเอง (คุณไม่สามารถใช้บัญชีทดสอบได้ คุณต้องสมัครปลั๊กอินในภายหลัง คุณไม่สามารถสมัครบัญชีทดสอบได้)

2.4 บิลด์ NPM

ในเครื่องมือสำหรับนักพัฒนา WeChat (จำเป็นต้องสร้าง npm หลังจากติดตั้ง npm)

​ คลิก "เครื่องมือ"-"สร้าง npm"

2.5 ประสบการณ์ที่รวดเร็ว - ไม่จำเป็นต้องสร้างแบ็กเอนด์ด้วยตัวเอง

ไม่จำเป็นต้องสร้างบริการแบ็คเอนด์ด้วยตัวเอง และฉันไม่แน่ใจว่าจะหยุดทำงานเมื่อใด นอกจากนี้ ข้อมูลจะถูกจัดเก็บไว้ในเซิร์ฟเวอร์ผู้เขียนโครงการ และอินเทอร์เฟซบางส่วนถูกปิดใช้งาน ( เช่นการสร้างกิจกรรมและหลักสูตร)

1. ในพื้นหลังมินิโปรแกรม ในการตั้งค่าการจัดการการพัฒนา-การตั้งค่าการพัฒนา-ชื่อโดเมนเซิร์ฟเวอร์ ให้เพิ่ม https://dev.run.nunet.cn ไปยัง request合法域名, uploadFile合法域名และ downloadFile合法域名ตามลำดับ
2. แก้ไขการกำหนดค่า 1 ใน config.js และกรอก appid และ secret ของคุณเองตามคำแนะนำ
3. หลังจากบันทึกแล้ว คลิกคอมไพล์และรัน (เชื่อถือและรัน) ในเครื่องมือสำหรับนักพัฒนา

https://dev.run.nunet.cn เป็นบริการแบ็คเอนด์ที่ฉันสร้างขึ้น ฉันไม่แน่ใจว่าจะปิดตัวลงเมื่อใด

2.6 สร้างโครงการแบ็คเอนด์ - สร้างโครงการแบ็คเอนด์ของคุณเอง

แบ็กเอนด์เขียนโดยใช้เฟรมเวิร์ก Laravel ของ PHP ดังนั้นคุณจำเป็นต้องรู้ไวยากรณ์ PHP พื้นฐาน และมีสภาพแวดล้อม PHP7.2+ และ MySQL ในเครื่อง

สำหรับโปรเจ็กต์แบ็กเอนด์เฉพาะ โปรดดู: https://github.com/Chef5/PopRun-b

หลังจากสร้างโปรเจ็กต์แบ็กเอนด์ในเครื่องแล้ว ให้แก้ไขการกำหนดค่าใน config.js ใส่ความคิดเห็นในการกำหนดค่า 1 และเปิดการกำหนดค่า 2

หลังจากบันทึกแล้ว คลิกคอมไพล์และรัน (เชื่อถือและรัน) ในเครื่องมือสำหรับนักพัฒนา

2.7 ข้อผิดพลาดทั่วไป

ถาม: เมื่อใช้งานครั้งแรก คอนโซลมักจะรายงานปัญหาปลั๊กอิน

VM23:2 wx76a9a06e5b4e693e 插件未授权使用 添加插件(env: macOS,mp,1.06.2301160 ; lib: 2.10.4)
(anonymous) @ VM23:2
VM23:3 插件文档: https://mp.weixin.qq.com/wxopen/plugindevdoc ? appid=wx76a9a06e5b4e693e & token= & lang=zh_CN(env: macOS,mp,1.06.2301160 ; lib: 2.10.4)

ตอบ: คลิกข้อความสีน้ำเงินในรายงานข้อผิดพลาด添加插件เพื่อเพิ่มได้อย่างง่ายดาย

อาจเป็นไปได้ว่ามินิโปรแกรมของคุณไม่สามารถเปิดใช้งานได้เนื่องจากไม่มีหมวดหมู่ที่เกี่ยวข้อง คุณสามารถดูเอกสารนี้ได้: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

สิ่งที่ฉันสมัครเป็นสมาชิกคือ: กีฬา > เครื่องมือฟิตเนสออนไลน์ > เครื่องมือสืบค้นข้อมูล > การจอง/การลงทะเบียน

จากนั้นไปที่การตั้งค่าการพัฒนา-การจัดการการพัฒนา-อินเทอร์เฟซ เพื่อเปิดใช้งานสิทธิ์การบริการตนเอง获取当前的地理位置、速度监听实时地理位置变化事件แบบเรียลไทม์ และ接收位置消息（前台）

หมายเหตุ: บัญชีทดสอบไม่สามารถเปิดใช้งานปลั๊กอินได้เนื่องจากไม่สามารถกำหนดค่าหมวดหมู่ได้

2.8 ข้อควรระวังอื่นๆ

โปรดทราบว่าโปรเจ็กต์นี้เสร็จสิ้นในปี 2020 ตอนที่ฉันยังเป็นรุ่นพี่ในวิทยาลัย เทคโนโลยีในเวลานั้นมีจำกัดและทิ้งข้อผิดพลาดไว้มากมาย หากคุณต้องการใช้เอง โปรดอย่าตำหนิฉัน

ฉันดำเนินการอีกครั้งตามเอกสารนี้ในเดือนกุมภาพันธ์ 2023 แก้ไขข้อผิดพลาดบางประการ และโปรเจ็กต์สามารถดำเนินไปได้อย่างราบรื่น และระบุข้อควรระวังบางประการซึ่งสามารถค้นหาได้ทั่วโลก: // TODO: ดู

2.9 หากจำเป็นต้องใช้น้อย

หากคุณไม่ต้องการใช้น้อยลง ให้แก้ไขไฟล์ wxss โดยตรง โปรดละเว้นเนื้อหาต่อไปนี้

• รหัส VS: ปลั๊กอิน Easy Less - สามารถคอมไพล์น้อยกว่า wxss

  ไฟล์การกำหนดค่าอยู่ใน /.vscode/settings.json

ใบอนุญาต

เอ็มไอที