h5小程序 微信开发工具

这两个月都一直在编写小程序，在熟悉了小程序一些规则后，发现可以建立一些模版化来加快一些常规的设计。小程序也支持组件式开发，但没试过具体还有待考量。先放一张比较没有美工的导航

1 布局展示

从上图中看到，这种导航的菜单采取了左右的方式布局1：1的方式展示。图标和文本分别左右边两边布局。

2 小程序的模版

小程序的模版提供了一个机制可以反复使用的机制。定义的时候需要如下定义。创建一个wxml文件，对模版进行声明。

<template name="自定义名字">

</template>

在项目中，创建一个wxml文件。将其放置在 lib/public/wxgrids/index.wxml 的文件目录下。对模版加入声明

//例子
<template name="wxgrids">
 //编写布局代码
</template>

3 定义一个菜单数组

从图里面可以看到这里有菜单图标，文本，描述，对应每一个菜单的菜单id。我们将其视图数据化一下，大概用到的一些简单字段。初步下来，定义基础的菜单数据。
创建一个js文件，将文件放置项目目录config（创建config目录）的目录下，config/config.js

module.exports = {
 menus: [
    {
      id: 1,
      label: "水电查询",
      desc:"水电查询，便利",
      icon: "../../images/icon3.png"
    },
    {
      id: 2,
      label: "快递呼叫",
      desc: "一键呼叫快递",
      icon: "../../images/icon4.png"
    },
    {
      id: 3,
      label: "优惠领取",
      desc: "惠民，优惠",
      icon: "../../images/icon5.png"
    },
    {
      id: 4,
      label: "建议留言",
      desc: "留言给我们",
      icon: "../../images/icon6.png"
    },
    {
      id: 5,
      label: "办理上网",
      desc: "每月享受最低优惠",
      icon: "../../images/icon6.png"
    },
    {
      id: 6,
      label: "招聘信息",
      desc: "招聘、信息",
      icon: "../../images/icon6.png"
    }
  ]
  }

4 编写布局代码

第一步，编写一个外壳，将样式名为wx_menus。

<template name="wxgrids">
    <view class='wx_menus'>

    </view>
</template>

第二步，添加循环处理，由于菜单可以多个，第二步加入一个循环处理。menus 是菜单的数组。

<template name="wxgrids">
    <view class='wx_menus'>
      <block wx:for="{{menus}}" wx:key="item">

      </block>
    </view>
</template>

第三步，加入菜单的子项目，在循环作用下，批量处理。

<template name="wxgrids">
    <view class='wx_menus'>
      <block wx:for="{{menus}}" wx:key="item">
        <view class='wx_menus_item' data-id="{{item.id}}" bindtap="handSelect">          

        </view> 
      </block>
    </view>
</template>

第四步，加入图标显示，并对image的src进行绑定一个值item.icon。

<template name="wxgrids">
    <view class='wx_menus'>
      <block wx:for="{{menus}}" wx:key="item">
        <view class='wx_menus_item' data-id="{{item.id}}" bindtap="handSelect">          
            <view class='wx_menu_icon'> 
               <image src='{{item.icon}}'></image> 
            </view>

        </view> 
      </block>
    </view>
</template>

第五步，加入右边的文本，并对需要的文本进行绑定。

<template name="wxgrids">
    <view class='wx_menus'>
      <block wx:for="{{menus}}" wx:key="item">
        <view class='wx_menus_item' data-id="{{item.id}}" bindtap="handSelect">          
            <view class='wx_menu_icon'> 
               <image src='{{item.icon}}'></image> 
            </view>
           <view class='wx_menu_label'>
                 {{item.label}}  
            </view>
            <view class='wx_menu_desc'>
                 {{item.desc}}  
            </view>    
        </view> 
      </block>
    </view>
</template>

5 加入样式

在项目中，创建一个wxss文件。将其放置在 lib/public/wxgrids/index.wxss目录下。
在布局中，已经引入了wx_menus、wx_menus_item、wx_menus_item、wx_menu_label、wx_menu_desc样式。样式中采取了flex的布局。采用了横向row 和自动换行wrap处理，然后对每一个菜单子项设置相对父容器50%的宽度，由于采用了描边机制，所以在block块的过程会出现换行，避免这种情况需要对菜单子项 wx_menus_item 加入box-sizing: border-box;的机制，防止换行。

.wx_menus{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  border-top: 1rpx solid #D9D9D9;
  border-left: 1rpx solid #D9D9D9;
  overflow: hidden;
}

.wx_menus_item{
  width: 50%;
  box-sizing: border-box;
  padding: 20px 10px;
  border-right:1rpx solid #D9D9D9;
  border-bottom:1rpx solid #D9D9D9; 
  position: relative;
}

.wx_menu_icon{
   display: block;
   width: 90rpx;
   height: 90rpx;

   margin-right: 5px;
}

.wx_menu_label{
  position: absolute;
  top: 20px;
  left: 120rpx;
  font-size: 14px;
  color: #000000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.wx_menu_desc{
  position: absolute;
  top: 40px;
  left: 120rpx;
  font-size: 12px;
  color: #b2b2b2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


.wx_menu_icon image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 90rpx;
}

6 引入模版

使用模版的时候，需要先引入创建的wxml文件，并使用template进行引入。

<import src="../../lib/public/wxgrids/index.wxml"/>

模版中data，将相应的数组传入模版内部。menus这个值需要在page内页面进行声明，这样子可以将一个常用的导航封装好了。

<template is="wxgrids"  data="{{menus}}" />

var config = require('../../config/config.js') 
Page({
  data:{ 

    menus: config.menus,

  },
 })