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

1布局展示

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

2小程序的模版

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

templatename="自定义名字"/template

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

//例子templatename="wxgrids"//编写布局代码/template3定义一个菜单数组

5.从图里面可以看到这里有菜单图标，文本，描述，对应每一个菜单的菜单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编写布局代码

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

templatename="wxgrids"viewclass='wx_menus'/view/template

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

templatename="wxgrids"viewclass='wx_menus'blockwx:for="{{menus}}"wx:key="item"/block/view/template

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

templatename="wxgrids"viewclass='wx_menus'blockwx:for="{{menus}}"wx:key="item"viewclass='wx_menus_item'data-id="{{item.id}}"bindtap="handSelect"/view/block/view/template

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

templatename="wxgrids"viewclass='wx_menus'blockwx:for="{{menus}}"wx:key="item"viewclass='wx_menus_item'data-id="{{item.id}}"bindtap="handSelect"viewclass='wx_menu_icon'imagesrc='{{item.icon}}'/image/view/view/block/view/template

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

templatename="wxgrids"viewclass='wx_menus'blockwx:for="{{menus}}"wx:key="item"viewclass='wx_menus_item'data-id="{{item.id}}"bindtap="handSelect"viewclass='wx_menu_icon'imagesrc='{{item.icon}}'/image/viewviewclass='wx_menu_label'{{item.label}}/viewviewclass='wx_menu_desc'{{item.desc}}/view/view/block/view/template5加入样式

11.在项目中，创建一个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:1rpxsolid#D9D9D9;border-left:1rpxsolid#D9D9D9;overflow:hidden;}.wx_menus_item{width:50%;box-sizing:border-box;padding:20px10px;border-right:1rpxsolid#D9D9D9;border-bottom:1rpxsolid#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_iconimage{display:block;width:100%;height:100%;border-radius:90rpx;}6引入模版

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

importsrc="../../lib/public/wxgrids/index.wxml"/

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

templateis="wxgrids"data="{{menus}}"/varconfig=require('../../config/config.js')Page({data:{menus:config.menus,},})