微信小程序入门到实战（四）

调试方法

小程序的调试和通常的网页调试差很少，可是注意几点：

• 调试文件的选择 打开调试器，选中Sources页签，而后使用快捷键：ctrl+p打开搜索框，选择后缀为sm的文件进行调试。

  

• 数据绑定的展现 打开调试器，选中AppData页签，能够查看到页面数据绑定的详细信息，是否正确绑定。记载着全部页面的数据绑定内容。

  

  经过上面这个图片，咱们就能够知道，只有在datesArry对象里面有须要绑定在页面上面的数据。

Template模版

wxml / wxss / js模块的复用

当一块区域须要在多个地方使用的时候，能够把这个区域作成一个模版，在使用的时候调用这个模版便可，这样即减小重复代码的编写，又易于维护，让代码整洁。

• 模版代码的编写

<template name='postItem'>
  <view class='box'>
    <view class='title-box'>
      <text class='title'>{{item.title}}</text>
      <text class='date'>{{item.date}}</text>
    </view>
    <image src='{{item.imgUrl}}' class='cont-image'></image>
    <text class='content'>{{item.content}}</text>
  </view>
</template>
复制代码

为了方便管理咱们的模版文件，能够在pages文件夹下面，新建一个模版文件，里面存放编写的模版；咱们要使用标签template来包裹代码，而且要给其加一个name属性，固然也要编写对应的样式，和正常写样式的方法没有区别。

新建的模版文件里面只能存放模版的wxml和wxss文件，目前小程序的模版文件里面放入其余的文件类型不起做用，不能进行复用，虽然不报错，好比js文件。

template标签只是一种占位符，告诉编译器这个地方是加载模版代码的，当页面编译完成，这个标签就消失，因此要对与模版文件响应事件，咱们就须要在加载模版文件的区域，使用一个能够添加事件的标签把其模版文件包裹起来，好比：view / block

<view bindtap=” ....”> template模版代码 </view>

• 使用模版代码

编写好了模版代码，怎么样在须要加载模版代码的地方使用呢？

首先，模版代码是在其余文件夹中，使用它，就必然要引入该模版文件， 通常在对应要引入模版文件的文件开头部分引入：

// 在对应的wxml文件中开头引入
<import  src = '模版wxml文件路径' />

// 在对应的wxss文件中开头引入，注意末尾的分号
@import '模版wxss文件路径' ；
复制代码

而后在引入模版文件的wxml文件，适当位置使用

<template  is = '模版的名字'   data="{{要绑定到模版的数据}}"
复制代码

到此，简单的模版引入和模版数据的绑定就完成，当咱们要循环模版的时候，只须要以下，在外面加一层标签便可：

// bolck标签的做用是做用事件到template模版上面
<block wx:for=" 服务器获取的数据集"  wx:for-item='item' wx:for-index='index' >
    <template  is = '模版的名字'   data="{{要绑定到模版的数据，通常是服务器获取的一个数据对象item}}"
</block>
复制代码

模版循环

前一篇文章说了一下数据的循环，借用属性wx:for=' '，经过默认获得的item / index能够知道对应的子对象数据和其索引值；可是咱们发现，每个模版绑定的数据项前面都要使用item.属性值(子对象的属性值)来绑定数据，item是多余的，有没有办法去简化？固然有！

<view wx:for='{{datesArry}}' wx:for-item='item' wx:for-index='idx'>
// 在对应的item的前面加上 ... 三个点
  <template is='postItem' data='{{...item}}'  />  
  // <view>{{idx}}</view>
</view>
复制代码

在循环的子对象item前面加上...三个点，就行。简单的一行代码就实现了下图的页面。

前面加三个小点的做用：至关于把子对象给平铺，直接展开了里面的属性值，就能够直接在模版里面绑定这些属性值，不须要在模版里面指定其数据源（这就是...的做用）

自定义属性

自定义属性通常说来都是使用data-开头，绑定一些咱们须要存储的信息，传递到其余地方，好比点击的页面文章索引。

• 设置自定义属性

设置自定义属性很简单，可是要注意一点的是，在操做模版的时候，必定要在其外面包裹一层view，才能进行操做；缘由是template标签只是一个占位符，编译后就消失。

<view wx:for='{{datesArry}}' wx:for-item='item' data-postId='{{item.postId}} wx:for-index='idx' catchtap='onPostTap' '>
  <template is='postItem' data='{{...item}}' />
</view>
复制代码

item.postId是从服务器上面获取的，是数据源中的一个属性。

• 获取自定义属性

获取自定义属性，固然是经过事件去获取

onPostTap:function(event){
      var postId=event.currentTarget.dataset.postid;
      var postIdData = event.currentTarget.dataset;
      console.log(postId);   // 1 
      console.log(postIdData);
  }
复制代码

event.currentTarget.dataset.postid：最终的自定义属性值

• event事件对象
• event.currentTarget：当前点击的目标元素
• event.currentTarget.dataset：目标元素上面的自定义属性集合