miniProgram: 写首个页面结构

 

页面结构：

<!-- geovindu Geovin Du 涂聚文 pages/admin/index.wxml-->
<text class="title">当天天气显示页面</text>
<view class="container">
<view class="today">
<view class="info">
  <view class="temp">{{temp}}℃</view>
  <view class="lowhigth">{{low}}/{{high}}</view>
  <view class="type">{{type}}</view>
  <view class="city">{{city}}</view>
  <view class="week">{{week}}</view>
  <view class="weather">{{weather}}</view>
</view>
</view>
</view>

　　

页面样式：

/* geovindu Geovin Du 涂聚文 pages/admin/index.wxss */
.content{
font-family: 微软雅黑,宋体;
font-size: 14px;
background-size: cover;
height: 100%;
width: 100%;
color: #333333;

}

.tobody{
 padding-top: 70rpx;
 height: 50%;

}
.temp{
  font-size: 80px;
  text-align: center;
}
.city
{
   font-size: 20px;
   text-align: center;
   margin-top: 20px;
   margin-right: 10px;
}
.lowhigth{
font-size: 10px;
text-align: center;
margin-top: 30px;

}

.type
{
  font-size: 16px;
  text-align: center;
  margin-top: 30rpx;

}
.week{
  font-size: 12px;
  text-align: center;
  margin-top: 30rpx;
}
.weather{
  font-size: 12px;
  text-align: center;
  margin-top: 20rpx;
}
.title
{
  text-align: center;
}

　　

页面逻辑：

// geovindu Geovin Du 涂聚文 pages/admin/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      temp:"4",
      low:"-1℃",
      high:"10℃",
      type:"晴",
      city:"北京",
      week:"星期五",
      weather:"无持续风向，微风级"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 2
    })
  }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

　　

json 页面配置

 

{
  "usingComponents": {}
}