初识微信小程序

1、公司要做微信小程序，今天开始接触，发现上手还是很容易的，话不多说，直接开撸

小程序首页界面图

index.wxml文件（等同于html）：

<!--index.wxml-->
<view class="container">

  <view class="one">
    <navigator class="one_block" url="#" open-type="navigate">
      <image class="icon1" src="../images/icon1.png"></image>
      <view class="title1">天气</view>
    </navigator>
  </view>

  <view class="two">

    <navigator class="two_block" url="deviceDetails.wxml" open-type="navigate" hover-class="navigator-hover">
      <image class="icon2" src="../images/icon2.png"></image>
      <view class="title2">设备信息</view>
    </navigator>

    <navigator class="three_block" url="#" open-type="navigate">
      <image class="icon3" src="../images/icon3.png"></image>
      <view class="title3">告警等级</view>
    </navigator>

  </view>

  <view class="three">

    <navigator class="four_block" url="#" open-type="navigate">
      <image class="icon4" src="../images/icon4.png"></image>
      <view class="title4">温度</view>
    </navigator>

  </view>

</view>

index.wxss文件（等同于css文件）：

/**index.wxss**/
.container {
  padding: 0rpx;
  font-size: 20px;
  font-family: "微软雅黑","宋体";
}

.one {
  width: 750rpx;
  height: 400rpx;
  position: absolute;
}

.one_block {
  width: 710rpx;
  height: 360rpx;
  background: #0f88a2;
  margin: 20rpx 20rpx 20rpx 20rpx;
  position: absolute;
}

.icon1 {
  width:250rpx;
	height:250rpx;
  display: flex;
  flex-direction: center;