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>