1.控件

1.1 按钮

class：用于给按钮添加样式，可以通过在对应的 WXML 文件中定义样式类来设置。
style：用于给按钮添加内联样式，可以直接在 style 属性中定义样式。
src：用于设置按钮的图标，通常与 image-tap 属性一起使用。
image-tap：用于设置按钮点击时的图标，通常与 src 属性一起使用。
background-color：用于设置按钮的背景色。
color：用于设置按钮文本的颜色。
border：用于设置按钮的边框。
disabled：用于禁用按钮，默认为 false。
bindtap：用于设置按钮点击事件的处理函数。

<button class="my-button" style="background-color: #F00; color: #FFF; border: 1px solid #000;" bindtap="handleClick">点击我</button>

按钮点击事件：

 handleClick: function() {
    console.log('按钮被点击了');
    //页面跳转，跳转到spacceserver
    wx.navigateTo({
      url: '../spacereserve/spacereserve'
    })
  }

1.2 输入框

html：

<view>
  <input type="text" placeholder="请输入文本" bindinput="handleInput" />
</view>

获取输入内容：

Page({
  data: {
    inputValue: '' // 保存输入框的值
  },
  handleInput: function(e) {
    this.setData({
      inputValue: e.detail.value // 更新输入框的值
    })
  }
})

1.3 按钮点击或其他提示信息

showModel:

wx.showModal({
      title: '提示',
      content: '这是一条提示信息',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
          //确认之后，后续处理函数
        } else if (res.cancel) {
          console.log('用户点击取消');
          //取消处理
        }
      }
    })

1.4 Data数据获取与设置

data:

data: {
    inputValue: '' // 保存输入框的值
  }

获取：(在wx.)时候需要在这之前将this赋值给that或其他

this.data.inputvalue

设置：

this.setData({
      inputValue: 'hello' // 更新输入框的值
    })

2.请求(request)

POST请求：(GET请求去掉data)

wx.request({
      url: 'https://example.com/api',
      method: 'POST',
      data: {
        key1: 'value1',
        key2: 'value2'
      },
      success: function (res) {
        console.log(res.data)
      },
      fail: function (err) {
        console.log(err)
      }
    })

请求中传输Data数据:

var that=this;
wx.request({
      url: 'https://example.com/api',
      method: 'POST',
      data: {
        key1: that.data.inputvalue1,
        key2: that.data.inputvalue1
      },
      success: function (res) {
        console.log(res.data)
      },
      fail: function (err) {
        console.log(err)
      }
    })

3.地图

3.1 地图使用

wxml引入map组件，设置参数，markers是地图中添加的标记。

<map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="15" show-location style="width: 100%; height: 100%;" bindmarkertap="showP"></map>

3.2 添加标记

在Page的data中添加markers数组数据，类型为：

[{
            "height": 30,
            "iconPath": "../../marker.png",
            "id": 165,
            "latitude": 30.570199966431,
            "longitude": 104.064758300781,
            "title": "南宁兴宁区",
            "width": 30
        },
]

3.3 图标点击事件（弹窗）

通过bindmarkertap来响应点击，传递参数为该图标的id，需要从数据中遍历来查找该条数据：

//点击处理函数
showP:function(e){
    console.log(e.detail.markerId);
    var data=this.data.gps_data;
    var data1={};
    //遍历获取数据
    for(var i=0;i<data.length;i++){
      if(data[i].id=e.detail.markerId){
        console.log(data[i].id);
        data1=data[i];
        break;
      }
    }
    console.log(data1);
    //showModel弹窗显示数据
    wx.showModal({
      title: data1.location,
      content: '设备类型:'+data1.davice_type+"\n速度:"+data1.speed+"\n时间:"+data1.gps_time+"\n经度："+data1.longitude+"\n纬度:"+data1.latitude,
      success: function (res) {
        if (res.confirm) {//这里是点击了确定以后
          console.log('用户点击确定')
        } else {//这里是点击了取消以后
          console.log('用户点击取消')
        }
      }
    })
  },
//获取数据
  getGPSData() {
    var that = this;
    wx.request({
      url: 'http://114.115.206.93:5000/get_gps_data',
      method: 'GET',
      success: function (res) {
        // 请求成功后的回调函数
        that.setData({
          markers: res.data.markers,
          gps_data: res.data.data,
        });
        console.log(res.data.markers);
        console.log(res.data.data);
      },
      fail: function (error) {
        // 请求失败后的回调函数
        console.log(error) // 打印错误信息
      }
    })
  },

3.4 定时器

延迟执行setTimeout,会延迟500ms执行一次，只会执行一次:

this.data.timer=setTimeout(
    function () {
        // TODO 你需要执行的任务
        console.log('startTimer  500毫秒后执行一次任务')
    }, 500);
//清除定时器
clearTimeout(that.data.timer)

不断执行,每隔500ms执行一次function内的代码：

this.data.inter=setInterval(
    function () {
        // TODO 你需要无限循环执行的任务
        console.log('setInterval 每过500毫秒执行一次任务')
    }, 500);
//清除定时器
clearInterval(that.data.inter)