對應的git地址：https://gitee.com/ling-xu/wx-1-hash-menu

一，底部導航標籤設計

第一步：素材和頁面準備：

將所需要的圖片素材放置到pages資料夾下，然後在app.json中設定五個頁面，把兩個舊的頁面刪除，設定標題欄樣式：
圖片素材我放這裡：

連結：https://pan.baidu.com/s/1M9NTIP0_o3sp_EA1aelpTw 
提取碼：a8a7 

第二步：設定底部導航標籤

二，宮格導航的設計

三，自定義資料

模擬來自伺服器的資料：在cook.js檔案中：
利用onload生命週期函式，在頁面的第一次載入時初始化資料：
這裡建立了一個陣列，裡面有5個物件

  data:{
    array:[]
  },
  onLoad:function(options){
    var array = this.initData();
    this.setData({array:array});
  },
   initData:function(){
    var array = [];
    var object1 = new Object();
    object1.img = '../images/list/food-1.jpg';
    object1.title='愛心早餐';
    object1.type='健康養生';
    object1.liulan='20696瀏覽';
    object1.pinglun='7評論';
    array[0] = object1;

    var object2 = new Object();
    object2.img = '../images/list/food-2.jpg';
    object2.title='困了只想喝咖啡';
    object2.type='家庭醫生線上';
    object2.liulan='29628瀏覽';
    object2.pinglun='13評論';
    array[1] = object2;

    var object3 = new Object();
    object3.img = '../images/list/food-3.jpg';
    object3.title='橘子吃多變小黃人';
    object3.type='家庭醫生線上';
    object3.liulan='19585瀏覽';
    object3.pinglun='6評論';
    array[2] = object3;

    var object4 = new Object();
    object4.img = '../images/list/food-4.jpg';
    object4.title='搜狐新聞，手機用久了';
    object4.type='廣告';
    object4.liulan='4688瀏覽';
    object4.pinglun='4評論';
    array[3] = object4;

    var object5 = new Object();
    object5.img = '../images/list/food-5.jpg';
    object5.title='困了只想喝咖啡';
    object5.type='家庭醫生線上';
    object5.liulan='29628瀏覽';
    object5.pinglun='13評論';
    array[4] = object5;
    return array;
  },

四，由自定義的資料進行列表渲染

現在進行列表的渲染，其實和vue的列表渲染差不多的

五，將這個列表渲染製作成模板