uni-app总结

使用uni-app框架,uni-ui组件,仿写猫眼电影

 

 

 

 

 

一、uni-app的数据绑定

 ①内容绑定

<text>{{模型变量名或表达式}}</text>

 ②属性绑定

<any v-bind:属性名="属性值"  :属性名="属性值"/>

 ③样式绑定

<any  :style="{color: 表达式, backgroundColor: 表达式}"  :class="{btn:true, danger:表达式}"/>

 ④事件绑定

<button  @click="f1"  @click="f2(实参)">

 ⑤双向数据绑定

<input  v-model="模型变量名"/>

 ⑥条件渲染

<any  v-show="判定表达式"/> display:none|block

<any  v-if="判定表达式"/> 修改DOM树上元素的有无

 ⑦列表渲染

<any v-for="(item, index)  in  数组变量"  :key="index"/>

二、uni-app中的生命周期方法 —— 重点面试题

 概念：LifeCycle Methods，方法名固定，无需自己调用，到了指定的时刻，会被框架自动调用。

 1.应用级生命周期方法（App.vue） —— 高仿小程序

onLaunch()：应用启动

onShow()：应用显示出来

onHide()：应用隐藏起来

 2.页面级生命周期方法（pages）—— 高仿小程序

onLoad()：页面挂载

onShow()：页面显示出来

onReady()：页面准备就绪了，可供用户使用了

onHide()：页面隐藏起来

onUnload()：页面卸载

onReachBottom()：页面滚动到底部了

onPageScroll()：页面发生滚动了

onPullDownRefresh()：页面在顶部执行了下拉刷新

 3.组件级生命周期方法（components）—— 高仿Vue.js

创建阶段：beforeCreate() / created()

挂载阶段：beforeMount() / mounted()

更新阶段：beforeUpdate() / updated()

销毁阶段：beforeDestroy() / destroyed()

三、父子组件间传参 —— Vue.js/uni-app是“单向数据流”的——面试题

  父组件 => 子组件 —— Props Down

//父组件： Parent.vue data:  age: 20 <Child  :num="age"/>

//子组件：Child.vue props: ["num"] <text>父组件传来的数据：{{num}}</text>

 注意：父组件传给子组件的数据，在子组件内只能使用，不能修改——单向数据流

  子组件 => 父组件 —— Events Up

//父组件： Parent.vue <Child  @cry="doCry($event)"/> doCry(data){    clog(data)  //{uname: 'yaya'} }

//子组件：Child.vue data:  uname:'yaya' this.$emit('cry', {uname:uname}) //emit：发射/弹出，用于发射一个自定义事件

四、uni-app项目的最终发布部署

  项目的两种运行模式：

  ①调试模式/开发模式/运行模式(Development Mode) ——  npm  start： 

代码没有经过压缩和优化，所以代码体积比较大 —— 会自动连接开发服务器，即时更新

  ②生产模式/部署模式/发行模式(Production Mode) —— npm  run  build： 

代码经过优化和压缩，所以代码体积比较小 —— 不能再自动连接开发服务器

  演示1：把uni-app发布为“生产模式”的H5网站

点击当前项目，点击工具栏“发行”>“网站-PCWeb或手机H5”；

成功后，编译后的结果保存在 @/unpackage/dist/build/h5 目录下，该目录下的内容复制到任意真实的云服务器上的WEB服务器上即可。

  演示2：把uni-app发布为“生产模式”的微信小程序

点击当前项目，点击工具栏“发行”>“小程序-微信”；

输入小程序名称 和 腾讯提供的小程序AppID，点击发布即可。

由于腾讯的限制，小程序访问的第三方域名（例如：https://web.codeboy.com）必须在“小程序控制台>request合法域名”列表中声明一下，否则小程序是禁止访问第三方域名的。

  演示3：把uni-app发布为“生产模式”的App

编辑项目清单文件manifest.json，修改应用名称 和 图标 和 App权限配置（勾选<uses-permission android:name="android.permission.INTERNET"/>）；如果想安装到夜神模拟器，还需要勾选“App常用其它设置>支持CPU类型>x86”

点击当前项目，点击工具栏“发行”>“原生App-云打包”>修改“使用测试证书”>选择“安心打包”>点击“开始打包”；项目开始自动编译，完成后自动提交到DCloud服务器进行打包；等待一段时间.....

打包成功后，会提示“APK文件创建成功，保存在@/unpackage/dist/build/apk”目录下；

可以重命名.apk文件，发布到应用商店 或者 放到自己的网站上供人下载 或者 直接把安装文件拷贝(用数据线或QQ)到自己的手机中，开始安装&启动App...

五、极重要面试题：Cookie、WebStorage、Session 和 Token

  HTTP协议是“Stateless（无状态的）”，每个请求消息都会获得一个响应消息；响应结束后，服务器不会记录任何客户端的过往访问信息。

  但是，实际项目中，用户登录之后，服务器需要在后续的请求中识别出来当前登录者信息——称为“身份认证(authorization)信息”

具体实现技术有四种：

  ①Cookie：客户端存储——小点心，九十年代就有的技术；本质是服务器生成的“k=v”对，随着响应消息头(set-cookie)一起发送给客户端；客户端存储在document.cookie变量中。下次再发请求时，浏览器会自动把这些Cookie发送给服务器(放在请求消息头cookie中) —— 类似于“老板给顾客身上贴小标签”。

提示：浏览器规定，每个服务器在客户端可以保存的Cookie键值对数据量有限制（例如4KB）

  ②WebStorage：客户端存储——2015年HTML5提供的新技术，分为sessionStorage/localStorage两个对象，本质是服务器返回给客户端的数据，客户端自己保存在浏览器内存或磁盘上。下次请求时，客户端自己从WebStorage中读取数据，作为请求数据发送给服务器 —— 类似于“顾客主动拿走老板写的小标签”。

提示：浏览器规定，每个服务器在客户端可以保存的WebStorage键值对数据量有限制（例如8MB）

  ③Session：服务器端存储——九十年代末，Java/PHP/.NET等服务器端技术厂家提出的技术；本质在服务器端为每个客户端开辟一段存储空间（保存在服务器端内存/文件/数据库中），以Cookie形式返回给客户端一个“会话编号（就是一个很长的字符串）”；客户端再次访问时，会自动出示此“会话编号”，服务器据此识别出该用户并找到之前存储的信息—— 类似于“老板给顾客办会员卡(号）,自己保留所有的客户记录”。

提示：session技术安全/可靠性比客户端存储高；但是会增加服务器端处理负担，尤其是大数据/高并发的项目中；且无法用于集群。

  ④Token：客户端存储——令牌，最新技术；本质是服务器把客户端的信息保存在一个对象中（数据大小无限制），使用加密技术加密为一个长度固定的密文字符串（称为token），以响应消息头或主体形式发送给客户端；客户端需要存储在WebStorage中，下次请求时，以请求参数/消息头/主体形式发送该令牌给服务器；服务器收到该令牌检查其完整性，解密其中的信息，从而获得该客户端的身份信息 —— 类似于“老板用只有自己懂的鸟语把顾客的信息写在纸条上，让顾客带回家”。

使用token实现“登录后获取个人信息”

	客户端	服务器
第一次请求：登录	1、客户端发送简单请求，包含uname和upwd
		2、服务器验证登录信息，成功后，把客户端信息保存在一个对象中，形如：{    用户编号：123,    用户名：yaya，    登录时间：x年x月x日 xx:xx:xx,    登录过期时间：x年x月x日 xx:xx:xx    ….     }
		3.服务器将上述对象加密为定长字符串（即token）；随同响应消息一同返回给客户端： {   code:200, msg: 'login succ',   token: '加密后的定长字符串' }
	4.接收到响应消息，把其中的token保存在客户端 uni.setStorageSync('userToken',  res.token)
第二次请求：获取个人档案	5.从客户端读取之前保存的token let  token=uni.getStorageSync('userToken')
	6.发送请求消息，把token放在请求消息头中（与后端协商好的请求头） uni.request({    url,    header:{ authorization: token } }) 生成的请求消息形如： GET  /user/get_basic.php  HTTP1.1 authorization: ''加密后的字符串''
		7.服务器接收到请求消息，从请求头中读取authorization（即token），解密令牌，得到原始的令牌信息，即：{    用户编号：123,    用户名：yaya    登录时间：x年x月x日 xx:xx:xx,    登录过期时间：x年x月x日 xx:xx:xx    …. }
		8. 服务器根据用户信息查询数据库，将用户信息返回给客户端

功能	异步版本	同步版本
在客户端存储数据	uni.setStorage({key, data, success})	uni.setStorageSync(key, data)
从客户端读取数据	uni.getStorage({key, success(data){})	let data= uni.getStorageSync(key)
删除(一个)客户端存储的数据	uni.removeStorage({key, success})	uni.removeStorageSync(key)
删除(全部)客户端存储的数据	uni.clearStorage()	uni.clearStorageSync()

六、补充：购物车

购物车功能必需的服务器端数据库表，结构类似：

itemid(序号)	uid(用户编号)	pid(商品编号)	count(购买数量)
1	5	10	7
2	5	15	5
3	6	10	1
4	5	25	2
......

购物车查询功能点：客户端提交自己身份信息，服务器返回该用户的购买记录

购物车添加功能点：客户端提交自己身份信息/商品编号/购买数量，服务器端可以执行INSERT或UPDATE语句

购物车删除功能点：客户端提交自己身份信息/购买记录编号，服务器执行DELETE语句

向购物车中添加商品

	客户端	服务器
第一次请求：登录	1、客户端发送简单请求，包含uname和upwd
		2、服务器验证登录信息，成功后，把客户端信息保存在一个对象中，形如：{    用户编号：123,    用户名：yaya，    登录时间：x年x月x日 xx:xx:xx,    登录过期时间：x年x月x日 xx:xx:xx    …. }
		3.服务器将上述对象加密为定长字符串（即token）；随同响应消息一同返回给客户端： {   code:200, msg: 'login succ',   token: '加密后的定长字符串' }
	4.接收到响应消息，把其中的token保存在客户端 uni.setStorageSync('userToken',  res.token)
第二次请求：购物车添加/删除/查询	5.从客户端读取之前保存的token let  token=uni.getStorageSync('userToken')
	6.发送请求消息，把token放在请求消息头中（与后端协商好的请求头） uni.request({    url,    header:{ authorization: token } }) 生成的请求消息形如： GET  /user/get_basic.php  HTTP1.1 authorization: ''加密后的字符串''
		7.服务器接收到请求消息，从请求头中读取authorization（即token），解密令牌，得到原始的令牌信息，即：{    用户编号：123,    用户名：yaya    登录时间：x年x月x日 xx:xx:xx,    登录过期时间：x年x月x日 xx:xx:xx    …. }
		8. 服务器根据用户编号，进行购物车的相关操作