微信小程序-AirBike:类摩拜单车MAP地图使用

[复制链接]
haoyangtian实名认证 手机认证 视频认证 发表于 2017-5-25 21:58:06 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
很完整的demo,填写手机号码竟然真的可以收到验证码。今天试着分析了一下代码,将学习结果汇报一下:
亮点一、map组件的使用
map组件的使用,教程里面一般都一句带过了,因为老的教程map组件在IDE不能用,这个demo给的代码比较不错,之前一直有人问怎么把view控件放在map控件之上,这个demo也没有实现。^_^

map组件的使用在这里不再详述了,有心人可以对照这个demo看看这个map控件上放其他控件的方法,学习一下
代码如下,详细参数代表什么可以对照小程序官方文档。
  1. <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}}">
  2. </map>
复制代码
亮点二、服务器与小程序之间如何加密传输数据

做过微信公众平台的可能对这个方式非常熟悉,帖代码如下:
  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),传输的数据
1.png
亮点三、demo里面包括MD5.js加密函数,还有检测网络连接状态的判断函数,收藏总要用得着。
1.jpg

2.jpg

项目下载地址:
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1