小程序（三）

这篇文章主要是总结一些小程序入门中用到的从视图层到数据传输的一些方法和事件。

视图层

1.数据绑定
使用{{}}即可完成数据绑定，{{}}内也可以进行计算、逻辑判断、字符串运算等
也可以为属性进行数据绑定，在引号内使用，如：
<view id="item-{{id}}"> </view>，在data中定义id＝1，就可以在这里绑定id为item-1
2.列表渲染
使用wx:for后面接需要渲染的数组，示例如下：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
  }
})

使用列表渲染有默认值index，表示当前下标，如：{{index}}: {{item}}
使用wx:for-index和wx:for-item可以指定当前下标名和元素名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-        item="itemName">
{{idx}}: {{itemName.message}}
</view>

3.条件渲染:使用wx:if/elif/else，示例：

<!--wxml-->
  <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
  <view wx:elif="{{view == 'APP'}}"> APP </view>
  <view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

上面的代码根据data中的view的值判断到底显示什么样的内容
可以使用<block>结构进行条件渲染多个组件，注意block只是一个包装元素没有实际样式：

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

4.使用模版

<template name="staffName">
  <view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})

上面的例子首先使用template定义了一个模版，指定name属性，然后定义了模版的内容。下面就可以直接使用这个模版了，定义data属性为模版传递每个实例化的数据，is指定要使用的是哪个模版

5.事件
分为bind开头的事件属性和catch开头的事件属性，前者不会阻止冒泡，后者会阻止冒泡
每个事件对应一些属性，如果把一个event打印出来返回内容如下：

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me!             </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})
可以看到log出来的信息大致如下：

{
"type": "tap",  //事件类型
"timeStamp": 1252,  //事件生成的事件戳
"target": {   //出发事件的源组件
  "id": "tapTest",
  "offsetLeft": 0,
  "offsetTop": 0,
  "dataset": {  //组件属性中以data-开头的属性集合
  "hi": "MINA"
  }
},
"currentTarget": {  //事件绑定的当前组件
  "id": "tapTest",
  "offsetLeft": 0,
  "offsetTop": 0,
  "dataset": {
    "hi": "MINA"
  }
},
"touches": [{  //触摸信息，分别是距离文档左上角、出去导航栏的左上角、整个屏幕左上角距离
  "pageX": 30,
  "pageY": 12,
  "clientX": 30,
  "clientY": 12,
  "screenX": 112,
  "screenY": 151
}],
"detail": {
  "x": 30,
  "y": 12
}
}

传递基本数据

1、index.js 发送

Page({  
    data: {  
    testStr: '字符串str'  
  },  
  onLoad: function () {  
    },  
    next: function(e){  
      wx.navigateTo({  
        url: '/pages/test/test?str='+this.data.testStr,  
      })  
  }  
})  

2、test.js 接受页JS

Page({  
data:{  
},  
onLoad:function(options){  
console.log("接收到的参数是str="+options.str);  
  }  
}) 

传递对象{}

1、index.js 发送页JS

Page({  
  data: {  
    testData:{name:'我是name', extra:'我是extra'}  
  },  
  onLoad: function () {  
  },  
  next: function(e){  
    wx.navigateTo({  
      url: '/pages/test/test?extra='+JSON.stringify(this.data.testData)  
    })  
  }  
})