共享单车微信小程序开发经验及过程（上）【附原视频链接...】

找不到工作焦虑于是前几天在牛客上看到了一个实战项目：“搭建共享单车微信小程序” ，于是趁着疫情这几天跟着做了一下。现在来说一下这个项目的开发过程和开发经验以及这个项目中容易踩的坑...“

这个是视频链接：共享单车微信小程序。有兴趣的同学可以看一下这个视频。（这个视频是完全免费的，哈哈!)

项目搭建： 微信开发者工具+IDEmavenA（Eclipse）

开发环境： SpringBoot+Redis+Mongodb

• 小程序首页：

1、怎么获取地图 ，怎么让地图展示我附近的位置

在首页wxml（也就是html）文件中添加map标签 来获取地图，但是这个地图是固定的 我们可以设置longitude（精度）和latitude（纬度）来获取手机附近的地图【这里的longitude、latitude不要写死 因为我们的手机是会移动的 所展现的地图也就是不一样的】，

由于使用的是微信开发者工具 可以通过Sensor中的longitude、latitude的设置

然后我们在首页的js文件中 设置longitude和latitude参数。在首页加载页面时（onLoad：function）调用微信中的 wx.getLocation来获取设备所在的地理位置。

Page({
  data: {
    longitude: 0,
    latitude: 0,
      controls: [],//控件 js文件中有控件的话在wxml文件也要声明这个控件

  onLoad: function() {
    var that = this;//获取当前页面的属性
    wx.getLocation({
      success: function(res) {
        var longitude = res.longitude;
        var latitude = res.latitude;
        that.setData({
          longitude: longitude,
          latitude: latitude
        })

这里需要注意的是在调用wx.getLocation 需要在用户授权该程序获取设备的地理位置

授权信息如下：

可以去微信官方文档上查询（链接地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html）

2、在首页上添加按钮

首页上面的按钮是一些图片 我们要想在首页中添加图片的话要将图片添加到images。要在页面渲染之前添加图片，把图片添加到我们controls数组中（其他按钮相同）```

               that.setData({
      controls: [
        {
          // 扫码按钮
          id: 1,
          iconPath: '/images/qrcoes1.png',
          position: {
            width: 100,
            height: 27,
            left: windowWidth / 2 - 50,
            top: windowHeight - 60
          },
          // 是否可点击
          clickable: true
        },        

```

3、在地图控件上绑定事件（简单来说就是我们在之前有一个中心点 不论我们走多远都点按钮都会回到我们手机定位的这个位置）

说一下这个绑定事件的制作过程，在首页map标签里添加一个点击控件函数（bindregionchange）

 bindcontroltap="controltap"

然后在定位按钮上添加一个微信上下文（wx.createMapContext)用来记录地图的信息 方便我们回到原来的位置）注意的是要在首次渲染完成时调用

onReady: function() {
    // 创建map上下文:记录地图信息，方便回到原来位置
    this.mapCtx = wx.createMapContext('myMap');//这里Mymap要跟在首页Map标签里的ID相同 ，不然是绑定不上的

  },

controltap: function(e) {
    var that = this;
    // 获取控件ID
    var cid = e.controlId;
    switch (cid) {  case 2: { // 定位按钮
        this.mapCtx.moveToLocation();
            break;   }

4、添加车辆

case 5：{
    //获取到当前的车辆。
  var bikes = that.data.markers;
//把一个新的车辆加进去（其实就是加一个js对象）
bikes.push(
    {
        iconPath: '/images/bike.png',
        width: 27,
        height: 27,
        longitude:that.data.longitude, 
        latitude:that.data.latitude

    })
    // 重新赋值
		

			
			

				that.setData({
			

			

				markers: bikes
			

			

				})
			

		
break;

bindregionchange='regionchange' //在map标签里面绑定

regionchange: function(e) {
    var that = this;
    // 获取移动后的位置
    var etype = e.type;//移动的位置 end 是移动后的位置
        if (e.type == 'end') {
      this.mapCtx.getCenterLocation({
        success: function(res) {
          var longitude = res.longitude;
          var latitude = res.latitude;
          findBikes(longitude, latitude, that);
        }
      })
    }
  }

getCenterLocation 是我们移动后中心点的位置 。

res.longitude; 这个方法就是把移动后的位置赋给当前的longitude和latitude。