微信小程序学习笔记（二）

swiper框架

swiper轮播图组件，swiper-item是承载里面具体内容组件的容器，swiper-item的宽高决定于父控件的swiper的宽高
swiper框架的具体使用，可查看微信开发者文档·组件部分
——需要注意的是，微信小程序对应html的wxml文件，其中标签无法直接设置布尔值true、false
——布尔值必须写在{{ }}内，否则只要有值，便默认为true。

例如：

<swiper indicator-dots='true' indicator-color='blue' autoplay='true' interval='2000'>

autoplay="true" 等于 autoplay="666"

• 小程序可以进行单向数据绑定，暂时无法双向绑定。

数据绑定

小程序的数据绑定使用{{ }}，从服务器里拿数据放在onload函数里,并加上一句话：this.setDate(接收服务器数据的变量名)
这样相当于将数据写入了data中，然后只需要将对应的数据变量用{{ }}绑定到wxml文件中相应位置即可

data:{
  },
 onLoad:function(options){
   // 生命周期函数--监听页面加载
   var post_content1={
   date:"Sep 18 2016",
   title:"正是虾蟹肥状时期",
   post_img:"/images/post/crab.png",
   content:"虾蟹是节肢动物的另一家族，同属于甲壳纲的十足目。这类动物与人类有着十分密切的关系，有些是主要的水产养殖或捕捞对象，其中尤以虾、龙虾和蟹等，在我国海洋渔业捕获研究，目前已发现的约有1000多种，其中虾类400多种，蟹类600多种。",
   view_num:"112",
   collect_num:"60",
   author_img:"/images/avatar/1.png"
}
   this.setData(post_content1);
  }

• 注意！要是把数据做成数组，则需要注意this.setData的格式。
  并且需要进行列表渲染（后面再解释）

先来看看修改后的格式

var post_content=[
{
   省略
   },
{
  省略
}
]
this.setData({
   post_key:post_content
   （绑定键名，用于引用）
});

• 
  
• 数据绑定在wxml文件标签中的应用
  

<!--数据绑定使用对象---内容-->
<view>{{message}}</view>
内容可直接绑定

<!--数据绑定使用对象---组件属性---需要在双引号之内-->
<view id="item-{{id}}">组件属性</view>

<!--数据绑定使用对象---控制属性---需要在双引号之内-->
<view wx:if="{{condition}}">控制属性</view>

<!--数据绑定使用对象---三元运算-->
<view hindden="{{flag ? true : false}}">三元运算符</view>

<!--数据绑定使用对象---算数运算-->
<view>我是运算结果---{{a + b}} + {{c}} + d</view>

<!--数据绑定使用对象---逻辑判断-->
<view wx:if="{{length > 5}}">asdf</view>

<!--数据绑定使用对象---字符串运算-->
<view>{{"Hello " + name}}</view>

<!--数据绑定使用对象---数组组合-->
<view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view>

<!--数据绑定使用对象---对象-->
<template is="objectCombine" data="{{for: x, bar: y}}"></template>

<!--数据绑定使用对象---扩展运算符对象 ... 将一个对象展开-->
<template is="objectCombine" data="{{...obj1, ...obj2, p: 5}}"></template>

<!--数据绑定使用对象---对象的key和value相同时-->
<template is="objectCombine" data="{{foo, bar}}"></template>

---

列表渲染:wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名

截取部分代码做例子：

<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="idx">
<view class="post-container">
<view class="post-author-date">
<image class="post-author"src="{{item.author_img}}"></image>
<text class="post-date">{{item.date}} {{idx}}</text>

点击事件

点击事件用tap
在使用的时候需要加“bind”，如bindtap
或者加“catch”，如catchtap

小程序的冒泡事件
使用bind会发生冒泡
使用catch会阻止冒泡

关于跳转

wx.navigateTo隐藏当前页面，跳转到下一页（从父页面跳转到子页面，子页面最多5级）
wx.redirectTo 关闭当前页面，跳转到下一个页面（俩个页面是平级的）

示例：