微信小程序学习第二章--小试牛刀（写一个页面吧）

一、先设置要切换的导航栏

app.json

{
  "pages":[
    "pages/cook/cook",
    "pages/food/food",
    "pages/headline/headline",
    "pages/me/me",
    "pages/message/message"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [{
      "pagePath": "pages/cook/cook",
      "text": "学做菜",
      "iconPath": "images/tab/cook-0.jpg",
      "selectedIconPath": "images/tab/cook-1.jpg"
    },
    {
      "pagePath": "pages/food/food",
      "text": "美食圈",
      "iconPath": "images/tab/food-0.jpg",
      "selectedIconPath": "images/tab/food-0.jpg"
    },
    {
      "pagePath": "pages/headline/headline",
      "text": "菜谱",
      "iconPath": "images/tab/headline-0.jpg",
      "selectedIconPath": "images/tab/headline-1.jpg"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "images/tab/message-0.jpg",
      "selectedIconPath": "images/tab/message-1.jpg"
    },
    {
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "images/tab/me-0.jpg",
      "selectedIconPath": "images/tab/me-1.jpg"
    }
  ]
  }
}

二、开始写页面了

cook.wxml
这里面导入了模板

<!--pages/cook/cook.wxml-->
<!-- <text>pages/cook/cook.wxml</text> -->

<view class="content">
  <view class="img">
    <image src="/images/haibao/haibao-3.jpg" style="width:100%"></image>
  </view>

  <view class="nav">
    <view class="nav-item">
      <view><image src="/images/icon/fenlei.jpg"></image></view>
      <view>菜品分类</view>
    </view>

    <view class="nav-item">
      <view><image src="/images/icon/meishi.jpg"></image></view>
      <view>美食</view>
    </view>

    <view class="nav-item">
      <view><image src="/images/icon/shangou.jpg"></image></view>
      <view>闪购</view>
    </view>

    <view class="nav-item">
      <view> <image src="/images/icon/shipin.jpg"></image></view>
      <view>视频</view>
    </view>

  </view>

  <!-- 分割线 -->
  <view class="hr"></view>

  <!-- 内容 -->
  <!-- 头部 -->
  <view class="head">
    <view>新闻头条</view>
    <view class="right">></view>
  </view>

  <!-- 身体 -->
  <import src="/pages/template/cookBodyItem.wxml"></import>
  <view>
    <template is="cookBodyItem" data="{{array}}" ></template>
  </view>

</view>

使用的模板
cookBodyItem.wxml

<template name="cookBodyItem">
  <block wx:for="{{array}}" wx:for-item="itemName" wx:for-index="idx" wx:key="1">
    <!-- 每一行的数据 -->
    <view class="hang">
      <!-- 左边图片 -->
      <view bindtap="seeDetail" id="{{idx}}">
        <image src="{{itemName.img}}" style="width:120rpx;height:120rpx;"></image>
      </view>
      <!-- 右边的文字说明 -->
      <view class="rightText">
        <view class="title">{{itemName.title}}</view>
        <view class="textPlace">
          <view class="type">{{itemName.type}}</view>
          <view class="comment">{{itemName.comment}}</view>
          <view class="accessNumber">{{itemName.accessNumber}}</view>
        </view>
      </view> 
    </view>
  </block>
</template>

三、样式处理

cook.wxss

/* pages/cook/cook.wxss */

.nav{
  display: flex;
  flex-direction: row;
  text-align: center;
}

.nav-item{
  margin-top: 20rpx;
  width: 25%;
  font-size: 20rpx;
}

.nav-item image{
  width: 50rpx;
  height: 50rpx;
}

.hr{
  opacity: 0.5;
  height: 20rpx;
  background-color: rgba(43, 183, 226, 0.111);
}

.head{
  display: flex;
  flex-direction: row;
  margin-left: 20rpx;
  opacity: 0.2;
  height: 20rpx;
  text-align: left;
}

.right{
  position: absolute;
  right: 20rpx;
  text-decoration-color: blue;
}

/* 模板需要的样式 */
.hang{
  display: flex;
  flex-direction: row;
  margin-left: 20rpx;
  margin-top: 20rpx;
}

.rightText{
  display: flex;
  flex-direction: column;
}

.textPlace{
  display: flex;
  flex-direction: row;
  margin-top: 30rpx;
}

.title{
  font-weight: bold;
  font-size: 30rpx;
}

.type{
  font-weight: normal;
  font-size: 23rpx;
}

.comment{
  position: absolute;
  right: 220rpx;
  font-weight: normal;
  font-size: 23rpx;
}

.accessNumber{
  position: absolute;
  right: 20rpx;
  font-weight: normal;
  font-size: 23rpx;
}

四、js内部方法及数据初始化

cook.js

// pages/cook/cook.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var array = this.initData();
      this.setData({
        array:array
      });
  },

  initData: function(){
      var array = [];
      var object1 = new Object();
      object1.title = "每日健康养生谈";
      object1.comment = "666评论";
      object1.accessNumber = "1488浏览";
      object1.type = "养生知识";
      object1.img="/images/list/food-1.jpg";
      array[0] = object1;

      var object2 = new Object();
      object2.title = "红烧猪蹄";
      object2.comment = "77评论";
      object2.accessNumber = "148浏览";
      object2.type = "菜谱杂锦";
      object2.img="/images/list/food-2.jpg";
      array[1] = object2;

      var object3 = new Object();
      object3.title = "排骨猪肉汤";
      object3.comment = "108评论";
      object3.accessNumber = "239浏览";
      object3.type = "菜谱杂锦";
      object3.img="/images/list/food-3.jpg";
      array[2] = object3;
      return array;
  },

  //点击绑定事件
  seeDetail: function(e){
    console.log(e.currentTarget.id);
  }

})

五、最终结果

我圈中那个地方我放了点击事件，所以，点击的话调试器就会有输出

六、项目参考

https://github.com/xianzaizheli/weiXinLearn
day1-学做菜