微信小程序之旅一（頁面渲染）

一、微信小程序條件渲染（wx:if）：使用wx:if={{Boolean}}來判斷是否須要渲染該代碼塊，使用wx:elif和wx:eise來渲染else塊

<view wx:if="{{isShow}}" class='item'>
{{title}}
</view>

 

二、微信小程序多組件條件渲染（block wx:if）：使用<block wx:if="{{Boolean}}"><view></view>…</block>來實現多組件條件渲染

 <block wx:if="{{isShow}}">
      <view class='item'>
        <view>
          <image src='{{img}}' style='width:75px; height:58px'></image>
        </view>
        <view class='desc'>
          <view class='title'>{{title}}</view>
          <view class='count'>
            <view>{{type}}</view>
            <view class='liulan'>{{liulan}}</view>
            <view class='pinglun'>{{pinglun}}</view>
          </view>
        </view>
      </view>
    </block>

 

三、微信小程序列表渲染（wx:for）：使用wx:for={{Array}}來渲染列表,使用wx:for-index指定當前下表變量名，使用wx:for-item指定當前元素變量名

 <view wx:for="{{array}}" wx:for-item="aitem" wx:for-index="aindex">
    <view>{{aitem.title}}</view>
  </view>

 

四、微信小程序多組件列表渲染（block wx:for）:使用<block wx:for="{{Array}}"><view></view>…</block>來實現多組件列表渲染

<block wx:for="{{array}}">
      <view class='item' bindtap='seeDetail' id="0">
        <view>
          <image src='{{item.img}}' style='width:75px; height:58px'></image>
        </view>
        <view class='desc'>
          <view class='title'>{{item.title}}</view>
          <view class='count'>
            <view>{{item.type}}</view>
            <view class='liulan'>{{item.liulan}}</view>
            <view class='pinglun'>{{item.pinglun}}</view>
          </view>
        </view>
      </view>
    </block>

 

五、微信小程序指定惟一標識（wx:key）

六、微信小程序定義模板（template）：在<templeat></templeat>中使用name做爲模板的名字

<template name="msgitem">
  <view>
    <view>{{title}}</view>
  </view>
</template>

 

七、微信小程序使用模板（is）：使用is屬性聲明須要使用的模板，而後將模板所需data傳入

<template is="msgitem" data="{{item}}" />

Page({
   data:{
     item:{
        title:"測試數據"
     }
   }
})

八、微信小程序引用功能（improt和include）：二者區別在於import引用模板文件，include將整個文件出了<template>以外進行引用

// improt 引用
<improt src="temp.wxml" />
<template is="temp" data="{{text:'forbar'}}" />
// include 引用
<include src="temp.wxml" />

小試牛刀：（仿香哈菜譜）

代碼以下

建立文件 "pages/cook/cook" , "pages/headline/headline" , "pages/food/food" , "pages/message/message" , "pages/me/me"

app.js中配置以下代碼

{
  "pages": [
    "pages/cook/cook",
    "pages/headline/headline",
    "pages/food/food",
    "pages/message/message",
    "pages/me/me"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#494949",
    "navigationBarTitleText": "學作菜",
    "navigationBarTextStyle": "#fff"
  },
  "tabBar": {
    "backgroundColor": "#fff",
    "color": "#999",
    "selectedColor": "#CC1004",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/cook/cook",
        "text": "學作菜",
        "iconPath": "images/dev/cook-0.png",
        "selectedIconPath": "images/dev/cook-1.png"
      },
      {
        "pagePath": "pages/headline/headline",
        "text": "頭條",
        "iconPath": "images/dev/headline-0.png",
        "selectedIconPath": "images/dev/headline-1.png"
      },
      {
        "pagePath": "pages/food/food",
        "text": "美食圈",
        "iconPath": "images/dev/food-0.png",
        "selectedIconPath": "images/dev/food-1.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "images/dev/message-0.png",
        "selectedIconPath": "images/dev/message-1.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "個人",
        "iconPath": "images/dev/me-0.png",
        "selectedIconPath": "images/dev/me-1.png"
      }
    ]
  }
}

cook.wxml

<!--pages/cook/cook.wxml-->
<view class='conetent'>
  <view class='img'>
    <image src='../../images/banner.jpg' style='width:100%; height:230px;'></image>
  </view>
  <view class='nav'>
    <view class='nav-item'>
      <view>
        <image src='../../images/icon/fenlei.png' style='width:25px; height:23px;'></image>
      </view>
      <view>菜譜分類</view>
    </view>
    <view class='nav-item'>
      <view>
        <image src='../../images/icon/shipin.png' style='width:25px; height:23px;'></image>
      </view>
      <view>視頻</view>
    </view>
    <view class='nav-item'>
      <view>
        <image src='../../images/icon/yangsheng.png' style='width:25px; height:23px;'></image>
      </view>
      <view>美食養生</view>
    </view>
    <view class='nav-item'>
      <view>
        <image src='../../images/icon/shangou.png' style='width:25px; height:23px;'></image>
      </view>
      <view>閃購</view>
    </view>
  </view>
  <view class='hr'></view>
  <view class='head'>
    <view>香哈頭條</view>
    <view class='right'>></view>
  </view>
  <view class='list'>
    <block wx:for="{{array}}">
      <view class='item' bindtap='seeDetail' id="0">
        <view>
          <image src='{{item.img}}' style='width:75px; height:58px'></image>
        </view>
        <view class='desc'>
          <view class='title'>{{item.title}}</view>
          <view class='count'>
            <view>{{item.type}}</view>
            <view class='liulan'>{{item.liulan}}</view>
            <view class='pinglun'>{{item.pinglun}}</view>
          </view>
        </view>
      </view>
    </block>
  </view>
  <view class='hr'></view>
</view>

cook.js

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

  /**
   * 頁面的初始數據
   */
  data: {
    array: []
  },
  onLoad: function (options) {
    var array = this.initData();
    this.setData({
      array: array
    })
  },
  initData: function () {
    let array = [];
    var object1 = new Object();
    object1.img = '../../images/list/foot-1.jpg';
    object1.title = '愛心早餐';
    object1.type = '健康養生';
    object1.liulan = '29545瀏覽';
    object1.pinglun = '15評論';
    array[0] = object1;

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

    var object3 = new Object();
    object3.img = '../../images/list/foot-3.jpg';
    object3.title = '橘子吃多了容易變成小黃人';
    object3.type = '家庭醫審在線';
    object3.liulan = '24543瀏覽';
    object3.pinglun = '13評論';
    array[2] = object3;

    var object3 = new Object();
    object3.img = '../../images/list/foot-4.jpg';
    object3.title = '搜狐新聞·手機用久了';
    object3.type = '廣告';
    object3.liulan = '424543瀏覽';
    object3.pinglun = '313評論';
    array[2] = object3;
    return array;
  }
})

cook.wxss

/* pages/cook/cook.wxss */

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

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

.hr {
  height: 15px;
  background-color: #ccc;
  margin-top: 20px;
  opacity: 0.2;
}

.head {
  display: flex;
  flex-direction: row;
  margin: 10px;
  font-size: 13px;
  color: #999;
}

.right {
  position: absolute;
  right: 10px;
  color: #ccc;
}

.hr2 {
  height: 2px;
  background-color: #ccc;
  opacity: 0.2;
}

.item {
  display: flex;
  flex-direction: row;
  margin-left: 10px;
  margin-bottom: 5px;
}

.desc {
  margin-left: 20px;
  line-height: 30px;
}

.title {
  font-weight: bold;
}

.count {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: #999;
}

.liulan {
  position: absolute;
  right: 70px;
}

.pinglun {
  position: absolute;
  right: 10px;
}

最終實現效果