Giter Club home page Giter Club logo

chef5 / poprun Goto Github PK

View Code? Open in Web Editor NEW
131.0 2.0 23.0 1.63 MB

跑鸭:这是我的毕业设计,“跑鸭”微信小程序-一款基于校园跑步的社交小程序(实时里程配速、运动路径、整公里提醒、周榜月榜、打卡分享、热门推荐、线上活动、勋章墙、隐私设置),技术栈:Vant-Weapp UI、Laravel+MySQL

License: MIT License

JavaScript 93.81% Less 6.19%
wechat wechat-app running wechat-mini-program runner graduation-project graduation-design miniprogram

poprun's Introduction

跑鸭

这是我的毕业设计:“跑鸭”微信小程序-一款基于校园跑步的社交小程序 使用了:Less / Vant-Weapp / Iview-Weapp

后端使用的PHP的Laravel框架开发

如果觉得有参考价值,请给个star支持一下吧

首页、动态圈子(仿微信朋友圈)、活动广场、个人中心:

首页 动态圈子 活动广场 个人中心

设置:

设置 设置-通用设置 设置-隐私设置

一、功能设计

“跑鸭”微信小程序的核心功能就是:跑步+社交+活动,详细划分如下:

(1)跑步(首屏):当前位置地图、排行榜(周榜、月榜)、运动路径、实时数据(里程、配速)、随机一言。

(2)动态圈子:打卡分享、发布分享、热门推荐、点赞评论、消息通知。

(3)活动广场:线上活动(报名、完赛条件、奖励)、跑步教程。

(4)个人中心:运动管理、动态管理、设置(通用设置、隐私设置)、勋章墙、等级称号、个人主页、资料编辑。

E-R图:

根据功能分析,一共规划出11个实体,形成E-R图: 20200618185938.jpeg

数据模型图:

由E-R图,共转换成16张表,数据模型图由Navicat导出 20200618191037.jpeg

目录结构:

├─.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             #音频文件

二、如何使用

重要:本小程序需要开通wx.getLocationwx.onLocationChangewx.startLocationUpdate接口权限,请先提前申请该权限,可以拿本文档中的截图去申请。

测试号无法申请,因此不能用测试号。

先自行注册一个小程序,然后在 开发-开发管理-接口设置 中申请开通获取当前的地理位置、速度监听实时地理位置变化事件接收位置消息(前台)权限。

申请指南:(能不能申请下来,随缘吧)

  • 获取当前的地理位置、速度(wx.getLocation):说明业务涉及体育跑步,需要初始化定位用户位置,确定在地图上显示(附图:首页截图)
  • 监听实时地理位置变化事件(wx.onLocationChange):说明业务涉及体育跑步,需要监听实时地理位置变化事件(附图:首页截图)
  • 接收位置消息(前台)(wx.startLocationUpdate):说明业务涉及体育跑步,需要接收位置消息(前台)(附图:首页截图)

以下步骤一步一步弄,顺序不能乱,通常是能一次性运行起来的!

2.1 克隆代码到本地

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

2.2 安装依赖

在项目根目录执行:

npm install

可能会报路径错误:根据报错创建指定目录

2.3 导入项目

微信开发者工具导入项目,填写自己的AppID(不能用测试号,后面需要申请插件,测试号无法申请) 不使用云服务

导入项目

2.4 构建npm

在微信开发者工具(必须npm install后才能构建npm)

​ 点击「工具」-「构建npm」

2.5 快速体验-无需自己搭建后端

无需自己搭建后端服务,后端是本人启动的,不确定什么时候会停服,且数据都存储在项目作者服务器,部分接口被禁用(比如创建活动、课程)

  1. 小程序后台,在 开发管理-开发设置-服务器域名 中,将 https://dev.run.nunet.cn 分别添加到 request合法域名uploadFile合法域名downloadFile合法域名中;
  2. 编辑config.js中的配置1,根据提示填写自己的appidsecret
  3. 保存之后,在开发者工具中点击编译运行(信任并运行)

https://dev.run.nunet.cn是本人搭建的后端服务,不确定什么时候回关服

2.6 构建后端项目-自己搭建后端项目

后端用的PHPLaravel框架写的,所以要求你会基本的PHP语法,需要你本地有PHP7.2+MySQL环境。

具体后端项目见:https://github.com/Chef5/PopRun-b

本地搭建好后端项目之后,编辑config.js中的配置,注释掉配置1,打开配置2

保存后,在开发者工具中点击编译运行(信任并运行)

2.7 常见报错

Q: 首次运行,通常控制台会报插件问题

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: 点击报错中的蓝色文字添加插件,就可以便捷添加。

导入项目

导入项目

可能因为你的小程序没有开通相关类目,无法开通,可以根据这个文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

我开通的是: 体育 > 在线健身 工具 > 信息查询 工具 > 预约/报名

然后在 开发-开发管理-接口设置 中自助开通获取当前的地理位置、速度监听实时地理位置变化事件接收位置消息(前台)权限

注意:测试号因为无法配置类目,所以无法开通插件

2.8 其他注意事项

注意,本项目是20年我那会大四做的,当时技术有限,或多或少都留下了不少的坑,如果需要自用,请不要喷我哈。

本人于2023年2月,根据本文档重新跑了一遍,纠正了一些坑,项目能顺利跑起来,并备注了一些注意事项,可以全局搜索:// TODO: 查看。

2.9 如果需要使用less

如果不需要使用less,直接编辑wxss文件,以下内容请忽略

  • VS Code:Easy Less 插件-可以将less编译为wxss

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

LICENSE

MIT

poprun's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

poprun's Issues

采用后端本地后,一直报错obejct是什么原因啊

已经按照教程部署了前后端,后端也可以正常添加课程以及创建活动,但是修改请求环境为后端本地后.前端页面打开后一直报object,这是什么原因呢,具体需要修改那部分内容呢.还望大佬能在百忙之中抽空解答.
_20220430083302

项目跑不起来?

本项目是20年本人大四做的,当时技术有限,可能有一些设计问题,勿喷!

本人于2023.2.20重新整理优化了一下,现在按照文档应该能够跑起了,如果还跑不起来,请在下方回复!🤖

为啥子个人中心打不开呀

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.