首先我们要制作一个微信小程序。
这里一定要注意微信开发者工具版本的问题,有一些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"
}
}