uni-app实战

最新推荐文章于 2024-05-04 03:19:29 发布

初衷 °

最新推荐文章于 2024-05-04 03:19:29 发布

阅读量705

点赞数 1

文章标签： uni-app 前端 json

本文链接：https://blog.csdn.net/weixin_51931985/article/details/127330748

版权

1. 计算机语言

C语言-硬件开发
JAVA-企业级开发
Python-数据处理
JS-前端开发：包括node和uni-app

2. 企业级开发

技术要求：企业级开发一定是使用新的技术，所有开发人员都需要从头开始学习。
第一行代码的学习方法：按照教学视频反复练习，并记录学习笔记，将所学到的知识点都记录下来；根据学习笔记的构建，判断哪些知识点只出现过一次，而哪些知识点反复出现，从而明确各个知识点的重要程度。

3. API开发

3.1 前后端分离的工作模式

后端人员负责API开发，前端人员负责API调用。应用程序的开发，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直维护。

3.2 API接口文档

API接口主要由四分部组成：方法、URL、请求参数和返回参数。

3.2.1.URL地址

需求方通过调用接口 URL，获取响应内容。

3.2.2.请求/返回参数

字段、说明、类型、备注、是否必填。

字段是类的属性。
说明是中文释义。
类型是属性类型，只有String、Number、Object、Array四种类型。
备注是一些解释，或者可以写一下例子，比如负责json结构的情况，最好写上例子，好让前端能更好理解。
是否必填是字段的是否必填。

3.2.3.支持的请求方法：

GET（SELECT）：从服务器取出资源（一项或多项）。
POST（CREATE）：在服务器新建一个资源。
PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
DELETE（DELETE）：从服务器删除资源。
HEAD：获取资源的元数据。
OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。

4. JSON数据格式

4.1 基本概念

定义：轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。
本质：一个字符串，只不过它用了一些特殊的字符标记来表示不同的类型的数据。

4.2 数据格式

[ ]：方括号用于表示数据类型。
{}：大括号用于表示对象类型。
:：冒号用于分隔name/value对。
,：逗号用于分隔value
允许的空白：Space（空格），水平Tab，换行（LF），回车（CR）。

4.3 允许的值

4种数据类型：object，array，number，string。
3种字面值（常量）：true，false，null。

5. 快速代码片的生成

5.1 问题原因

在按照uni-app官方视频进行学习时，由于uListMedia不是内置组件，因此最初输入时没有提示信息，需进行自定义。

5.2 自定义代码块

Step1.HBuilderX-工具-代码块设置-vue代码块
Step2.将网上提供的代码块复制到vue.json的自定义代码块中并保存。
注意事项：一定要将自定义代码块放置到大括号{}内否则不会生效。
自定义uListMedia代码块如下：

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

6. 第一个组件——uni-list

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

6.1 基本构成

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

6.2 使用方法

uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。

6.2.1 基本用法

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

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

6.2.2 多行内容显示

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

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

6.2.3 右侧显示角标、swith

设置 show-badge 属性，可以显示角标内容
设置 show-switch 属性，可以显示 switch 开关

 <uni-list>
    <uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
     thumb-size="lg" rightText="右侧文字"></uni-list-item>
    <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>

6.2.1 左侧显示略缩图、图标

设置 thumb 属性，可以在列表左侧显示略缩图
设置 show-extra-icon 属性，并指定 extra-icon 可以在左侧显示图标

 <uni-list>
    <uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
     thumb-size="lg" rightText="右侧文字"></uni-list-item>
    <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>

7. 第一个函数——uni.request

7.1 功能实现

uni-app进行http后台服务请求，一般使用request函数实现。

7.2 参数说明

url（必填）：网络地址
data：传值，最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。
method：访问接口的方式，有效值：GET、POST、PUT、DELETE、CONNET、HEAD、OPTIONS、TRACE
success：访问接口成功后会调用success参数为res
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）

8. export default{}导出组件

export：导出模块的组件对象；default：缺省的模块名。

8.1 模块可定义的对象

data：定义属性，必须声明为返回一个初始数据对象的函数。
method：定义事件函数，通过添加点击事件来执行。

8.2 数据对象属性的引用

显示引用：在index.vue的template标签中用双引号来显式引用（news.app中使用的该方法）
隐式引用：不在标签包裹的内容上显式地写在代码中，而是把它放在标签中。

9.uni-app页面的声明周期

onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)，参考示例
onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

10. RESTful编程开发

10.1 基本概念

RESTful是一种网络应用程序的设计风格和开发方式，基于HTTP，可以使用 XML 格式定义或 JSON 格式定义。

10.2 特点

使用JSON格式的REST风格的API具有简单、易读、易用的特点。
REST 是面向资源的，每个资源都有一个唯一的资源定位符（URI），所以URI中不能由动词。
请求方式：GET（SELECT）、POST（CREATE）、PUT（UPDATE）、PATCH（UPDATE）、DELETE（DELETE）。
同一个资源具有多种表现形式(xml,json等)

11. lambda函数式编程

11.1 基本概念

以数学中函数映射的思想来编写出函数式的程序代码，让代码着重于输入和输出，而底层的映射处理逻辑可以当黑盒看待。

11.2 特点

使用好处：代码更加简洁、紧凑。
Lambda表达式格式要求：
(接口参数列表) -> 表达式
(接口参数列表) -> 多条语句
匿名内部类：
不想额外编写接口的实现再去构造对象执行方法，而是直接创建匿名对象，执行完接口中的方法，对象的使命也就结束了。
语法糖
计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是增加了程序的可读性。

12.空vue的组成部分

以HbuilderX中新建的uni-app默认模板为例，可看出空vue共包含三个组成部分：

template（HTML）：模板结构
script（JS）：脚本行为
style（CSS）：组件样式

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>