微信小程序页面布局

在写之前，看一下文件的关系

具体架构参考微信小程序开发文档

首先要布局

<view class="box">
  <view class="current_city center">
    <text class="center">
      <text>当前城市:text>
      <text>北京市text>
    text>
  view>
  <view class="start_box space_between">
    <text>起点:text>
    <text bindtap="leapEvent">从哪儿出发text>
  view>
  <view class="end_box space_between">
    <text>终点:text>
    <text bindtap="leapEvent">要去哪儿text>
  view>
  <view class="btn_box center">
    <button class="btn_search" bindtap="searchEvent">查询button>
  view>
view>

其次要加样式
有两步：
第一步添加基本的样式，比如宽度和高度
第二步添加复杂的样式

/**index.wxss**/
.box{
  padding: 0 30rpx;
}
.current_city{
  width: 100%;
  height: 80rpx;
  border-bottom: 2rpx solid #ccc;
}
.start_box{
  width: 100%;
  height: 80rpx;
  border-bottom: 2rpx solid #ccc;
}
.end_box{
  width: 100%;
  height: 80rpx;
  border-bottom: 2rpx solid #ccc;
}
.btn_box{
  width: 100%;
  height: 200rpx;
}
.btn_search{
  width: 80%;
  height: 80rpx;
  color: #fff;
  background-color: #c37856;
}
.space_between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

最后添加点击事件
具体用法参考微信小程序中的框架中事件的用法

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

效果图如下：