微信小程序开发系列（五）

今天我来讲解一下首页布局的构成。

首先我们先创建底部tabBar，打开app.json,在页面中创建

"tabBar": {

    "color": "#6e6d6b",

    "selectedColor": "#ff9900",

    "borderStyle": "black",

    "backgroundColor": "#ffffff",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath": "images/home.png",

        "selectedIconPath": "images/home-active.png"

      },

      {

        "pagePath": "pages/shopGoods/index",

        "text": "商户",

        "iconPath": "images/user.png",

        "selectedIconPath": "images/user-active.png"

      }

    ],

    "position": "bottom"

  },

图标的话是先把图片资源放到images文件夹中，如果没有这个文件夹就自己建立一个，

名字可以自己随便去，引用的时候路径写对就可以了。

下面讲解一下tab配置的属性：

1、pagePath：这个属性是用来配置页面路径的，也就是点击tab之后要跳转的页面。

2、text：这个属性是用来配置tab标签文字。

3、iconPath：这个属性是用来配置tab图标未选中图片。

4、selectedIconPath：这个属性是用来配置tab图标已选中图片。

首先我们看一下页面title的设置：我们可以通过index.json文件进行设置

{
  "navigationBarTitleText": "店内优选",
  "usingComponents": {}
}

再下面是一个定位的功能

<view wx:if="{{address.length>0}}" >
  <view bindtap="chooseLocation" class="search">
      <image class="sIcon" src="/images/dw.png"></image>
      <text style="margin-top: 5rpx;">{{address}}</text>
      <image class="sIcon-right" src="/images/address_jt.png"></image>
  </view>
</view>

这是wxml前端代码。

js代码如下：

 chooseLocation: function (e) {
    var that = this;
    wx.chooseLocation({

      success: function (res) {

        console.log(res);
        that.setData({
          address: res.address,//当前地址
          longitude: (res.longitude).toFixed(6),//当前经度
          latitude: (res.latitude).toFixed(6),//当前纬度
          tag:'2'
        })
        // that.getFujin();
      },

    })
  },

再往下是一个简单的布局，这里不做过多说明，后面会详细附上一节针对wxss样式的课程

<view class="notice">
   <view style="flex:1">
    <image class="image-left" src="/images/footmark.png"></image>
    <text class="texttitle">店铺足迹</text>
   </view>
   <view bindtap="lookMore">
    <text  class="text-more">查看更多</text>
    <image class="image-more" src="/images/you.png"></image>
   </view>
 </view>

<view class="shop-fj">
  <view class="line-fjsd"></view>
  <text class="fj-title">附近商家</text>
  <view class="line-fjsd"></view>
  </view>

再往下是一个附近店铺的列表布局

<view class="dplist" wx:for="{{nearbyArray}}" wx:for-item="item" bindtap="getPage" data-id="{{item.openid}}" data-index="{{item.name}}" data-type="{{item.type}}" data-img="{{item.img}}" data-juli="{{item.juli}}">
    <image class="goodsImg" src="{{item.img}}"></image>
    <view class='viewDp'>
    <view class='viewTitle'>
    <text class="goodsName">{{item.name}}({{item.type}})</text>
    </view>
  <view class="view-shop">
   <text class="time-color">营业时间：{{item.am}}-{{item.pm}}</text>
   <view class="view-time"><text class="text-mi">距您{{item.juli}}</text></view>
  </view>  
    <view class="view-hd" wx:for="{{item.moveList}}" wx:for-item="item">
     <text class="hd-color">活动</text>
     <text class="text-hd">{{item}}</text>
    </view>
    </view>
  </view>
  </view>

nearbyArray就是我们后台接口请求到数据之后赋值给了这个数组，然后循环遍历就可以了，这就是首页全部的内容了，

如果大家有什么不懂的，欢迎给我留言，我看到之后给大家一一解答。