微信小程序开发（三）- 显示 loading 提示框

首先看一张图片，就是要做成的效果。

当我们点击查询时，就会有一个请选择地点的弹出框。
这个状态我们只能去看微信开发文档了。
这个在API-界面-交互反馈-wx.hideLoading()
这个在主页面可以测试，然后给查询按钮添加事件。
什么是事件？

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

• 事件可以携带额外信息，如 id，dataset，touches

  事件的使用方式
  在组件中绑定一个事件处理函数
  如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
  结构代码：

<text class="find_text" bindtap="findEvent">查询</text>

js代码中我们用到的是微信小程序中的API-界面-交互反馈-wx.showLoading(object)

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  findEvent: function(){
    wx.showLoading({
        title: '请选择地点',
      })
      setTimeout(function(){
        wx.hideLoading()
      },2000)
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })

    })
  }
})

重点在这部分：

findEvent: function(){
    wx.showLoading({
        title: '请选择地点',
      })
      setTimeout(function(){
        wx.hideLoading()
      },2000)
  },

效果图如下：