微信小程序bike單車，前臺使用小程序地圖控件+weui+小程序相關組件和API，後臺使用SpringBoot+JPA，用戶及單車信息保存進mongodb，短信平臺的配置信息和臨時生成的驗證碼存放進redis用於校驗。實現定位，單車增加及搜索，用戶註冊，短信接口調用，支付押金等功能。

1. 地圖定位及顯示周圍單車數量

頁面通過<map>標簽來引入微信地圖

<map id=‘myMap‘ longitude=‘{{longitude}}‘ latitude=‘{{latitude}}‘ controls=‘{{controls}}‘ markers=‘{{markers}}‘ 
 
show-location=‘true‘ 
bindcontroltap=‘controltap‘ scale=‘17‘ style=‘width: 100%; height: 100%‘>
</map>

定位通過監聽頁面加載的生命周期函數onLoad獲取經緯度來實現，同時獲取周圍的單車信息

 onLoad: function() {
    var that = this;
    wx.getLocation({
      success: function(res) {
        var longitude = res.longitude;
        
 
var latitude = res.latitude;
        that.setData({
          longitude: longitude,
          latitude: latitude
        })
        // 查找單車信息
        findBikes(longitude, latitude, that);
      },
    });

/*其他加載項*/
}

查找周圍單車

function findBikes(longitude, latitude, that) {
  wx.request({
    url: 
 
‘http://localhost:8080/bike/findNear‘,
    method: ‘GET‘,
    data: {
      longitude: longitude,
      latitude: latitude
    },
    success: function(res) {
      var bikes = res.data.map((geoResult) => {
        return {
          longitude: geoResult.content.location[0],
          latitude: geoResult.content.location[1],
          iconPath: ‘/images/bike.png‘,
          width: 35,
          height: 40,
          id: geoResult.content.id
        }
      })
      // 將bike數組set到當前頁面的marker
      that.setData({
        markers: bikes
      })
    }
  })
}

service層中獲取周圍單車信息

    /**
     * 根據當前經緯度查找附近的bikes
     * @param longitude
     * @param latitude
     * @return
     */
    @Override
    public List<GeoResult<Bike>> findNear(double longitude, double latitude) {
        // 2千米範圍內，狀態為的0的bike， 數量限制20
        NearQuery nearQuery = NearQuery
                .near(longitude, latitude)
                .maxDistance(2, Metrics.KILOMETERS)
                .query(new Query(Criteria.where("status").is(0)).limit(20));

        GeoResults<Bike> geoResults = mongoTemplate.geoNear(nearQuery, Bike.class);
        return geoResults.getContent();

    }

2. 調用短信接口發送驗證碼

前臺方法省略，電話號碼填寫完畢後獲取短信驗證碼及校驗【註意：短信簽名需要在騰訊雲申請並獲得通過】

    /**
     * 調用騰訊雲短信API發送短信，並將手機號及驗證碼存入redis
     * @param countryCode
     * @param phoneNum
     * @return
     */
    @Override
    public boolean sendMsg(String countryCode, String phoneNum) {
        Jedis jedis = pool.getResource();

        // 從redis中獲取之前存儲的appid與appkey
        int appid = Integer.parseInt(jedis.get("appid"));
        String appkey = jedis.get("appkey");

        boolean flag = true;
        try {
            // 生成短信驗證碼(4位)
            int code = (int)((Math.random() * 9 + 1) * 1000);
            SmsSingleSender ssender = new SmsSingleSender(appid, appkey);
            // 向對應手機號的用戶發送短信
            SmsSingleSenderResult result = ssender.send(0, countryCode, phoneNum, "【bike單車】你的驗證碼為：" + code + "。如非本人操作，請忽略本短信。" , "", "");
            // 將發送的手機號作為key,驗證碼作為value保存到redis中(有效時長300s)
            jedis.setex(phoneNum, 300, code + "");
        } catch (Exception e) {
            flag = false;
            logger.error("調用短信接口異常" + e.getMessage());
        } finally {
            jedis.close();
        }
        return flag;
    }

    /**
     * 從redis中獲取並校驗驗證碼是否匹配
     * @param phoneNum
     * @param verifyCode
     * @return
     */
    @Override
    public boolean verify(String phoneNum, String verifyCode) {
        Jedis jedis = pool.getResource();
        String code = jedis.get(phoneNum);
        jedis.close();
        return code != null && code.equals(verifyCode);
    }

3. 押金充值

需要企業認證，方法參考API，需要註意的是充值成功後更新用戶押金及狀態

   success: function (res) {
              // 關閉充值中的加載對話框
              wx.hideLoading();
              // 交過押金後，將用戶status更新為2
              var globalData = getApp().globalData;
              globalData.status = 2;
              wx.setStorageSync("status", 2);
              wx.navigateTo({
                url: ‘../identify/identify‘,
              })
            }

4. 實名認證

formSubmit: function(e) {
    // 獲取全局變量的數據
    var globalData = getApp().globalData;

    // 獲取手機號
    var phoneNum = myUtil.get(‘phoneNum‘);

    // 獲取姓名和身份證號
    var name = e.detail.value.name;
    var idNum = e.detail.value.idNum;
    wx.request({
      url: ‘http://localhost:8080/user/identify‘,
      header: {‘content-type‘: ‘application/x-www-form-urlencoded‘ },
      data: {
        phoneNum: phoneNum,
        name: name,
        idNum: idNum,
        status: 3
      },
      method: ‘POST‘,
      success: function(res) {
        globalData.status = 3;
        wx.setStorageSync(‘status‘, 3);
        // 完成所有註冊流程，跳轉到首頁
        wx.navigateTo({
          url: ‘../index/index‘,
        });
      }
    })
  }

完成這一步，將用戶信息存進mongodb，並且跳轉到用車界面

5. 故障申報

將故障信息及地理位置寫入數據庫，修改單車狀態。

共享單車微信小程序