效果图： 名片

开发过程：

整个界面分为三个部分：logo展示、信息展示、tabBar信息

主界面代码：

<loading hidden="{{loadingHide}}">
  {{loadingText}}
</loading>

<view class="IndexHome">
  <image src="../../image/logo.png" mode="widthFix" class="img"></image>
</view>

<view class="IndexList">
  <view bindtap="callmeTap">
    <image src="../../image/tel.png" class="telIco" mode="widthFix"></image>
    <text class="tel">电话 / ********</text>
  </view>
  <view>
    <image src="../../image/weixin.png" class="weixinIco" mode="widthFix"></image>
    <text class="map">微信 / ********</text>
  </view>
  <view>
    <image src="../../image/email.png" class="eIco" mode="widthFix"></image>
    <text class="email">邮件 / ********</text>
  </view>
  <view>
    <image src="../../image/map.png" class="mapIco" mode="widthFix"></image>
    <text class="map">地址 / ********</text>
  </view>
</view>
<view class="footer">
  @2018 跆武汇 版权所有
</view>

因为界面内有信息加载，所以添加loading hidden提示一下。
图片位置路径需要注意一下，如果路径写为：image/weixin.png可能会编译出错，须在前面加上/

js部分代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    loadingHide: true,
    loadingText: "加载中"
  },
  callmeTap: function () {
    wx.makePhoneCall({
      phoneNumber: '********'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({ loadingHide: false });
    setTimeout(function () {
      that.setData({ loadingHide: true });
    }, 1000)
  }
})

js中对loading hide函数进行处理，添加callmeTap：function可调用手机拨号界面

wxss界面代码

.IndexHome{
  width: 100%;
  display: block;
  background-color:gainsboro;
  height: 500rpx;
  overflow: hidden;
  text-align: center
}
.img{
  width: 55%; margin: 0 auto; padding: 60rpx 0 0 0;
}
.IndexList{
  width: 100%;
  display: block;
  margin-top: 40rpx;
}
.IndexList view{
    border-bottom: 1px solid #F5F5F5;
    width: 84%;
    display:  block;
    margin: 0 8%;
    color: #333;
    height: 100rpx;
    line-height: 100rpx
}
.IndexList image.telIco{
  width: 3%;
  margin-right: 15rpx
}
.IndexList image.weixinIco{
  width: 4%;
  margin-right: 15rpx
}
.IndexList image.eIco{
  width: 4%;
  margin-right: 15rpx
}
.IndexList image.mapIco{
  width: 3%;
  margin-right: 15rpx
}

wxss作用与css相同，对界面和格式进行处理

app.json部分代码

{
  "pages":[
    "pages/home/home",
    "pages/view/view"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "跆武汇",
    "navigationBarTextStyle":"black"
  },
    "tabBar": {
      "borderStyle": "white",
      "backgroundColor":"#F8F8F8",
      "list": [
        {
          "pagePath": "pages/home/home",
          "text": "联系",
          "iconPath": "image/featured.png",
          "selectedIconPath": "image/featured-actived.png"
        },
        {
          "pagePath": "pages/view/view",
          "text": "关于",
          "iconPath": "image/search.png",
          "selectedIconPath": "image/search-actived.png"
        }
      ]
    }
}

对全局变量进行设置，添加tabBar按钮，编译时注意pagePath是否正确。