小牛单车——微信小程序开发学习笔记（一）前端代码部分

1.对工程进行初始化

index.js:

page({
      data:{
      },
      onLoad:function(){
      }
 })

app.wxss:

//清空，无代码

index.wxml:

//清空，无代码

index.wxss:

//清空，无代码

app.js:

App({
    onLauch:function(){

    },
    //所有页面可以共享的数据
    globalData:{
      userInfo: null,
      status:0
    }
})

 

app.json:

 {
  "pages":[
     "pages/index/index",
     "pages/logs/logs"
  ],
  "window":{
     "backgroundTextstyle":"light",
     "navigationBarBackgroundcolor":"#fff",
     "navigationBarTitleText":"小牛单车",
     "navigationBarTextStyle":"black"
     }
}

 

2.显示基本的地图

index.wxml:

 

    <map
      id="myMap"
      longitude='{{log}}'
      latitude='{{lat}}'
      controls="{{controls}}"
      show-location='true'//显示当前所在位置
      scale=‘17’//指定缩放级别
      bindcontroltap='controltap'//跟控件绑定一个事件函数,前者是map标签里的一个属性名字，后者是js里的一个函数
      style='width:100%;height:100%'
      markers='{{markers}}'//从里面取值，与data对应
      bindregionchange='regionchange'//视野发生变化
    >
    </map>

 

app.wxss:

page {
  height:100%//还要在地图标签里单独加style,才有用
}

 

index.js:

 

page({
      data:{//在data里是json对象，属性名和属性值
        log:0,
        lat:0,
        controls:[],//添加控件,可点击的图标，用[]定义array
        markers:[]
      },
      /**
       *生命周期函数--监听页面加载
       */
      //首次加载页面时调用
      onLoad:function(){
        var that = this;//要想给data赋值，要拿到当前页面的对象，当前页面对象不能直接赋值，用变量
        wx.getLocation({//获取地理位置的方法，成功会执行回调函数
          success:function(res){//获取的信息存在res里
            var log = res.longitude
            var lat = res.latitude
　　　　　　　that.setData({//向当前页面的data赋值
              log : log,
              lat : lat//获取当前设备经纬度（模拟器），赋值给data
            })　
          },
        })

        wx.getSystemInfo({//获取设备信息
          success:function(res){
            var windowWidth = res.windowWidth;//拿到小程序可用的宽度
            var windowHeight = res.windowHeight;
          },
        })
        that.setData（{
           controls:[//数组
             {
               id: 1,
               icomPath:'/images/qrcodes.png',
               position:{
                 width: 100,
                 height: 60,
                 left:windowWidth / 2 - 50,//根据设备计算机出对应的相对位置
                 top:windowHeight - 60
               },
               //是否可点击
               clickable:true
             },
             {
               //定位按钮
               id:2,
               iconPath:'/images/img1.png',
               position:{
                 width:40,
                 height:40,
                 left:10,
                 top:windowHeight-60
               },
               //是否可点击
             clickable:true
             },
             {
                //中心点位置
                id:3,
                iconPath:'/images/location.png',
                position:{
                  width：20，
                  height:35,
                  left:windowWidth / 2 - 10,
                  top:windowHeight / 2 - 40.
                },
                //是否可点击
                clickable:true
             },
             {
               //充值按钮
               id:4,
               iconPath:'images/pay.png',
               position:{
                 width:40,
                 height:40,
                 left:windowWidth -45,
                 top:windowHeight - 100
             },
             //是否可点击
             clickable:true
             },
             {
             //添加车辆
               id:5,
               iconPath:"/images/add.png",
               position:{
                 width:35,
                 height:35,
               },
               //是否可点击
               clickable:true
             },
             {
             //报修
               id:6,
               iconPath:"/images/warn.png",
               position:{
                 width:35,
                 height:35,
                 left:windowWith - 42,
                 top: windowHeight - 60.
               },
               //是否可点击
               clickable:true
             },
           ]//一个控件是一个JSON对象，大括号
          }）
        },           
      /**
       *控件被点击的事件
       */
        controltap:function(e){//和onload函数一个级别
        var that = this;//要修改当前页面的数据，将this赋给一个拷贝
        var cid = e.controlid;//通过id控制点的是哪个控件
        swicth(cid){
          //点击扫码按钮
          case 1:{
            //根据用户的状态，跳转到对应的页面
            var status = getApp().globalData.status;
          //如果是0，跳转到手机注册页面
          if(status == 0){
          
            break;
          }
          //定位按钮
          case 2:{
              this.mapCtx.moveToLocation()//回到原来的位置
            break;
          }
          //添加车辆
          case 5:{
            //获取当前已有的车辆
            //var bikes = that.data.markers；
            //获取到移动后的位置的中心点
            this.mapCtx.getCenterLocation({
              success:function(res){
                var log = res.longitude;
                var lat = res.latitude;
                //在移动后的位置添加一辆单车
                //bikes.push({              
                //  iconPath:"/images/bike.png",
                //  width:35,
                //  height:40,
                //  longitude:that.data.log,
                //  latitude:that.data.lat         
                //})
                //重新赋值
                // that.setData({
                //  markers:bikes
                // })
                //发送请求：将添加的单车数据发送到后台
                wx.request({//要请求地址，spring后台要有和url(addBike)对应的方法才可以
                  url:"http://localhost:8080/addBike",//项目中，地址必须是域名，域名必须是https,端口号必须是80
                  data:{//要传到后台的信息
                      longitude:log,
                      latitude:lat
                  },
                  method:'POST',//指定请求方式
                  success:function(res){//请求成功后有回调

                  }
                })
              }
            })
            break;
          }
        }
      },

      /**
       *移动后地图视野发生变化触发的事件
       */
      regionchange:function(e){
      },


      /**
       *生命周期函数--监听页面初次渲染完成
       */
      onready:function(){
      //创建map上下文即保存map信息的对象
      this.mapCtx = wx.createMapContext('mymap')//创建好的上下文赋给mapCtx属性
      //指定地图标签id，mymap是map里的id
      }
    })