从0开发《工程测绘大师》小程序之首页实战篇（五）

上一篇我们我们讲了如何进行页面的简单UI设计。从该篇开始我们会进入实战，在该篇中我们会讲如何实现首页。

01、准备所需图标

什么是图标？

图标用专业术语来说是具有指代意义的具有标识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。通俗来说就是具有明确指代含义的计算机图形。

图标分为哪几种格式的图标？

在计算机领域目前最常用的有jpg、png、svg（字体图标）等图标，其中最好用的是svg也就是所谓的字体图标，因为他可以用代码很方便的改变形状大小及颜色。

有哪些好用的图标库?

以下这些是我用过的一些图标库，他们各有千秋大家可以去体验一些，而且大都都是免费的哦。

1. Font Awesome：http://www.fontawesome.com.cn/
2. Iconfont：https://www.iconfont.cn/
3. icomoon：https://icomoon.io/
4. EasyIcon：https://www.easyicon.net/
5. icons8：https://icons8.cn/
6. IconStore：https://iconstore.co/
7. iconninja：http://www.iconninja.com/

我之前做这个小程序时用的图标库是Iconfont（阿里巴巴矢量图库），里面有特别多的图标，感觉那就像是图标的海洋。我觉得Iconfont（阿里巴巴矢量图库）的优点有两点，第一图标可以选择的特别多，第二在下载的时候我们可以改变图标的颜色及大小（根据图标的不同我们还可以选择为图标的部分区域设为不同颜色）另外还可以选择下载的格式这一点特别重要（图1-3）。

图1-1 Iconfont（阿里巴巴矢量图库）

图1-2 Iconfont（阿里巴巴矢量图库）

图1-3 Iconfont（阿里巴巴矢量图库）下载

02、代码实现

我们今天要实现的是《工程测绘大师》version1.0的首页（该首页较为简单代码中都标有相应注释），因为最新version2.0的首页是程序列表没有更多可以编写的。写该小程序的前提是你最好具备HTML、CSS、JS的基本知识，如果你会Vuejs框架那么写小程序将会变得更简单，你或许读完一遍小程序开发文档基本上是可以上手了。

微信小程序的编写风格特别像vuejs，有可能微信小程序也是学的vuejs的思想，所以如果你会vue写微信小程序就会事半功倍。

如果你没有学过vue或者你是新手你就会觉得小程序会有点难于理解，学小程序开发或许不是最好的选择，你可以先去学习基础知识在入手小程序会更好。

全局配置

在根目录 app.json 中配置

{
    "pages": [
        "pages/pageBar/component/index"
        
    ],
    "permission": {
        "scope.userLocation": {
            "desc": "展示位置"
        }
    },
    "window": {
        "navigationStyle": "custom",//自定义tabBar
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    "style": "v2",
    "debug": false,
    "sitemapLocation": "sitemap.json"
}

开始编写代码

我们新建一个类似以下的文件夹目录

pageBar
    |——component
        |——index.wxml
        |——index.wxss
        |——index.json
        |——index.js

图2-1 目录

编写结构

index.wxxl

<!--index.wxml-->
<view class="bg-imge">
  <open-data type="userAvatarUrl" style="width:100%;height:100%;"></open-data>
</view>
<view class="bg-mask"></view>
<view class="content">
  <!-- 主页内容列表 -->
  <view class="content-inner">
    <view class="content-list" wx:for="{{homeList}}" wx:key="index">
      <navigator class="list-icon" url="../../component/pages/{{item.pages}}/{{item.pages}}">
        <view>
          <image class="list-icon-imge" src="{{item.url}}"></image>
        </view>
      </navigator>
      <navigator class="navigator" url="../../component/pages/{{item.pages}}/{{item.pages}}">
        <text>{{item.text}}</text>
      </navigator>
    </view>
    <!-- 指北针 -->
    <view class="my-compass">
      <view class="gyro-eyes">
        <view class="gyro-eyes-inner" style="transform:rotate({{numrotate}}deg);border: 4px solid {{ bgCompass}}">
          <image src="../../icon/n1.png" style="width:180rpx;height:180rpx;"></image>
        </view>
      </view>
    </view>
  </view>
</view>

其中跳转到的界面就是首页的测绘计算、高数计算、关于我，这些后续会实现。

<navigator class="navigator" url="../../component/pages/{{item.pages}}/{{item.pages}}">
        <text>{{item.text}}</text>
</navigator>

编写样式

index.wxss

/* 背景图片 */
.bg-imge {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  filter: blur(50rpx);
}

/* 背景蒙板 */
.bg-mask {
  box-sizing: border-box;
  position: absolute;
  left: 37rpx;
  top: 240rpx;
  width: 90%;
  height: 75%;
  background-color: #dfdfdf;
  z-index: 5;
  overflow: hidden;
  border-radius: 20rpx;
  opacity: .1;
}

/* 内容 */
.content {
  position: relative;
  width: 560rpx;
  height: 660rpx;
  margin: 395rpx auto 0;
  box-sizing: border-box;
  z-index: 6;
}

.content-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
}

/* 主页列表 */
.content-list {
  width: 255rpx;
  height: 305rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 30rpx;
  box-sizing: border-box;
  overflow: hidden;
}
/* 选择第一个列表 */
.content-list:nth-child(1) {
  margin-top: 40rpx;
}
/* 选择第二个列表 */
.content-list:nth-child(2) {
  margin-top: 40rpx;

}
/* 选择第三个列表 */
.content-list:nth-child(3) {
  margin-top: 40rpx;
}
/* 选择第四个列表 */
.content-list:nth-child(4) {
  margin-top: 40rpx;
}

/* 主页列表图标 */
.list-icon {
  flex: 1;
  box-sizing: border-box;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 列表图标 */
.list-icon-imge {
  max-width: 132rpx;
  max-height: 130rpx;
  filter: drop-shadow(3rpx 13rpx 3rpx rgba(126, 114, 114, 0.5));
}

/* 路由跳转列表文字 */
.navigator {
  flex: 0 0 76rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(201, 201, 201);
  border-radius: 0rpx 0px 0rpx 0rpx;
  overflow: hidden;
  font-size: 34rpx;
  box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(126, 114, 114, 0.3);
}

/* 指北针 */
.my-compass {
  position: relative;
}

.my-compass .gyro-eyes {
  width: 220rpx;
  height: 220rpx;
  box-shadow: 15rpx 78rpx 14rpx 0rpx rgba(126, 114, 114, 0.26);
  border-radius: 50%;
  margin-top: 40rpx;
  margin-right: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;

}
/* 指北针指针界限伪类 */
.my-compass .gyro-eyes::after {
  content: "";
  width: 1rpx;
  height: 30rpx;
  position: absolute;
  top: 42rpx;
  z-index: 0;
  background-color: #00da00;
  border-radius: 0 0 6rpx 6rpx;
}
/* 指北针外圆 */
.my-compass .gyro-eyes-inner {
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid #00da00;
  transition: all .2 linear;
}
/* 指北针圆心伪类 */
.gyro-eyes-inner::after {
  content: "";
  width: 10rpx;
  height: 10rpx;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  border: 1px solid black;
  z-index: 100;
}
/* 指北针红指针伪类 */
.gyro-eyes-inner::before {
  content: "";
  width: 1rpx;
  height: 50rpx;
  background-color: red;
  position: absolute;
  top: 34%;
  z-index: 99;
}

编写

index.json

此处主要为配置（如配置组件的路径、是否可以自动旋转等）

{
  "usingComponents": {}
}

编写脚本

index.js

Page({//这里是指这是一个页面

  /**
   * 页面的初始数据
   */
  data: {
    homeList: [{
        id: 1,
        text: "测绘计算",
        url: "../../icon/mapping.png",
        pages: "mapping"
      },
      {
        id: 2,
        text: "高数计算",
        url: "../../icon/math.png",
        pages: "highNumber"
      },
      {
        id: 3,
        text: "关于我",
        url: "../../icon/about.png",
        pages: "about"
      }
    ],
    numrotate: Number,
    bgCompass: false
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
   //指北针实现调用了微信提供的接口wx.onCompassChange（"罗盘"）和 wx.vibrateShort(短震动)
  onReady: function () {
    var that = this
    wx.onCompassChange((res) => {
      var numrotate = 360 - Number(res.direction.toFixed(0))
      if (numrotate == 359 || numrotate == 0) {
        // 开启震动
        wx.vibrateShort()
        that.setData({
          numrotate: numrotate,
          bgCompass: 'red'
        })
      } else {
        that.setData({
          numrotate: numrotate,
          bgCompass: '#00da00'
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.startCompass({
      success: (res) => {}
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
   //页面隐藏停止监听罗盘提高性能
  onHide: function () {
    wx.stopCompass()
  },

  /**
   * 生命周期函数--监听页面卸载
   */
    //页面卸载停止监听罗盘提高性能
  onUnload: function () {
    wx.stopCompass()
  }
})

03、界面展示

该界面为小程序1.0的版本界面（图3-2）

图3-1 开发现场

图3-2 最终界面

-END-

-预告-

以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之程序列表篇（六）