用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

Demo分析学习《二》AirBike:类摩拜单车MAP地图使用

纸飞机 2018-3-8 09:35

制作者:天下钞票demo地址: 很完整的demo,填写手机号码竟然真的可以收到验证码。今天试着分析了一下代码,将学习结果汇报一下:亮点一、map组件的使用map组件的使用,教程里面一般都一句带过了,因为老的教程map组 ...

制作者:天下钞票

demo地址:
很完整的demo,填写手机号码竟然真的可以收到验证码。今天试着分析了一下代码,将学习结果汇报一下:

亮点一、map组件的使用

map组件的使用,教程里面一般都一句带过了,因为老的教程map组件在IDE不能用,这个demo给的代码比较不错,之前一直有人问怎么把view控件放在map控件之上,这个demo也没有实现。^_^

map组件的使用在这里不再详述了,有心人可以对照这个demo看看这个map控件上放其他控件的方法,学习一下
代码如下,详细参数代表什么可以对照官方文档。

  1. 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}}">

亮点二、服务器与小程序之间如何加密传输数据

做过微信公众平台的可能对这个方式非常熟悉,帖代码如下:

  1. //获取验证码
  2. getCodeAct: function() {
  3. //请求接口
  4. if (checkNetWork.checkNetWorkStatu() == false) {
  5. console.log('网络错误')
  6. }else {
  7. var that = this
  8. var checksum = that.data.getCodeParams.token + that.data.getCodeParams.mobile + that.data.SALT
  9. var checksumMd5 = md5.hexMD5(checksum)
  10. that.setData({
  11. 'getCodeParams.checksum': checksumMd5,
  12. //显示loading
  13. 'getCodeBtnProperty.loading': true
  14. })
  15. wx.request({
  16. url: that.data.AirBikeUrl.getcode,
  17. data: that.data.getCodeParams,
  18. method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  19. // header: {}, // 设置请求的 header
  20. header: {
  21. 'content-type': 'application/x-www-form-urlencoded'
  22. },
  23. success: function(res){
  24. // success
  25. console.log(that.data.getCodeParams),
  26. console.log("获取验证码:" + res.data)
  27. var message = res.data.message
  28. var statu = res.data.status
  29. if (statu == '0') {
  30. wx.showToast({
  31. title: '获取验证码:\n' + message,
  32. icon: 'success',
  33. duration: 2000,
  34. })
  35. //启动定时器
  36. var number=60;
  37. var time = setInterval(function(){
  38. number--;
  39. that.setData({
  40. 'getCodeBtnProperty.title':number + '秒',
  41. 'getCodeBtnProperty.disabled': true
  42. })
  43. if(number==0){
  44. that.setData({
  45. 'getCodeBtnProperty.title':'重新获取',
  46. 'getCodeBtnProperty.disabled': false
  47. })
  48. clearInterval(time);
  49. }
  50. },1000);
  51. }else {
  52. wx.showToast({
  53. title: '注册登录:\n' + message,
  54. icon: 'loading',
  55. duration: 2000,
  56. })
  57. }
  58. //光标下移
  59. that.setData({
  60. 'codeTfFocus': true
  61. })
  62. },
  63. fail: function(res) {
  64. // fail
  65. console.log(res)
  66. that.failMessage()
  67. },
  68. complete: function() {
  69. // complete
  70. //隐藏loading
  71. that.setData({
  72. 'getCodeBtnProperty.loading': false
  73. })
  74. }
  75. })
  76. }
  77. },

首先,使用var checksum = that.data.getCodeParams.token + that.data.getCodeParams.mobile + that.data.SALT拼接字符串,然后用var checksumMd5 = md5.hexMD5(checksum)将该字符串进行MD5加密,最后将token,mobile,和加密后的字符串传送给服务器端,服务器端接受到token和mobile以后,与服务器端的SALT(服务器端SALT与小程序端的一致,但是并未通过网络传输)拼接后,也进行MD5加密,如果加密后的字符串一致,表示数据在传输过程中既没有被篡改,也没有人伪造该数据(因为伪造者不知道传输过程的SALT),传输的数据截图如下:

说的有什么不对的,欢迎指点。

亮点三、demo里面包括MD5.js加密函数,还有检测网络连接状态的判断函数,收藏总要用得着。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏