PopRun Download - PopRun Source code download

PopRun

AI Source Code

1.0.0

Download

running duck

This is my graduation project: "Running Duck" WeChat applet - a social applet based on campus running. It uses: Less / Vant-Weapp / Iview-Weapp

Backend development using PHP Laravel framework

Backend project: https://github.com/Chef5/PopRun-b
Interface documentation: https://chef5.github.io/PopRun/

If you think it has reference value, please give it a star to support it.

Home page, dynamic circle (imitation of WeChat Moments), activity square, personal center:

set up:

1. Functional design

The core functions of the "Running Duck" WeChat applet are: running + social networking + activities. The detailed division is as follows:

(1) Running (first screen): current location map, rankings (weekly rankings, monthly rankings), exercise paths, real-time data (mileage, pace), random words.

(2) Dynamic circle: check in and share, post and share, popular recommendations, likes and comments, and message notifications.

(3) Activity Square: Online activities (registration, completion conditions, rewards), running tutorials.

(4) Personal center: sports management, dynamic management, settings (general settings, privacy settings), medal wall, level titles, personal homepage, and data editing.

ER diagram:

Based on the functional analysis, a total of 11 entities were planned to form an ER diagram:

Data model diagram:

From the ER diagram, a total of 16 tables were converted, and the data model diagram was exported by Navicat.

Directory structure:

├─.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. How to use

Important: This applet needs to activate wx.getLocation , wx.onLocationChange , and wx.startLocationUpdate interface permissions. Please apply for this permission in advance. You can use the screenshots in this document to apply.

The test number cannot be applied for, so the test number cannot be used.

First register a small program by yourself, and then apply for the permission获取当前的地理位置、速度,监听实时地理位置变化事件and接收位置消息（前台） in Development-Development Management-Interface Settings.

Application Guide: (Whether you can apply or not is up to chance)

Get the current geographical location and speed (wx.getLocation): It means that the business involves sports running, and it is necessary to initialize the position of the user and confirm it is displayed on the map (attached picture: screenshot of the home page)
Monitoring real-time geographical location change events (wx.onLocationChange): It means that the business involves sports running and needs to monitor real-time geographical location change events (attached picture: screenshot of home page)
Receive location messages (front desk) (wx.startLocationUpdate): It indicates that the business involves sports running and needs to receive location messages (front desk) (Attached: Home page screenshot)

The following steps are done step by step, and the order cannot be messed up. It can usually be run at once!

2.1 Clone the code locally

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

2.2 Install dependencies

Execute in the project root directory:

npm install

A path error may be reported: create the specified directory based on the error report

2.3 Import project

Import the project into the WeChat developer tool and fill in your own AppID (you cannot use a test account. You need to apply for a plug-in later. You cannot apply for a test account). Do not use cloud services.

2.4 Build npm

In WeChat developer tools (need to build npm after npm install)

Click "Tools"-"Build npm"

2.5 Quick experience - no need to build the backend yourself

There is no need to build the back-end service by yourself. The back-end is started by myself, and I am not sure when it will stop. Moreover, the data is stored in the project author server, and some interfaces are disabled (such as creating activities and courses).

In the mini program background, in Development Management-Development Settings-Server Domain Name, add https://dev.run.nunet.cn to request合法域名, uploadFile合法域名, and downloadFile合法域名respectively;
Edit configuration 1 in config.js and fill in your own appid and secret according to the prompts;
After saving, click Compile and Run (Trust and Run) in the developer tools

https://dev.run.nunet.cn is a back-end service built by me. I am not sure when it will be shut down.

2.6 Build back-end project-build your own back-end project

The backend is written using PHP 's Laravel framework, so you are required to know basic PHP syntax and have a local PHP7.2+ and MySQL environment.

For specific backend projects, see: https://github.com/Chef5/PopRun-b

After building the backend project locally, edit the configuration in config.js , comment out configuration 1, and open configuration 2.

After saving, click Compile and Run (Trust and Run) in the developer tools

2.7 Common errors

Q: When running for the first time, the console will usually report a plug-in problem.

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)

A: Click the blue text in the error report添加插件to add it easily.

It may be that your mini program cannot be activated because it does not have relevant categories. You can refer to this document: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

What I have subscribed to is: Sports > Online Fitness Tools > Information Query Tools > Reservation/Registration

Then go to Development-Development Management-Interface Settings to enable self-service permissions获取当前的地理位置、速度,监听实时地理位置变化事件and接收位置消息（前台）

Note: The test account cannot activate the plug-in because the category cannot be configured.

2.8 Other precautions

Note that this project was done in 2020 when I was a senior in college. The technology at that time was limited and left a lot of pitfalls. If you need it for your own use, please don’t blame me.

I ran it again based on this document in February 2023, corrected some pitfalls, and the project can run smoothly, and noted some precautions, which can be searched globally: // TODO: View.