近期学习记录(es+uniapp+小程序+ts)
1. es6/es7
es6新特性：
let/const：
let定义变量，const定义常量；
使用let声明的变量有块级作用域，且没有变量的声明提升，使用let声明的变量在声明之前调用会报语法错误；
使用var声明的变量没有块级作用域，在声明之前调用会报undefined。
函数扩展：
函数参数默认值；
函数的rest参数；
箭头函数：箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this。
箭头函数可以使函数内部的this指向和函数外部保持一致；
promise:
可以解决异步编程的一种方案；可以解决回调地狱；
Promise对象是一个构造函数，用来生成promise实例；
代码层面：promise提供了一个构造函数，在使用的时候必须通过new创建一个实例对象，在创建实例对象的时候需要
传递一个匿名函数，这个函数有resolve，reject两个参数，resolve成功处理函数，reject失败处理函数。
let p = new Promise((resolve,reject)=>{
// resolve作用：将promise对象状态从 pending变为resolved；
// reject作用： 将promise对象状态从 pending变为rejected；
}).then(()=>{
})
静态方法： all,race
all: 可以一次执行多个promise实例，返回值是数组。
race：一次执行多个promise实例，哪个实例最先执行完，就返回哪个执行结果。
注意：
promise对象状态不受外界环境影响且状态一旦改变就不会再变，状态不可以逆。
模板字符串： `${hello} world`
延展操作符: let objClone = {...obj}
解构赋值: let [a,b] = [1,2]; let {name, age} = {name:'xx',age:18,hobby:['reading','run']}
模块化:
export/import
//index.js文件
var name = 'xx';
export {name};
//others.js
import {name} from './index.js'
类:
class Person {
constructor(name,age){
}
sayHello(){
return 'hello' + this.name;
}
}
使用extends关键字实现继承
class child extends Person{}
es7新特性：
数组新方法 includes,返回布尔值；之前用的indexOf来判断是否存在某元素；
指数运算符**;等效于 Math.pow();
例如： console.log(2**10);//1024
es8新特性：
async/await：
async用来修饰函数的声明，使用async修饰的函数会变成一个异步函数；
await用来修饰函数的调用，被await修饰的函数必须返回一个promise异步对象；
Object.values(): 返回object属性的所有值；可用来遍历对象；
Object.entries(): 返回一个对象自身可枚举属性的键值对数组；
String.prototyp.padStart/String.prototype.padEnd: 给空字符串添加开头或结尾；
2.uniapp
1.rpx,px,em,rem,%,vh,vm区别：
rpx:相当于把屏幕宽度分为750份，1份就是1px;
px绝对单位，页面按精确像素展示；
em相对单位，相对于它的父节点字体进行计算；
rem相对单位，相对根节点html的字体大小来计算；
%相对于父元素；
vh视窗高度，1vh等于视窗高度的1%；
vm视窗宽度，1vm等于视窗宽度的1%；
2.上传文件常用api
uni.uploadFile({
url:'',
fileType:'image',
filePath:'',
name:'',
success:function(){}
})
uni.chooseFile({
count:'',
extension:['.zip','.doc'],
success:function(){}
})
uni.chooseFile({
count:'',
type:'image',
success(){}
})
3.uniapp的配置文件，入口文件，主组件，页面管理部分
uniCloud 云空间目录
components： 组件
hybrid： App端存放本地html文件的目录
platforms： 存放各平台专用页面的目录
pages： 业务页面文件存放的目录
static： 存放应用引用的本地静态资源
uni_modules: 存放uni_module规范的插件
wxcomponents: 存放小程序组件的目录
main.js: vue初始化入口文件
App.vue: 应用配置，用来配置App全局样式以及监听-应用声明周期
manifest.json: 配置应用名称，appid,logo，版本等打包信息
pages.json: 配置页面路由，导航条，选项卡等页面类信息
uni.scss: uni-app内置的常用样式变量。
4.基本开发流程
在hbuilderx编辑器中新建一个工程项目且选择默认模板进行开发；
安装插件-可以提高开发效率；
tab页面及二级页面路径配置：
pages.json文件中 pages里面进行配置；
subPackages 里面可以配置分包
页面设计开发：vue语法+小程序api
5. 页面调用接口
getApp()函数： 用于获取当前应用实例，一般用于获取 globalData；
getCurrentPages()函数： 用于获取当前页面栈的实例，以数组形式按栈的顺序给出；
uni.emit()/uni.on(): 触发和监听全局的自定义事件
uni.once(): 监听全局的自定义实例。事件可以由uni.emit触发，但只触发一次，在第一次触发之后移除监听器。
uni.$off():移除全局自定义事件监听器；
6.组件生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
7.路由与页面跳转
uni.navigateTo
uni.redirectTo
uni.switchTab
uni.reLaunch
uni.navigateBack
exit 退出小程序，target="miniProgram"时生效
8.websocket
let socketTask = uni.connectSocket({})
socketTask.onMessage(): 监听websocket接受到服务器的消息事件
socketTask.send(): 通过websocket连接发送数据
socketTask.close(): 关闭websocket连接
socketTask.onOpen(): 监听websocket连接打开事件
socketTask.onClose: 监听websocket连接关闭事件
socketTask.onError(): 监听websocket错误事件
3.小程序
1.小程序生命周期分三部分：
应用的生命周期；
onLaunch,
onShow,
onHide,
onError,
onPageNotFound
onUnhandledReection,
onThemeChange
页面的生命周期；
onLoad,
onShow,
onReady,
onHide,
onUnload
组件的生命周期；
created,
attached,
ready,
moved,
detached,
error
2.小程序路由跳转方式
navigateTo 保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页
redirectTo 关闭当前页面，跳转到应用内的某个页面
switchTab 跳转到 tabBar 页面，同时关闭其他非 tabBar 页面
navigateBack 返回上一页面
reLanch 关闭所有页面，打开到应用内的某个页面
3.提高微信小程序的应用速度方法？
小程序启动加载性能：
控制代码包的大小；
分包加载；
首屏体验（预请求，利用缓存，避免白屏，及时反馈)；
小程序渲染性能：
避免不当的使用setData；
使用自定义组件；
4.微信小程序的登录流程
- 通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据
- 通过 wx.request() 方法请求服务器，后端把 appid , appsecret 和 code 一起发送到微信服务器。appid 和 appsecret 都是微信提供的，可以在管理员后台找到
- 微信服务器返回了 openid 及本次登录的会话密钥 session_key
- 后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走
- session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输
- 然后生成 session并返回给小程序，小程序把 session 存到 storage 里面
- 下次请求时，先从 storage 里面读取，然后带给服务端
- 服务端对比 session 对应的记录，然后校验有效期
5.小程序的发布流程
关于发布的流程，主要分成了三个部分：
1.上传代码
2.提交审核
3.发布版本
6.小程序的支付流程
1.进入小程序，点击支付
2.wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
3.在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器
4.服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，
获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息
5.小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付
6.接下来的一些列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付之后执行鉴权调起支付
7.鉴权调起支付：在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示
8.推送支付结果：微信后台在给前端返回支付的结果后，也会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态
7.小程序的实现原理
小程序中，选择了Hybrid的渲染方式，将视图层和逻辑层是分开的，双线程同时运行，视图层的界面使用WebView进行渲染，逻辑层运行在JSCore中。
小程序在渲染层，宿主环境会把wxml转化成对应的JS对象，在逻辑层发生数据变更的时候，通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，
再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的视图
8.小程序分包
小程序分包如何进行工作的： 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。
在 subpackages 里面进行配置分包。（app.json/pages.json【这个是uni-app】文件中）
微信小程序对于大小方面的相关限制：
1.不限制分包的数量；
2.所有分包的大小不能超过20M；
3.单个包的大小不能超过2M；
4.typescript
1. 数据类型：
boolean-布尔类型
number-数字类型
string-字符串类型
array-数组类型
tuple-元组类型
enum-枚举类型
any-任意类型
null和undefined类型
void类型
never类型
object对象类型
总结：和js一样，分为基本类型和引用类型。
基本类型上ts新增了void, any, enum等原始类型。
2.ts中的枚举类型
例如：
enum Days {
Sun, // 没有赋值的话，默认从 0 开始，依次累加1
Mon,
Tue,
Wed,
Thu,
Fri,
Sat
}
3.ts中接口是什么？
接口所描述的是一个对象相关的属性和方法。
例如：
interface interface_name {}
interface User {
name: string
age?: number // ?表示可选属性
readonly hobby: array
}
const getUserInfo = (user: User):string => {
return `name: ${user.name}, age: ${user.age}`
}
getUserInfo({name: 'tony', age: 18, hobby: ['sing']})
4.ts中的类如何理解？
class class_name {
//字段:类里面声明的变量。
name: string
// 构造函数：类实例化时调用，可以为类的对象分配内存
constructor(name: string){
this.name = name;
}
//方法：为对象要执行的操作。
sayHello():void{
console.log('hello,' + this.name)
}
}
extends: 继承
类继承后，子类可以对父类的方法重新定义，这个过程称为方法的重写。通过super对父类直接引用，
该关键字可以引用父类的属性和方法。
修饰符： public-公共 , private-私有, protect-受保护【子类也可以访问】
readonly 只读修饰符
static 静态属性
5.ts中函数理解？
ts声明函数需要定义参数类型或者声明返回值类型；
ts在参数中，添加可选参数 ？操作符；
ts增加了函数重载功能。
6.ts中泛型
泛型通过 <> 的形式进行表述，可以声明 函数， 接口， 类。
例如：
function fun<T>(param:T):T {
return param
}
7.ts中的模块
通过 export 关键字导出变量或者类型，用法与es6模块一致，
例如：
export const a = 'xx';
通过 import 引入模块，例如：
import { a } from './index.js';
