微信小程序开发之OFO共享单车分析,小程序的地图组件

2022-04-21 管理员

想学一下微信小程序，发现文档这东西，干看真没啥意思。所以打算自己先动手撸一个。摩拜单车有自己的小程序，基本功能都有，方便又小巧，甚是喜爱。于是我就萌生了一个给ofo共享单车撸一个小程序(不知道为啥ofo没有小程序)的想法。
这一节我们先来剖析一下小程序的地图组件

1.准备工作

微信小程序当然属于腾讯大佬的（给大佬递茶）：微信小程序开发者工具下载，腾讯开放了小程序个人开发平台，只需要一个微信号就可以成为小程序开发者了。

2.小程序页面

打开小程序开发者工具，用微信扫码登录，创建一个默认的小程序。

pages文件夹下存放着小程序所有的业务页面；
index文件夹就是一个页面，index.wxml是页面的结构文件，类似html。
index.wxss是页面的样式，其实就是css；index.js是页面的逻辑，数据请求与渲染都是都在这个页面完成。
logs文件夹存放着小程序开发日志，目前暂时用不到。
utils.js可以编写自己的JavaScript插件也可以引入第三方插件。
app.js处理全局的一些逻辑，比如定义全局变量存放获取的用户信息，这样每个页面都可以获取用户信息。
app.json 是全局配置文件，比如设置标题栏的背景色等。
app.wxss 存放页面的公共样式，如果多个页面需要用到同一样式，就可以写在这里。
调试按钮用来进行调试，功能和chrome dev调试工具差不多。
项目按钮显示预览二维码，用于真机调试。必须真机调试测试代码，自带的调试工具有时候会出bug

3.创建页面结构

上一节已经分析了默认的文件结构以及它们的功能，现在我们要创建ofo小程序所需要的页面。
删除pages下默认的index文件夹，logs/utils文件夹可选择性删除
在与pages同级目录下创建images文件夹，存放页面需要用到的图标，下载图标
本小程序不需要在app.js里面编写内容，可以先注释这里面的代码
在app.json里，删掉默认代码，编写如下代码(注：app.json文件里不能有任何注释，这里是为了描述页面功能更直观)：

{
"pages":[
"pages/index/index", // 地图页
"pages/warn/index", // 车辆报障页
"pages/scanresult/index", // 扫码成功页
"pages/billing/index", // 开始计费页
"pages/my/index", // 账户页
"pages/wallet/index", // 钱包页
"pages/charge/index", // 充值页
"pages/logs/logs" // 日志页
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#b9dd08", // 标题栏背景色
"navigationBarTitleText": "ofo 共享单车", // 标题栏文字
"navigationBarTextStyle":"black" // 标题栏文字样式
}
}

复制代码

在app.wxss里面。我们先把页面的通用样式给出来（这一步我是在所有页面写完后，发现有些页面有着相同的样式，再把公共样式抽离出来放在app.wxss里面的。）

/**app.wxss**/
.container{
background-color: #f2f2f2;
height: 100vh;
}
.title{
background-color: #f2f2f2;
padding: 30rpx 0 30rpx 50rpx;
font-size: 28rpx;
color: #000;
}
.tapbar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 40rpx;
}
.btn-charge{
width: 90%;
background-color: #b9dd08;
margin: 40rpx auto 30rpx;
text-align: center;
}

保存后，你的pages文件夹下就是这样的界面了（在app.json下创建路径会自动创建文件夹，贼方便）:

4.编写地图首页 (index文件夹)

先来看一下地图首页效果图

页面分析：

整页显示地图，宽高占手机窗口的100%
地图之上有五个按钮图标和多个黄色ofo标记：定位按钮，立即用车按钮，举报按钮，黄色头像按钮和位于地图中心的定位标记。

要在页面显示地图，我们需要在index.wxml引入地图组件：

<view class="container">
<map id="ofoMap"
latitude="{{latitude}}" // 纬度
longitude="{{longitude}}" // 经度
scale="{{scale}}" // 缩放级别
show-location/> // 显示带有方向的小圆点
</view>

复制代码

{{...}} 里面是模板数据，待会会在index.js里的data对象里面定义。

初始化模板数据，在index.js的data对象里添加如下代码：

//index.js
Page({
data: {
scale: 18, // 缩放级别，默认18，数值在0~18之间
latitude: 0, // 给个默认值
longitude: 0 // 给个默认值
},
onLoad: function(options){
// 1.页面初始化 options为页面跳转所带来的参数
},
onReady: function(){
// 页面渲染完成
},
onShow: function(){
// 页面显示
},
onHide: function(){
// 页面隐藏
},
onUnload: function(){
// 页面关闭

复制代码

这样我们的地图就默认中心位置为经度 0，纬度0。当然可能在开发者工具里显示不出来(有bug)。莫慌！因为这不是我们想要的，我们想要的是我们自己的位置，所以得先获取我们当前所在位置的经纬度，在index.js里的onLoad方法里添加如下代码：

onLoad: function(options){
// 1.页面初始化 options为页面跳转所带来的参数
// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
wx.getLocation({
type: "gcj02", // 坐标系类型
// 获取经纬度成功回调
success: (res) => { // es6 箭头函数，可以解绑当前作用域的this指向，使得下面的this可以绑定到Page对象
this.setData({ // 为data对象里定义的经纬度默认值设置成获取到的真实经纬度，这样就可以在地图上显示我们的真实位置
longitude: res.longitude,
latitude: res.latitude
})
}
});

复制代码

tips：res是一参数对象，它是由调用的对应API传过来的，如果你想知道res的具体值，可以在成功回调函数里打印：console.log(res)，然后在控制台输出，看看它包含什么内容。在调用一个陌生API的时候可以用这种方法查看返回的对象数据，对处理逻辑很有帮助。
我们在地图上显示了我们的真实位置，但没有移动到页面的中心位置，微信提供的wx.moveToLocation()函数可以把当前位置移动到地图中心。修改index.js：

//index.js
Page({
data: {
scale: 18,
latitude: 0,
longitude: 0
},
// 页面加载
onLoad: function(options){
// 1.页面初始化 options为页面跳转所带来的参数
// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
wx.getLocation({
type: "gcj02", // 坐标系类型
// 获取经纬度成功回调
success: (res) => { // es6 箭头函数，可以解绑当前作用域的this指向，使得下面的this可以绑定到Page对象
this.setData({ // 为data对象里定义的经纬度默认值设置成获取到的真实经纬度，这样就可以在地图上显示我们的真实位置
longitude: res.longitude,
latitude: res.latitude
})
}
});
}
// 页面显示
onShow: function(){
// 1.创建地图上下文，移动当前位置到地图中心
this.mapCtx = wx.createMapContext("ofoMap"); // 地图组件的id
this.movetoPosition()
},
// 定位函数，移动位置到地图中心
movetoPosition: function(){
this.mapCtx.moveToLocation();
}
})

复制代码

我们在onShow函数里为地图组件（id为ofoMap）创建了一个地图上下文，调用了自定义函数movetoPosition()，而在自定义函数里又调用了moveToLocation这个API，这样，页面一显示就在地图中心显示当前位置。

我们地图上定位了我们的真实位置，但地图组件还是默认样式（点击调试，右侧面板点击wxml可以查看地图组件的默认格式），所以我们为地图组件添加样式，在index.wxss里编写样式：

/**index.wxss**/
.container{
position: relative;
width: 100%; // 宽度占满设备
height: 100vh; // 高度占满设备
}
#ofoMap{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;

复制代码

保存刷新，整个屏幕就都显示地图了>_<

我们再来添加地图上的按钮
其实这里的按钮不是真正的按钮，它们属于地图上的控件属性，并且不随着地图移动。这里有一个坑：
地图组件属于微信原生组件，层级最高，任何元素都不能在地图之上显示，即无论设置多大z-index都无法显示。所以，要想在地图上添加按钮来满足需求，就要用到地图控件属性。

要添加地图控件，先在地图组件里声明controls="..."：

<view class="container">
<map id="ofoMap"
latitude="{{latitude}}" // 纬度
longitude="{{longitude}}" // 经度
scale="{{scale}}" // 缩放级别
controls="{{controls}}" // 地图控件数组，多个控件存放在数组里
show-location/> // 显示带有方向的小圆点
</view>

复制代码

然后在index.js设置controls(看代码注释了解具体用法)

//index.js
Page({
data: {
scale: 18,
latitude: 0,
longitude: 0
},
// 页面加载
onLoad: function(options){
// 1.页面初始化 options为页面跳转所带来的参数
// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
...已省略
// 3.设置地图控件的位置及大小，通过设备宽高定位
wx.getSystemInfo({ // 系统API,获取系统信息，比如设备宽高
success: (res) => {
this.setData({
// 定义控件数组，可以在data对象初始化为[],也可以不初始化，取决于是否需要更好的阅读
controls: [{
id: 1, // 给控件定义唯一id
iconPath: '/images/location.png', // 控件图标
position: { // 控件位置
left: 20, // 单位px
top: res.windowHeight - 80, // 根据设备高度设置top值，可以做到在不同设备上效果一致
width: 50, // 控件宽度/px
height: 50 // 控件高度/px
},
clickable: true // 是否可点击，默认为true,可点击
},
{
id: 2,
iconPath: '/images/use.png',
position: {
left: res.windowWidth/2 - 45,
top: res.windowHeight - 100,
width: 90,
height: 90
},
clickable: true
},
{
id: 3,
iconPath: '/images/warn.png',
position: {
left: res.windowWidth - 70,
top: res.windowHeight - 80,
width: 50,
height: 50
},
clickable: true
},
{
id: 4,
iconPath: '/images/marker.png',
position: {
left: res.windowWidth/2 - 11,
top: res.windowHeight/2 - 45,
width: 22,
height: 45
},
clickable: false
},
{
id: 5,
iconPath: '/images/avatar.png',
position: {
left: res.windowWidth - 68,
top: res.windowHeight - 155,
width: 45,
height: 45
},
clickable: true
}]
})
}
});
}
// 页面显示
onShow: function(){
...已省略
},
// 定位函数，移动位置到地图中心
movetoPosition: function(){
this.mapCtx.moveToLocation();
}
})

复制代码

tips：我们在给控件设置top,left值时，用到了设备宽高。这样的话我们的控件位置就会在所有不同比例的设备上显示相同的效果了

我们再为地图控件绑定事件

现在地图上总共有四个图标可点击(地图中心的标记控件不需要点击，是用来指示中心位置的)，所有我们需要为每个控件绑定不同的事件以实现不同的功能：

点击定位控件，定位当前位置到地图中心，因为用户在拖动地图，有时需要回到当前所在位置。
点击立即用车控件，调用微信内置扫码功能。然后获取开锁密码。
点击举报按钮，前往维修报障页面。
点击用户头像按钮，前往登录页面进行登录，查看余额，充值等操作

为控件绑定事件，同样需要在地图控件进行声明：

<view class="container">
<map id="ofoMap"
latitude="{{latitude}}" // 纬度
longitude="{{longitude}}" // 经度
scale="{{scale}}" // 缩放级别
controls="{{controls}}" // 地图控件数组，多个控件存放在数组里
bindcontroltap="bindcontroltap" // 控件点击事件
show-location/> // 显示带有方向的小圆点
</view>

复制代码

注意： bindcontroltap事件会响应所有控件的点击，所以，我们需要根据控件id来区分控件，然后响应不同的事件。这就是为什么要给控件设置id。

在index.js添加bindcontroltap事件：

//index.js
Page({
data: {
scale: 18,
latitude: 0,
longitude: 0
},
// 页面加载
onLoad: function(options){
// 1.获取定时器，用于判断是否已经在计费
this.timer = options.timer;
// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
...已省略
// 3.设置地图控件的位置及大小，通过设备宽高定位
...已省略
}
// 地图控件点击事件
bindcontroltap: function(e){
// 判断点击的是哪个控件 e.controlId的值是当前点击控件的id。
switch(e.controlId){
// 点击定位控件
case 1: this.movetoPosition();
break;
// 点击立即用车，判断当前是否正在计费，此处只需要知道是调用扫码，后面会讲到这里的判断条件
case 2: if(this.timer === "" || this.timer === undefined){
// 没有在计费就扫码
wx.scanCode({
success: (res) => {
// 正在获取密码通知
wx.showLoading({
title: '正在获取密码',
mask: true // 显示蒙层
})
// 请求服务器获取密码和车号
wx.request({
url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password',
data: {},
method: 'GET',
success: function(res){
// 请求密码成功隐藏等待框
wx.hideLoading();
// 携带密码和车号跳转到密码页
wx.redirectTo({
url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,
success: function(res){
wx.showToast({
title: '获取密码成功',
duration: 1000
})
}
})
}
})
}
})
// 当前已经在计费就回退到计费页
}else{
wx.navigateBack({
delta: 1
})
}
break;
// 点击保障控件，跳转到报障页
case 3: wx.navigateTo({
url: '../warn/index'
});
break;
// 点击头像控件，跳转到个人中心
case 5: wx.navigateTo({
url: '../my/index'
});
break;
default: break;
}
},
// 页面显示
onShow: function(){
...已省略
},
// 定位函数，移动位置到地图中心
movetoPosition: function(){
this.mapCtx.moveToLocation();
}
})

复制代码

这里用到的API：
扫码API: wx.scanCode({})
显示加载框： wx.showLoading()
隐藏加载框： wx.hideLoading()
显示提示框： wx.showToast()
隐藏提示框： wx.hideToast()
向服务器发送请求：wx.request({})
关闭当前页面，跳转到指定页面： wx.redirectTo({})
保留当前页面，跳转到指定页面： wx.navigateTo({})
回退到指定页面： wx.naivgateBack({})
查看详细用法，查看官方API文档

tips: 跳转页面传参示例:

let num = 1;
wx.navigateTo({
url: '../other/index?num=' + num
});
// other页面onLoad接受参数
onLoad: function(options){
console.log(options.num); // 1
}
// 多个参数用&分隔，如 'index?num=' + num + '&text=' + 'text'

复制代码

我们现在在地图上添加单车标记makers和位置连线,还是在地图组件里先声明：

<view class="container">
<map id="ofoMap"
latitude="{{latitude}}" // 纬度
longitude="{{longitude}}" // 经度
scale="{{scale}}" // 缩放级别
controls="{{controls}}" // 地图控件数组，多个控件存放在数组里
bindcontroltap="bindcontroltap" // 控件点击事件
polyline="{{polyline}}" // 位置连线
markers="{{markers}}" // 标记数组
bindmarkertap="bindmarkertap" // 标记点击事件
show-location/> // 显示带有方向的小圆点
</view>

复制代码

然后在index.js里定义：

//index.js
Page({
data: {
scale: 18,
latitude: 0,
longitude: 0
},
// 页面加载
onLoad: function(options){
// 1.获取定时器，用于判断是否已经在计费
this.timer = options.timer;
// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
...已省略
// 3.设置地图控件的位置及大小，通过设备宽高定位
...已省略
// 4.请求服务器，显示附近的单车，用marker标记
wx.request({
url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',
data: {},
method: 'GET',
// header: {}, // 设置请求的 header
success: (res) => {
this.setData({
markers: res.data.data
})
}
})
}
// 地图控件点击事件
bindcontroltap: function(e){
...已省略
},
// 地图标记点击事件，连接用户位置和点击的单车位置
bindmarkertap: function(e){
let _markers = this.data.markers; // 拿到标记数组
let markerId = e.markerId; // 获取点击的标记id
let currMaker = _markers[markerId]; // 通过id,获取当前点击的标记
this.setData({
polyline: [{
points: [{ // 连线起点
longitude: this.data.longitude,
latitude: this.data.latitude
}, { // 连线终点(当前点击的标记)
longitude: currMaker.longitude,
latitude: currMaker.latitude
}],
color:"#FF0000DD", // 连线颜色
width: 1, // 连线宽度
dottedLine: true // 虚线
}],
scale: 18
})
},
// 页面显示
onShow: function(){
...已省略
},
// 定位函数，移动位置到地图中心
movetoPosition: function(){
this.mapCtx.moveToLocation();
}
})

复制代码

我在easy-mock上伪造了一些单车的经纬度，是基于我自己的位置。你可以在你周围设置经纬度，使用easy-mock伪造。可以看一下我的数据格式，单车经纬度接口

接下来我们为用户拖动地图绑定事件
我们已经为地图控件和标记响应了不同的事件，现在如果用户拖动地图，我们需要在拖动附近显示单车，先在地图组件声明地图拖动事件：

<view class="container">
<map id="ofoMap"
latitude="{{latitude}}" // 纬度
longitude="{{longitude}}" // 经度
scale="{{scale}}" // 缩放级别
controls="{{controls}}" // 地图控件数组，多个控件存放在数组里
bindcontroltap="bindcontroltap" // 控件点击事件
polyline="{{polyline}}" // 位置连线
markers="{{markers}}" // 标记数组
bindmarkertap="bindmarkertap" // 标记点击事件
bindregionchange="bindregionchange" // 拖动地图事件
show-location/> // 显示带有方向的小圆点
</view>

复制代码

然后在index.js里实现这个事件方法：

//index.js
Page({
data: {
scale: 18,
latitude: 0,
longitude: 0
},
// 页面加载
onLoad: function(options){
// 1.获取定时器，用于判断是否已经在计费
this.timer = options.timer;
// 2.调用wx.getLocation系统API,获取并设置当前位置经纬度
...已省略
// 3.设置地图控件的位置及大小，通过设备宽高定位
...已省略
// 4.请求服务器，显示附近的单车，用marker标记
...已省略
}
// 地图控件点击事件
bindcontroltap: function(e){
...已省略
},
// 拖动地图事件
bindregionchange: function(e){
// 拖动地图，获取附件单车位置
if(e.type == "begin"){
wx.request({
url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition',
data: {},
method: 'GET',
success: (res) => {
this.setData({
_markers: res.data.data
})
}
})
// 停止拖动，显示单车位置
}else if(e.type == "end"){
this.setData({
markers: this.data._markers
})
}
},
// 地图标记点击事件，连接用户位置和点击的单车位置
bindmarkertap: function(e){
...已省略
},
// 页面显示
onShow: function(){
...已省略
},
// 定位函数，移动位置到地图中心
movetoPosition: function(){
this.mapCtx.moveToLocation();
}
})