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

一、什么是RESTful API

1、概括

RESTful API是REST风格的API，是一套用来规范多种形式的前端和同一个后台的交互方式的协议。RESTful API由后台也就是SERVER来提供前端来调用；前端调用API向后台发起HTTP请求，后台响应请求将处理结果反馈给前端。

2、REST是什么

想要知道RESTful api是什么，首先你要知道REST是什么。

REST（英文：REpresentational State Transfer，简称为REST）描述了一个架构样式的网络系统，它指的是一组架构约束条件和原则。然而满足这些约束条件和原则的应用程序或设计就是 RESTful。

REST的英语的直译就是“表现层状态转移”。如果看这个概念，估计没几个人能明白是什么意思。那下面就让我来用一句人话解释一下什么是RESTful:URL定位资源，用HTTP动词（GET,POST,PUT,DELETE)描述操作。

Resource：资源，即数据。

Representational：某种表现形式，比如用JSON，XML，JPEG等；

State Transfer：状态变化。通过HTTP动词实现。

所以RESTful API就是REST风格的API。

3、那么在什么场景下使用RESTful API

在当今的互联网应用的前端展示媒介很丰富。有手机、有平板电脑还有PC以及其他的展示媒介。那么这些前端接收到的用户请求统一由一个后台来处理并返回给不同的前端肯定是最科学和最经济的方式。RESTful API就是一套协议来规范多种形式的前端和同一个后台的交互方式。RESTful API由后台也就是SERVER来提供前端来调用。前端调用API向后台发起HTTP请求，后台响应请求将处理结果反馈给前端。

二、uni-list 组件

1、简介

List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。

uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。

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

2、uni-list-cell

.uni-list-cell类的view中用v-for遍历数组，在DOM层中展示news中的新闻列表内容

3、uni-list-cell-hover

<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index">

4、其他类

uni-media-list
uni-media-list-listlogo
uni-media-listbody
uni-media-list-text-top和uni-media-list-text-bottom
uni-ellipsis

三、页面跳转

1、uni.navigateTo(OBJECT)

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

uni.navigateTo({

url: 'test?id=1&name=uniapp'

 

});

export default {

onLoad: function (option) {

console.log(option.id);

console.log(option.name);

 }

}

2、uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。OBJECT参数说明参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

uni.redirectTo({

url: 'test?id=1' // 传递参数 id，值为1

});

3、uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

uni.reLaunch({

url: 'test?id=1'

});

export default {

onLoad: function (option) {

console.log(option.query);

   }

}

4、uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面)，路径后不能带参数

pages.json{

"tabBar": {

"list": [

{

"pagePath": "index",

"text": "首页"

},{

"pagePath": "other",

"text": "其他"

      }]

   }

}

other.vueuni.switchTab({

url: 'index'

});

5、uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。OBJECT参数说明：参数类型必填说明deltaNumber1返回的页面数，如果 delta 大于现有页面数，则返回到首页。

uni.navigateTo({

url: 'B?id=1'

});

uni.navigateTo({

url: 'C?id=1'

});

uni.navigateBack({

delta: 2

});

四、rich-text

1、简介

富文本。

支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

2、nodes

nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，推荐直接使用 Array 类型避免内部转换导致的性能下降。App-nvue 和支付宝小程序不支持 HTML String 方式，仅支持直接使用节点列表即 Array 类型，如要使用 HTML String，则需自己将 HTML String 转化为 nodes 数组，可使用 html-parser 转换。

节点列表内的节点现支持两种类型，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。

五、思维导图