前期了解

今天跟大家探讨的是uniapp,讲的内容就是uniapp的使用，然后对于后端来讲大概了解下现在web前端能够做哪些事情，然后就是uniapp能够做哪些事情

首先这个uniapp是针对前端开发的一个框架

学习uniapp的前提条件

• 开发时需要掌握现在的前端框架vue.js，然后必须在HBuilder X编辑器下开发运行项目

为什么要学uniapp

对于前端来说

• uniapp是用的技术栈
  uni-app 是一个使用 Vue.js 开发所有前端应用的框架，
• 可靠性
  属于DCloud公司，它拥有900万开发者、数百万应用、12亿手机端月活用户
• 效率
  • 周边生态比较丰富（也就是插件比较丰富），它提供更多成熟的组件，如果设计元素比较少，就是ui比较模糊的情况下，很多细节不需要定，但要有的东西，（比如说加载状态样式，下拉刷新，配置底部导航和顶部nav等），使用它也是不错的选择
  • 如果是开发app，开发周期远超原生开发，一个人可以完成安卓，ios的开发，当然也有缺点（缺点的下面会说到）
  • 对于前端来说学习成本低，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
    
  • 而且现在其实也支持pc端的开发，那么可以理解为一个凑合入门的前端，只要会用uniapp.移动，pc,原生都可以开发。为什么这么说，就是它提供了很多的规则，在他的规则下使用出现bug的可能性小的多，（就比如说一个刚入门的前端开发pc响应式，那么肯定是会用到媒体查询，很容易出现在某些小屏下不适配的情况，用了uniapp的话，就有的地方类似傻瓜式操作，不如有个配置项就得填，不填就报错这种，当然说这么多，就是说它还是挺好用的）
  • 支持less,scss，typescript
  • 现在支持别的项目转为uniapp项目，https://uniapp.dcloud.io/translate
• 前沿技术更新
  已经支持vue3开发

上面说到可以开发多端，那么多端开发肯定有比较细的东西，就是这块代码一个端要一个端不要或者不同的，那么怎么处理

// #ifdef APP-PLUS
//app端才编译
// #endif

#ifndef H5
//编译除了h5端以外的
#endif

如何下载、运行、打包

https://uniapp.dcloud.io/quickstart-hx

页面文件后缀分类

• vue
• nvue
  • 是一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。(阿里的，不维护了)
    • http://weex.emas-poc.com/zh/guide/introduction.html weex官网
  • 开发app端性能更好，就是weex的规范。当然也有不好的地方，就是支持的样式等比较少

单位使用

uniapp自己提供了自己的单位，可以适配手机端，而前端的html页面实现手机端适配用到的是写死html跟元素的字体大小或通过js控制，然后最后使用rem来完成适配

• rpx upx

编辑器使用

• 有提供git快速上传
• 可以下载二次元鼓励师和还有各种音效（比如设定写函数时触发螺旋丸声音等），用户体验挺好
• 提供内置浏览器
• 打包运行等

开发生态

https://uniapp.dcloud.io/ecosystem

开始使用

配置文件学习

• pages.json用于配合各种效果，类似微信小程序
  • 比如是否出现底部顶部导航栏、下拉刷新效果颜色选择、窗口进入离开效果、软键盘弹出模式
    （如果用html页面写肯定是要自己写底部导航栏和顶部导航栏的。而这个直接就配置好了，）

生命周期

https://uniapp.dcloud.io/collocation/frame/lifecycle

组件使用

这里的组件意思就是类似于html标签那样，称之为组件原因就是它提供了跟多的功能（如果img标签，你可以配置img出现方式，淡入还是直接显示这些）

• 其实类似小程序组件使用（比如view，image,text,video、picker、map地图等。凡是html中经常使用的都有封装）
• 主要里面也提供了好多扩展组件https://uniapp.dcloud.io/component/uniui/uni-ui

API使用

https://uniapp.dcloud.io/api/request/websocket

• 基本api (数据请求，页面跳转方式、本地存储、等凡是我们在vue中使用到的，这里有会有自己的封装写法，区别：只是写法不同)

比如
window.localStorage.setItem("name","张三")
uni.setStorageSync('storage_key', 'hello'); //里面所有api都是uni点头的

• 还提供了设备方面的api，https://uniapp.dcloud.io/api/system/info ，就是挺方便的

以上就是uniapp的相关组件和api，然后聊下使用uniapp开发app,因为这一段可以使用的东西是最多的

uniapp开发app

• 无需考虑是安卓还是ios,一套代码实现
• 使用html5规范内容配合开发，比如下载文件且更改文件名等，
  • https://www.html5plus.org/doc/h5p.html （里面内容仅可以在app端使用，用于web-app操作手机设备相关东西）弥补了webapp操作设备的缺陷
• nvue页面使用，性能更好，因为uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。这个nvue页面不是app建议不要使用，因为很多css不支持
• 打包

为什么uniapp能开发app

因为跟原生的是有区别的，开发出来的是叫webapp，就是使用了手机上的webview嵌套了页面

总结

什么时候适合使用uniapp开发

• 开发多端的时候可以考虑，
• 如果开发的app没有很消耗性能的，使用uniapp效果挺好（因为再怎么样肯定是原生开发性能好，如果app功能少，就可以抵消这种性能差距）

注意点

• 在开发特别关键细的项目，需要考虑一个问题（官方bug）,当然现在还是很成熟 的，这种情况很少见
• 看好相关api的兼容性问题（比如有的这兼容h5,有的只兼容app端）https://uniapp.dcloud.io/component/live-pusher