移动互联网开发第七周课堂总结

一、API是什么？

	api是应用程序编程接口。 
	
	API是一些预先定义的接口（如函数、HTTP接口），或指软件系统不同组成部分衔接的约定。用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

	本节课新闻列表的API，返回四种数据格式：
            id 新闻id
            title 标题
            created_ai 创建时间
            author_avatar 图标
	返回的这四个变量的数据类型全是字符串，需要前端工作人员转变为需要的数据类型
	
    开发API返回四种接口，API数据接口分成四种类别，分别是远程进程获取、标准数据库语言、数据传输、信息交付这四种。

二、json文件

1.1 什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

1.2 JSON语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

JSON 数据的书写格式是：名称：值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
“firstName” : “John”
这很容易理解，等价于这条 JavaScript 语句：
firstName = “John”

JSON 值可以是：

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在方括号中）
• 对象（在花括号中）
• null

三、HBuilderX开发工具实现自定义生成代码块功能

uListMedia代码块为例：

工具–》代码块设置–》vue代码块，将设置代码复制粘贴在vue.json文件内，保存即可。index.vue输入uli弹出ulistMedia代码块。

"uListMedia": {
            "body": [
                "<view class="uni-list">",
                     "	<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">",
                          "		<view class="uni-media-list">",
                              "			<image class="uni-media-list-logo" :src="item.img"></image>",
                              "			<view class="uni-media-list-body">",
                                  "				<view class="uni-media-list-text-top">{{item.title}}</view>",
                                  "				<view class="uni-media-list-text-bottom uni-ellipsis">{{item.content}}</view>",
                              "			</view>",
                          "		</view>",
                     "	</view>",
                 "</view>"
            ],
            "prefix": "ulistmedia",
            "project": "uni-app",
            "scope": "source.vue.html"
        }

四、uni-list列表组件

组件名：uni-list 代码块： uList、uListItem 关联组件：uni-list-item、uni-badge、uni-icons、uni-list-chat、uni-list-ad

List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。

在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。

uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。

uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。

内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。

涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。

基本用法

• 设置 title 属性，可以显示列表标题
• 设置 disabled 属性，可以禁用当前项

<uni-list>
    <uni-list-item  title="列表文字" ></uni-list-item>
    <uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>

多行内容显示

• 设置 note 属性 ，可以在第二行显示描述文本信息

<uni-list>
    <uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
    <uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>

五、export default 作用

“export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用。

六、data函数的格式、作用

格式：

data() {
	return {
	
	};
}

作用：

Vue 实例的数据对象。

七、onload介绍

只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参， 只加载一次 所以如果b页面不断的修改数据 再通过 onLoad(){ uni.navigateBack({delta: 1,}) 回到A页面 a页面的数据不会随之改变。

八、uni.request函数

作用：发起网络请求。

OBJECT 参数说明

• url 开发者服务器接口地址
• data 请求的参数
• header 设置请求的 header，header 中不能设置 Referer。
• method 有效值
• timeout 超时时间，单位 ms
• dataType 如果设为 json，会尝试对返回的数据做一次 JSON.parse
• responseType 设置响应的数据类型。合法值：text、arraybuffer
• sslVerify 验证 ssl 证书
• withCredentials 跨域请求时是否携带凭证（cookies）
• firstIpv4 DNS解析时优先使用ipv4
• success 收到开发者服务器成功返回的回调函数
• fail 接口调用失败的回调函数
• complete 接口调用结束的回调函数（调用成功、失败都会执行）

九、 RESTful API

RESTful架构

RESTful就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便，所以正得到越来越多网站的采用。要理解RESTful架构，首先就是理解Representational State Transfer(表现层状态转移)的含义。

表现层

表现层比较抽象，我们可以简单将理解为网络资源的表现形式，资源是我们何以从网络上获取的具体信息，比如图片，文本，数据等信息。变现层就是将我们的资源实体以特定的方式表示出来，比我我们使用JSON表示数据信息。

状态转移

当我们访问一个网站，表示了客户端和服务器的一个互动过程。在这个过程中，就涉及到数据和状态的变化。我们从服务器获取，修改数据都是状态的变化。客户端与服务器通过HTTP协议进行通信具体通过使用常见的四个HTTP动词来实现。