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

在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>