小程序开发之路

模板语法

优点：通过模板，可以复用相同的代码块，减少代码冗余，提高维护的遍历行
定义：

  <template name="msgItem">
      <view class="weui-cell__hd" style="">
        <image src="{{thumbnailUrl[0]}}" style="width:{{vwidth}}px;" bindload='imageLoad' mode='widthFix'></image>
      </view>
      <view class="flex-wrp" style="flex-direction:column;padding-left:2rem;">
        <view class="flex-item flex-item-V" style="font-size:1rem;font-weight:bold;">{{title}}</view>
        <view class="flex-item flex-item-V" style="color: rgba(0,0,0,.5);">
          <view style="display:inline;border:solid 1px #CCC4CA;font-size:0.65rem;">{{tags}}</view>
          <view style="display:inline;margin-left:8px;font-size:0.75rem;">{{shootingDate}}</view>
          <image src="../images/more.png" style="width:3.5rem;display:inline; float: right;padding-right: 30px;" mode='widthFix' slot="footer">
          </image>
        </view>
      </view>
    </template>

引用：

 <template is="msgItem" data="{{...item}}" />

wxml中元素自定义数据绑定

优点：通过数据绑定，在选中目标时，可以将当前选中目标的相关信息透传给操作方法
wxml定义：

    <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">简介</view>

通过“data-参数名”的形式声明参数变量
js引用：

  // 点击标题切换当前页时改变样式
  swichNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  }

通过“e.target.dataset.参数名”的获取自定义参数值