欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
萌芽停车,基于leancloud(含教程)萌芽停车,基于leancloud(含教程)
立即下载

萌芽停车,基于leancloud(含教程)

模板分类 : 小程序模板 模板编号 : Y247 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 17:11 模板等级 : ☆☆☆☆☆

模板截图:

停车小程序项目结构图 萌芽停车,基于leancloud(含教程)(图1)  小程序主要功能包括:

(1)微信用户一键注册登录  (2)微信扫码停车 (3)停车计时计费(带有使用者头像及昵称) (4)微信支付演示(暂无:这需要企业身份申请开通) (5)基于LeanCloud的后台数据管理 (6)停车记录查询:停车开始时间,停车时长,费用,地理位置等信息(后台数据实时刷新) (7)新添加小程序分享功能 (8)停车位二维码生成器(带BudParking-logo)    注:{此功能不属于小程序,用于停车场的车位二维码生成,是停车系统的一部分}

 

萌芽停车,基于leancloud(含教程)(图2)

 

代码:https://github.com/chimuuu/qrcode-python

一、Demo1.扫码停车演示(停车时间,车位,计费,用户头像及昵称显示,小程序分享功能) (微信支付功能需要企业身份申请开通,所以只做演示)

萌芽停车,基于leancloud(含教程)(图3)

 

 

2.用户停车记录查询(含地图查询)

 

萌芽停车,基于leancloud(含教程)(图4)

 

 

3.三个一级界面(主界面,历史记录查询界面,版本界面)

萌芽停车,基于leancloud(含教程)(图5)

 

 

4.后台数据管理(用户注册信息,用户查询自己的使用历史记录) (1)注册用户信息管理(来源于用户微信注册信息)

萌芽停车,基于leancloud(含教程)(图6)

 

 

(2)用户的使用历史记录(时间、地点、时长、费用以及车位等等)

萌芽停车,基于leancloud(含教程)(图7)

 

 

(3)停车位数据及每个停车位的使用状态(是否正被使用-01表示)

萌芽停车,基于leancloud(含教程)(图8)

 

 

5.停车场二维码生成器(python写,带空余车位查询后用于生成二维码)

萌芽停车,基于leancloud(含教程)(图9)

 

 

二、配置所需工具:

(1)微信小程序开发者账号 (2)微信web开发者工具 (3)LeanCloud帐号 (4)LeanCloud工具类av-weapp.js

1.微信小程序开发者账号注册首先在微信公众号平台注册

萌芽停车,基于leancloud(含教程)(图10)

 

 

2.获取AppID和AppSecret

登录登录https://mp.weixin.qq.com,在网站的「设置」-「开发者设置」中,查看微信小程序的AppID和AppSecret;

萌芽停车,基于leancloud(含教程)(图11)

 

 

3.创建项目

添加你自己的AppID,新建项目-BudParking

 

萌芽停车,基于leancloud(含教程)(图12)

 

 

萌芽停车,基于leancloud(含教程)(图13)

 

 

4.注册LeanCloud账号

传送https://leancloud.cn/

 

萌芽停车,基于leancloud(含教程)(图14)

 

 

5.配置LeanCloud应用

登录https://leancloud.cn/applist.html#/apps 在网站的「创建应用」中创建应用 在leancloud控制台配置AppID(小程序ID)和AppSecret(小程序密钥)

萌芽停车,基于leancloud(含教程)(图15)

 

 

 

萌芽停车,基于leancloud(含教程)(图16)

 

 

6.设置微信小程序域名白名单

登录https://mp.weixin.qq.com, 在网站的「设置」-「开发者设置」中,点击「服务器配置」下的「修改」链接,增加域名 具体域名通过https://leancloud.cn/docs/weapp-domains.html查询 {同时在request合法域名下添加https://cli.im(这是在线对二维码进行在线识别的网站)}此功能已移除,采用了微信新开放的扫一扫API,提升了扫码体验 微信限制每月只能修改三次域名白名单

萌芽停车,基于leancloud(含教程)(图17)

 

 

7.获取LeanCloud应用AppID和AppKey

登录https://leancloud.cn/,在网站的「设置」-「应用Key」中,查看App ID,App Key

萌芽停车,基于leancloud(含教程)(图18)

 

 

8.OK! 终于可以进入小程序了!

1)将下载的av-weapp.js(https://unpkg.com/leancloud-storage@2.0.0-beta.6/dist/av-weapp.js)放到utils下 2)使用const AV = require('../../utils/av-weapp.js');路径根据具体情况而定 3)做初始化: AV.init({ appId: '你的LeanCloud-appId', appKey: '你的LeanCloud-appKey', }); 注:在微信小程序中使用 LeanCloud详见 https://leancloud.cn/docs/weapp.html

三、项目使用说明用户使用萌芽停车小程序操作流程如下:

 

萌芽停车,基于leancloud(含教程)(图19)

 

 

 

停车小程序项目结构图

萌芽停车,基于leancloud(含教程)(图20)

小程序主要功能包括:

(1)微信用户一键注册登录  (2)微信扫码停车 (3)停车计时计费(带有使用者头像及昵称) (4)微信支付演示(暂无:这需要企业身份申请开通) (5)基于LeanCloud的后台数据管理 (6)停车记录查询:停车开始时间,停车时长,费用,地理位置等信息(后台数据实时刷新) (7)新添加小程序分享功能 (8)停车位二维码生成器(带BudParking-logo)    注:{此功能不属于小程序,用于停车场的车位二维码生成,是停车系统的一部分}萌芽停车,基于leancloud(含教程)(图21)

代码:https://github.com/chimuuu/qrcode-python 一、Demo1.扫码停车演示(停车时间,车位,计费,用户头像及昵称显示,小程序分享功能) (微信支付功能需要企业身份申请开通,所以只做演示)

萌芽停车,基于leancloud(含教程)(图22)

2.用户停车记录查询(含地图查询)

萌芽停车,基于leancloud(含教程)(图23)

3.三个一级界面(主界面,历史记录查询界面,版本界面)

萌芽停车,基于leancloud(含教程)(图24)

4.后台数据管理(用户注册信息,用户查询自己的使用历史记录) (1)注册用户信息管理(来源于用户微信注册信息)

萌芽停车,基于leancloud(含教程)(图25)

(2)用户的使用历史记录(时间、地点、时长、费用以及车位等等)

萌芽停车,基于leancloud(含教程)(图26)

(3)停车位数据及每个停车位的使用状态(是否正被使用-01表示)

萌芽停车,基于leancloud(含教程)(图27)

5.停车场二维码生成器(python写,带空余车位查询后用于生成二维码)

萌芽停车,基于leancloud(含教程)(图28)

二、配置所需工具:

(1)微信小程序开发者账号 (2)微信web开发者工具 (3)LeanCloud帐号 (4)LeanCloud工具类av-weapp.js

1.微信小程序开发者账号注册首先在微信公众号平台注册

萌芽停车,基于leancloud(含教程)(图29)

2.获取AppID和AppSecret

登录登录https://mp.weixin.qq.com,在网站的「设置」-「开发者设置」中,查看微信小程序的AppID和AppSecret; 萌芽停车,基于leancloud(含教程)(图30)

3.创建项目

添加你自己的AppID,新建项目-BudParking萌芽停车,基于leancloud(含教程)(图31)

萌芽停车,基于leancloud(含教程)(图32) 4.注册LeanCloud账号

传送https://leancloud.cn/萌芽停车,基于leancloud(含教程)(图33)

5.配置LeanCloud应用

登录https://leancloud.cn/applist.html#/apps 在网站的「创建应用」中创建应用 在leancloud控制台配置AppID(小程序ID)和AppSecret(小程序密钥) 萌芽停车,基于leancloud(含教程)(图34)

萌芽停车,基于leancloud(含教程)(图35) 6.设置微信小程序域名白名单

登录https://mp.weixin.qq.com, 在网站的「设置」-「开发者设置」中,点击「服务器配置」下的「修改」链接,增加域名 具体域名通过https://leancloud.cn/docs/weapp-domains.html查询 {同时在request合法域名下添加https://cli.im(这是在线对二维码进行在线识别的网站)}此功能已移除,采用了微信新开放的扫一扫API,提升了扫码体验 微信限制每月只能修改三次域名白名单 萌芽停车,基于leancloud(含教程)(图36)

7.获取LeanCloud应用AppID和AppKey

登录https://leancloud.cn/,在网站的「设置」-「应用Key」中,查看App ID,App Key萌芽停车,基于leancloud(含教程)(图37)

8.OK! 终于可以进入小程序了!

1)将下载的av-weapp.js(https://unpkg.com/leancloud-storage@2.0.0-beta.6/dist/av-weapp.js)放到utils下 2)使用const AV = require('../../utils/av-weapp.js');路径根据具体情况而定 3)做初始化: AV.init({ appId: '你的LeanCloud-appId', appKey: '你的LeanCloud-appKey', }); 注:在微信小程序中使用 LeanCloud详见 https://leancloud.cn/docs/weapp.html

三、项目使用说明用户使用萌芽停车小程序操作流程如下:

萌芽停车,基于leancloud(含教程)(图38)

1.用户通过扫描停车场二维码,获得空车位信息(初次使用会使用微信一键注册并登陆) 2.停车开始计时,计费,页面上方显示当前用户头像和昵称 3.后台记录用户信息(使用记录,方便用户查询) 4.停车结束后,用户微信支付 5.用户可以查询自己的使用记录 随着微信平台开放程度不断提升, “微信智慧生活”在不同行业的解决方案,已经给很多企业带来巨大的移动互联网变革。我们的基于LeanCloud的停车收费微信小程序,可以很好的解决繁琐的停车过程,方便快捷,符合市场需求,并且停车小程序功能完整,具有很好的应用前景。

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。