微信小程序开发-从基础到实战（三）

在LZ原先的认识中API是开放的很好获得的，虽然LZ曾经也调用过接口开发，但是当时并不是很理解token这个令牌是做什么用的，会使用API了但是还是很懵懂，直到这次自己做的项目才理解API的原理以及认证流程

一、API调用前准备
请先了解什么是OAuth协议，可参考本人写的另一篇文章

OAuth2.0的简单理解与使用：http://blog.csdn.net/zane3/article/details/79590699

主要分为以下几个步骤（以本次开发的博客为例，主要调用csdn的开放接口）：

1.登录csdn开放平台，按照新手指导成为开发者，并创立自己的应用，获得App Key与App Secret


csdn开发平台文档链接：open.csdn.net/wiki/index

2.利用获得的秘钥去调用授权认证接口获得acess_token

3.调用任意csdn博客开发接口测试接口可用性

二、列表页面开发、视图层部分讲解

1.依据API接口返回数据设置项目页面的变量与标签名



以上为博客列表信息，根据信息设置列表结构。
2.模板介绍

由返回的数据可以发现文章列表的每一项属性是一样的，因此可以考虑设为列表项模板。
        WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
模板使用示例如下：

定义模板：使用 name 属性，作为模板的名字。然后在

<template/>

内定义代码片段，如：

<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>//"..."代表展开item对象属性

Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})

is 属性可以使用 Mustache 语法（即“{{}}”），来动态决定具体需要渲染哪个模板。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html

模板引用采用import与include两个关键字，区别在于：
1.import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template
2.

include

可以将目标文件除了

<template/>

<wxs/>

外的整个代码引入，相当于是拷贝到

include

位置
使用示例：
import:

<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include:

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

实际项目代码（后续将对条件渲染和数据绑定讲解，对代码不理解的可以先往后看）：
list.wxml
list.wxml<import src="../../template/listItem/listItem"/><view wx:for="{{lists}}" wx:key="id"> <template is="listItem" data="{{...item}}"/></view>listItem.wxmllistItem.wxml<template name="listItem"> <navigator url='' hover-class=''> <view class="item-title"> <text>{{title}}</text> </view> <view class="description">{{description}}</view> <view class="info"> <view class="type">{{type}}</view> <view class="create-at">{{create_at}}</view> <view class="view-count"> <image src=''></image> <text>{{view_count}}</text> </view> <view class="comment-count"> <image src=''></image> <text>{{comment_count}}</text> </view> </view> </navigator></template>3.wxml数据绑定
数据绑定使用 Mustache 语法（双大括号）将变量包起来
作用范围：
内容属性，运算，判断等
常用举例：

<view> {{ message }} </view>
<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>
<view hidden="{{flag ? true : false}}"> Hidden </view>

对应page页面数据属性：

Page({
data: {

    message: 'Hello MINA!', id: 0, condition: true

}

})

文档链接：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html
4.列表渲染（wx:for）

在组件上使用

wx:for

控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为

index

，数组当前项的变量名默认为

item

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

Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}})

使用

wx:for-item

可以指定数组当前元素的变量名，
使用

wx:for-index

可以指定数组当前下标的变量名：
wx:key：使用数组项某一属性保持数组中各项位置不会发生变化
文档链接：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html

5.事件（摘自小程序文档）

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。
事件分为冒泡事件与非冒泡事件（即冒泡可以传递到父节点）
WXML的冒泡事件列表：

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如

<form/>

的

submit

事件，

<input/>

的

input

事件，

<scroll-view/>

的

scroll

事件，(详见各个组件)
事件绑定的写法同组件的属性，以 key、value 的形式。
key 以

bind

或

catch

开头，然后跟上事件的类型，如

bindtap

、

catchtouchstart

。自基础库版本 1.5.0 起，

bind

和

catch

后可以紧跟一个冒号，其含义不变，如

bind:tap

、、

catch:touchstart

。
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind

事件绑定不会阻止冒泡事件向上冒泡，

catch

事件绑定可以阻止冒泡事件向上冒泡。
示例：

<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>