如何实现一个简单的ofo微信小程序

实现的效果

实现功能简介：

扫码骑车记时功能

用户登录及充值功能

用户报障功能

思路：

要实现这些功能，首先要设置一个首页，首页里面包含所有功能按钮，包括回到当前定位，立即用车，单车报障及个人用户按钮

回到当前定位功能直接调用this.movetoCenter()函数

立即用车功能;调用扫码接口获取开锁密码与当前单车编号，完事进入开锁界面并在90秒后跳转到计费页面并开始记录用户当前开始用车时间。

不过这里需要注意的是在计费中页面，用户仍然可以切换到首页地图，再次点击扫码用车的时候直接进入计费页面。

因为切回首页是把计费页面放在后台,所以使用navtgateTo()方法，而不是使用redirectTo()方法。

单车报障功能

这里要说一嘴的是故障类型跟上传照片是必填，要验证内容是否为空。这里我只是判断了input框中的长度是否大于0；

上传照片这里调用了微信的chooseImage()接口；我使用了一个数组存储上传的照片，所以在删除的时候直接在数组干掉就好了。

用户登录及充值功能

用户登录这里要注意下微信新版本是要授权，在按钮处设置open-type 为 getUserInfo才能使用。

另外我把用户数据存进了storage,这样处理下一次就可以自动登录了。同时在登出的时候也会删除storage.

关于后台： 因为时间（技术）问题暂时没有做出来，后续版本就有了嘿。因此这次我在modeHttp在线mock了后台数据。

源码地址：https://github.com/FengZeHe/ofo_demo

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://fengzehe.github.io/blog/2020/01/10/ofo_demo/