|
制作者：天下鈔票
demo地址：AirBike：類摩拜單車MAP地圖使用
很完整的demo，填寫手機號碼竟然真的可以收到驗證碼。今天試著分析了一下代碼，將學(xué)習(xí)結(jié)果匯報一下：
亮點一、map組件的使用
map組件的使用，教程里面一般都一句帶過了，因為老的教程map組件在IDE不能用，這個demo給的代碼比較不錯，之前一直有人問怎么把view控件放在map控件之上，這個demo也沒有實現(xiàn)。^_^
map組件的使用在這里不再詳述了，有心人可以對照這個demo看看這個map控件上放其他控件的方法，學(xué)習(xí)一下
代碼如下，詳細(xì)參數(shù)代表什么可以對照小程序官方文檔。
-
<map id="myMap" longitude="{{point.longitude}}" latitude="{{point.latitude}}" markers="{{markers}}" scale="{{mapScale}}" show-location bindregionchange="regionchange" bindmarkertap="markertap" controls="{{controls}}" bindcontroltap="controltap" style="width: {{mapWidth}}; height: {{mapHeight}};top: {{mapTop}}">
-
</map>
亮點二、服務(wù)器與小程序之間如何加密傳輸數(shù)據(jù)
做過微信公眾平臺的可能對這個方式非常熟悉，帖代碼如下：
-
//獲取驗證碼
-
getCodeAct: function() {
-
//請求接口
-
if (checkNetWork.checkNetWorkStatu() == false) {
-
console.log('網(wǎng)絡(luò)錯誤')
-
}else {
-
var that = this
-
var checksum = that.data.getCodeParams.token + that.data.getCodeParams.mobile + that.data.SALT
-
var checksumMd5 = md5.hexMD5(checksum)
-
that.setData({
-
'getCodeParams.checksum': checksumMd5,
-
//顯示loading
-
'getCodeBtnProperty.loading': true
-
})
-
wx.request({
-
url: that.data.AirBikeUrl.getcode,
-
data: that.data.getCodeParams,
-
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
-
// header: {}, // 設(shè)置請求的 header
-
header: {
-
'content-type': 'application/x-www-form-urlencoded'
-
},
-
success: function(res){
-
// success
-
console.log(that.data.getCodeParams),
-
console.log("獲取驗證碼：" + res.data)
-
var message = res.data.message
-
var statu = res.data.status
-
if (statu == '0') {
-
wx.showToast({
-
title: '獲取驗證碼:\n' + message,
-
icon: 'success',
-
duration: 2000,
-
})
-
//啟動定時器
-
var number=60;
-
var time = setInterval(function(){
-
number--;
-
that.setData({
-
'getCodeBtnProperty.title':number + '秒',
-
'getCodeBtnProperty.disabled': true
-
})
-
if(number==0){
-
that.setData({
-
'getCodeBtnProperty.title':'重新獲取',
-
'getCodeBtnProperty.disabled': false
-
})
-
clearInterval(time);
-
}
-
},1000);
-
}else {
-
wx.showToast({
-
title: '注冊登錄:\n' + message,
-
icon: 'loading',
-
duration: 2000,
-
})
-
}
-
//光標(biāo)下移
-
that.setData({
-
'codeTfFocus': true
-
})
-
},
-
fail: function(res) {
-
// fail
-
console.log(res)
-
that.failMessage()
-
},
-
complete: function() {
-
// complete
-
//隱藏loading
-
that.setData({
-
'getCodeBtnProperty.loading': false
-
})
-
}
-
})
-
}
-
},
首先，使用var checksum = that.data.getCodeParams.token + that.data.getCodeParams.mobile + that.data.SALT拼接字符串，然后用var checksumMd5 = md5.hexMD5(checksum)將該字符串進(jìn)行MD5加密，最后將token，mobile，和加密后的字符串傳送給服務(wù)器端，服務(wù)器端接受到token和mobile以后，與服務(wù)器端的SALT（服務(wù)器端SALT與小程序端的一致，但是并未通過網(wǎng)絡(luò)傳輸）拼接后，也進(jìn)行MD5加密，如果加密后的字符串一致，表示數(shù)據(jù)在傳輸過程中既沒有被篡改，也沒有人偽造該數(shù)據(jù)（因為偽造者不知道傳輸過程的SALT），傳輸?shù)臄?shù)據(jù)截圖如下：
說的有什么不對的，歡迎指點。
亮點三、demo里面包括MD5.js加密函數(shù)，還有檢測網(wǎng)絡(luò)連接狀態(tài)的判斷函數(shù)，收藏總要用得著。
|
