共享单车微信小程序开发简短总结(附源码）

本项目是博主跟着牛客网做的，下面是源码地址和该项目的总结。

项目源码：

https://download.csdn.net/download/qq_38054219/10943814

总结：

一、在微信开发者工具中创建一个微信小程序的项目。

1.在微信公众平台注册小程序账号

https://mp.weixin.qq.com/

注册好之后，找到AppID

 

2.下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

根据系统自己选择版本进行下载

 

3.创建小程序项目

打开微信开发者工具登陆后创建一个小程序项目

项目目录是项目的保存位置，appID填之前得到的appID。

 

二、地图页面布局和控件事件

首先使用一个<map>标签创建一个地图，可以在开发者文档中找到详细说明，然后在地图上添加一些控件，这就是共享单车的总体布局。

<map 
  id='myMap'
  longitude='{{log}}'
  latitude='{{lat}}'
  controls='{{controls}}'
  show-location='true'  
  scale='18'
  bindcontroltap='controltap'
  style='width:100%;height:100%'
  markers='{{markers}}'
  bindregionchange='regionchange'
>
</map>

longitude、latitude--从js中获取经纬度

controls--从js中获得控件的信息并显示在地图上

show-location--显示带有方向的当前定位点

scale--缩放级别，取值范围为5-18

bindcontroltap--点击控件时触发，会返回control的id，使控件能起作用

markers--标记点，用来标记单车

bindregionchange--视野发生变化时触发

<map>的详细说明可查看帮助文档

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

注：若出现点击控件没有反应，可查看博主的另一篇博客

https://blog.csdn.net/qq_38054219/article/details/86265015

 

三、将微信小程序和后台连接起来

后端使用的开发工具是sts，使用eclipse也可以，创建一个maven项目，使用springboot框架进行开发。

项目目录如下图所示

微信小程序和后端交互的例子如下

wx.request({

url:"http://localhost:8080/bike/add",

data:{

// longitude: log,

// latitude: lat,

location:[log,lat],

status:0

},

method: 'POST',

success: function(res){

//查找单车，然后将单车显示

findBikes(log,lat,that)

}

})

期中的url为@RequestMapping("/bike/add")注解的内容，data为发送的数据，method为请求方法。

 

四、使用腾讯云的短信接口

新用户注册账号时需要使用腾讯云的短信API进行验证，填写手机号发送验证码后，将验证码保存到redis数据库中。

进入腾讯云官网进行登陆，然后在产品中找到短信。

https://cloud.tencent.com/product/csms

进行应用配置，签名内容填写发送方比如“中国移动”，“共享单车”，短信正文填写短信的内容。

然后得到appID和appKey

记得添加腾讯云接口依赖

 

五、数据库

该项目使用了两种数据库redis和mongodb

1.redis

使用redis的原因是redis可以设置一个保存时间，时间一到就自动删除，很适合运用到短信验证这一功能。

2.mongodb

mongodb是一个基于分布式文件存储的数据库。由C++语言编写，旨在为web应用提供可扩展的高性能数据库解决方案，mongodb是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似JSON的BSON格式，因此可以存储比较复杂的数据类型。mongodb最大的特点是支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

而且mongodb的geo得到附近单车非常容易，而不用自己写代码，所以该项目使用mongodb来保存单车和用户信息。