微信小程序页面布局

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

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

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

效果图如下：