miniProgram: 写首个页面结构

 

页面结构：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!-- 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>

　　

页面样式：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

/* 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; }

　　

页面逻辑：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

// 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 页面配置

 

?

1 2 3

{   "usingComponents": {} }