微信小程序開發之OFO共享單車分析,小程序的地圖組件

2017-12-20

導讀：想學一下微信小程序，發現文檔這東西，干看真沒啥意思。所以打算自己先動手擼一個。摩拜單車有自己的小程序，基本功能都有，方便又小巧，甚是喜愛。于是我就萌生了一個給ofo共...

想學一下微信小程序，發現文檔這東西，干看真沒啥意思。所以打算自己先動手擼一個。摩拜單車有自己的小程序，基本功能都有，方便又小巧，甚是喜愛。于是我就萌生了一個給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();
}
})

復制代碼

至此，首頁地圖已經完成了，下一節我們要編寫響應的跳轉頁面

其他章節
微信小程序開發之OFO共享單車——掃碼
微信小程序開發之OFO共享單車——單車報障頁
微信小程序開發之OFO共享單車——個人中心頁
微信小程序開發之OFO共享單車——錢包與充值

第二部分：如何開通一個小商店

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

微信小程序開發之OFO共享單車分析,小程序的地圖組件