在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.wxml
listItem.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>