微信小程序页面布局

首先要布局
<!--index.wxml-->
<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
})
})
}
})