共享单车项目(二)--开发微信小程序

首先我们要制作一个微信小程序。
这里一定要注意微信开发者工具版本的问题，有一些API已经不支持了。

该微信小程序要有定位，添加单车，扫码解锁单车，支付等功能。

1.首先要去微信公众平台注册一个账号
https://mp.weixin.qq.com/

2.登录账号，完善信息（这里不再详细讲解），下载微信开发者工具

3.使用微信开发者工具创建一个小程序项目

这里只记录一下我写的代码（由于我并非擅长js，所以代码比较low，），详细的开发API再微信公众平台的小程序开发中都有非常详细的讲解和实例。

微信小程序代码：

pages/demo.wxml

 <view class='map'>
<map
  id="map"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  markers='{{markers}}'
  scale="18"
  polyline="{{polyline}}"
  bindregi"regionchange"
  show-location
  style="width: 100%; height: 100vh;"
></map>
<cover-view bindtap='location' class='location'>
  <cover-image src="/image/location.png" class='location_img'></cover-image>
</cover-view>
<cover-view bindtap='back' class='back'>
  <cover-image src="/image/img1.png" class='img1'></cover-image>
</cover-view>
<cover-view bindtap='qrcode' class='qrcode'>
  <cover-image src="/image/qrcode.png" class='qrcode_img'></cover-image>
</cover-view>
<cover-view bindtap='pay' class='pay'>
  <cover-image src="/image/pay.png" class='pay_img'></cover-image>
</cover-view>
<cover-view bindtap='bike' class='bike'>
  <cover-image src='/image/bike.png' class='bike_img'></cover-image>
</cover-view>
</view>

pages/demo.wxss

/* pages/demo/demo.wxss */
page{
  height: 100%;
  background: #eeeeee;
}
.map{
  position: relative;
}
.back{
  position: absolute;
  bottom:10rpx;
  left:20rpx;
}
.img1{width:100rpx;height:100rpx;}
.qrcode{
  position: absolute;
  bottom:20rpx;
  left:50%;
  margin-left:-110rpx;
}
.qrcode_img{width:250rpx;height:110rpx}
.pay{
  position: absolute;
  bottom:10rpx;
  right:10rpx;
}
.pay_img{width:110rpx;height: 110rpx;}
.location{
  position: absolute;
  top:44.1%;
  left:46.5%;
}
.location_img{width:50rpx;height: 80rpx;}
.bike{
  position: absolute;
  top:0%;
  left: 0%;
}
.bike_img{width:55rpx;height:65rpx;}

pages/demo.js

Page({
  data: {
    latitude:0,
    longitude:0,
    //显示的单车
    markers:[],
    // markers: [{
    //   iconPath: '/image/location.png',
    //   id: 0,
    //   latitude: this.lat,
    //   longitude: this.log,
    //   // longitude: 113.3245211,
    //   // latitude: 23.10229,
    //   width: 20,
    //   height: 30
    // }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: '#FF0000DD',
      width: 2,
      dottedLine: true
    }]
  },
  onLoad() {
    var that = this;

    //创建一个map上下文，如果想要调用地图相关的方法
    that.mapCtx = wx.createMapContext('map');

    //获取当前的位置信息
    wx.getLocation({
      //如果获取成功，会调用success
      success: function (res) {
       // console.log(res.latitude+"  "+res.longitude)
       var log=res.longitude;
       var lat=res.latitude;
        // console.log("纬度" + that.lat + "经度" + that.log)

        //查找附近的单车
        wx.request({
          url: "http://localhost:8888/bikes",
          method: 'GET',
          success: function (res) {
            const bikes = res.data.map((item) => {
              return {
                id: item.id,
                iconPath: "/image/bike.png",
                width: 30,
                height: 35,
                latitude: item.latitude,
                longitude: item.longitude
              };
            });
            // 修改data里面的markers
            that.setData({
              // iconPath: "/image/bike.png",
              // width: 5,
              // height: 8,
              latitude: lat,
              longitude: log,
              markers: bikes
            });
          }
        })

      }
    });
  },

  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  location(){
    console.log('location')
  },
  back() {
    this.mapCtx.moveToLocation();
    //console.log('back')
  },
  qrcode(){
    var that = this;
    //console.log('qrcode')
    //点击扫描按钮
    wx.scanCode({
      success: function (r) {
        //扫描成功获取二维码的信息
        var code = r.result;
        //console.log(r);
        //向后台发送请求
        wx.request({
          //method: 'POST',
          url: 'http://localhost:8888/bike', //仅为示例，并非真实的接口地址
          data: {
            qrCode: code,
            status:0,
            latitude: that.data.latitude,
            longitude: that.data.longitude
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
          }
        })
      }
    })
  },
  pay(){
    console.log('pay')
  },

  bike(){
    var that = this;
    //console.log('bike')
    //添加车辆的按钮
    that.mapCtx.getCenterLocation({
      success: function (res) {
        var lat = res.latitude;
        var log = res.longitude;
        wx.request({
          url: "http://localhost:8888/bike",
          method: 'POST',
          data: {
            latitude: lat,
            longitude: log
          },
          success: function () {
            console.log("成功!!!")
            //向后台发送请求，将单车查找出来
            wx.request({
              url: "http://localhost:8888/bikes",
              method: 'GET',
              success: function (res) {
                const bikes = res.data.map((item) => {
                  return {
                    id: item.id,
                    iconPath:"/image/bike.png",
                    width:30,
                    height: 35,
                    latitude: item.latitude,
                    longitude: item.longitude
                  };
                });
                // 修改data里面的markers
                that.setData({
                  // iconPath: "/image/bike.png",
                  // width: "50rpx",
                  // height: "65rpx",
                  markers: bikes
                });
              }
            })

          }
        })
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //在这个事件中，记录用户的行为，然后发送到后台服务器
    //获取当前位置
    wx.getLocation({
      success: function (res) {
        //纬度
        var lat = res.latitude;
        //经度
        var log = res.longitude;
        //从本地存储中取出唯一身份标识
        var openid = wx.getStorageSync('openid')
        //发送request向mongo中添加数据（添加一条文档（json））
        wx.request({
          //用POST方式请求es可以只指定index和type，不用指定id
          url: "http://localhost:8888/log/ready",
          data: {
            time: new Date(),
            openid: openid,
            lat: lat,
            log: log
          },
          method: "POST"
        })
      },
    })
  }


})

app.js

//app.js
App({
  onLaunch: function () {

    // 登录,然后获取到用户的唯一身份ID，用于以后记log
    wx.login({
      success: res => {
        //根据你的微信小程序的密钥到后台获取ID
        // 发送 res.code 到后台换取 openId, sessionKey, unionId

        if (res.code) {
          var appid = "wxee303494e2cd7684";
          var secret = "06f9669da34167957c4e67173f26e849";
          var code = res.code;
          //发起网络请求
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
            success: function (r) {
              //获取到每个用户的对立id
              //console.log(r.data.openid)
              //把openid保存到本地
              wx.setStorageSync('openid', r.data.openid)
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }

      }
    })
    
  },
  globalData: {
    userInfo: null
  }
})

app.

{
  "pages": [
    "pages/demo/demo",
    "pages/index/index",
    "pages/register/reg",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "单车",
    "navigationBarTextStyle": "black"
  }
}