uni-app使用,uni-app菜鸟教程
本文给大家简单介绍一下uni-app的相关知识，包括目录结构、生命周期、路由和样式布局。希望对你有帮助。
UNI-APP开发(仿饿)开发课程：进入学习
一、什么是uni-app？
uni-app是一个使用Vue.js开发人员编写一套代码开发所有前端应用的框架，可以发布到iOS、Android、Web(响应式)、各种小程序(微信/支付宝/百度/头条/舒菲/QQ/Aauto quickless/钉钉/淘宝)、快应用等平台。
uni-app的优点
跨平台分发，更好的运行体验
与小程序的组件和API一致；
兼容weex原生渲染，提高开发效率。但由于weex坑较多，建议使用局部渲染优化。
通用技术堆栈，学习成本更低
支持vue语法，微信小程序API
嵌入式mpvue
生态发展，成分更丰富
支持通过npm安装第三方软件包
支持微信小程序自定义组件和JS SDK
兼容mpvue组件和项目(嵌入式mpvue开源框架)
终端支持和原生混合编码
插件丰富，DCloud会向市场发布插件。
二、功能框架
三、创建项目
单击工具栏中的文件-新建-项目：
选择uni-app的类型，输入项目名称，选择模板，点击【创建】，创建成功。
Uni-app附带了模板Hello uni-app，这是官方的组件和API示例。另一个重要的模板是uni ui项目模板，推荐日常开发使用，内置了大量的常用组件。
运行uni-app
运行浏览器：进入hello-uniapp项目，点击工具栏中的运行-运行到浏览器-选择浏览器，就可以在浏览器中体验H5版的uni-app了。真机运行：连接手机，打开USB调试，进入hello-uniapp项目，点击运行-真机运行-在工具栏选择运行设备，就可以在这个设备中体验uni-app了。在微信开发者工具中运行：进入hello-uniapp项目，点击工具栏中的运行-运行到小程序模拟器-微信开发者工具，在微信开发者工具中体验uni-app。
* *注意：* *如果是第一次使用，需要配置小程序ide的相关路径，才能成功运行。如下图，需要在输入框中输入微信开发者工具的安装路径。如果HBuilderX无法正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成的小程序的路径复制到微信开发者工具中，在HBuilderX中开发，就可以在微信开发者工具中看到实时效果。默认情况下，Uni-app会将项目编译到根目录的解包目录中。
其他支付宝小程序，百度小程序，字节跳动小程序，360等。都以同样的方式运作。有兴趣的可以去官网看看。
四、目录结构
uni-app项目，默认情况下包括以下目录和文件：
— uniCloud云托管目录，阿里云是uniCloud-阿里云，腾讯云是uniCloud-tcb(详见uni cloud)
符合vue组件规范的组件的uni-app组件目录
comp-a.vue可重用组件
hybrid应用程序端存储本地html文件的目录，请参见
-Platforms存储了各平台的专用页面目录，详见。
存储pages业务页面文件的目录
index
index.vue索引页
list
list.vue列表页面
static存储本地静态资源(如图片、视频等)的目录。)被应用程序引用。注意：静态资源只能存储在这里。
uni_modules存储[Uni _ Modules] (/Uni _ Modules)规范的插件。
components存储小程序组件的目录，请参见
main.js Vue初始化入口文件
App.vue应用配置，用于配置应用的全局风格，监控应用的生命周期。
manifest.json配置打包信息，如应用程序名称、appid、徽标、版本等。了解详情。
pages.json配置页面路由、导航栏、选项卡和其他页面信息。详见
五、生命周期
应用生命周期。
Uni-app支持onLaunch、onShow、onHide等应用生命周期功能。
页面生命周期
Uni-app支持onLoad、onShow、onReady等生命周期功能。
组件生命周期
Uni-app组件支持与vue标准组件相同的生命周期。这里没有页面级的onLoad生命周期。
六、路由
uni-app页面路由由框架管理，开发者需要在pages.json中配置每个路由页面的路径和页面样式类似于app.json中配置页面路由的小程序，因此uni-app的路由用法与Vue路由器不同。如果还是想用Vue路由器管理路由，可以在外挂市场搜索Vue-Router。
路由跳转
Uni-app有两种页面路由跳转方式：使用navigator组件跳转和调用API跳转。
页面栈
框架以堆栈的形式管理所有当前页面。当路由切换发生时，页面堆栈的性能如下：
路由模式页面堆栈代表初始化新页面堆栈的触发机会。uni-app打开的第一页会打开新的一页。调用API uni.navigateTo，使用组件导航器open-type=navigate/page重定向当前页面堆栈。当一个新的页面被推入堆栈时，调用API uni.redirectTo，使用组件导航器Open返回的页面-type= redirectto/page保持推出。直到目标返回页面调用API uni.navigateBack，使用组件Navigator Open-type= navigate back /用户按左上角的返回按钮，Android用户点击物理返回按钮标签，将所有页面切换出堆栈。只留下新的Tab页面调用API uni.switchTab，使用组件导航器Open-type= switch Tab /用户切换Tab，将所有页面重新加载出堆栈，只留下新的页面调用API uni.reLaunch，组件导航器Open-type= relault /
七、判断平台
平台用于判断两种场景，一种是编译时判断，一种是编译时判断。
编译时判断。编译时判断，即条件编译，是指不同平台编译包后代码不同。参见：
条件编译
//#伊夫H5
Alert(只有h5平台有alert方法)//#endif以上代码只会编译到H5的分发包中，其他平台的包不会包含以上代码。
运行时判断运行时判断是指代码已经打包到包里了，平台还需要在运行时进行判断。这时候可以用uni。getsysteminfosync()。平台判断客户端环境是Android、iOS还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具和支付宝小程序开发工具中，uni的返回值。getsysteminfosync()。平台是devtools)。
switch(uni.getSystemInfoSync()。平台){
案例“android”:
Console.log(“在Android上运行”)
打破；
案例“ios”:
Console.log(在iOS上运行)
打破；
默认值：
Console.log(“在开发人员工具上运行”)
打破；}如果需要，也可以在条件编译中自己定义一个变量，并赋不同的值。在后续运行的代码中动态判断环境。
其他环境变量
其他环境变量参照环境变量定义。
八、uni-app 开发的注意事项
html标签
Uni-app的标签与applet的标签相同，但与HTML的标签不同。例如，p应该改为view，span改为text，a改为navigator。
半铸钢钢性铸铁(Cast Semi-Steel)
建议采用灵活布局模式。
单位方面，uni-app支持的常见css单位有px和rpx。
(upx早期由uni-app提供，目前已建议统一改为rpx)
射流研究…
只有H5可以使用浏览器内置对象，如文档、窗口、本地存储、cookie等。和依赖项，如jquery。
九、页面样式与布局
（1）尺寸单位
Uni-app支持以下css单元：
注意问题：动态绑定的样式不支持使用upx，因为upx是由编译器处理的，在手机上动态修改样式赋值时不能直接使用。解决方案：赋值前使用uni.upx2px(Number)转换为px。
this . cwidth=uni . upx 2 px(750)；（2）样式导入
使用@import语句导入外部样式表。@import后跟要导入的外部样式表的相对路径。使用；指示语句的结束。
示例代码：
风格
@导入././common/uni . CSS ；单一卡{
箱形阴影：无；
}/style（3）内联样式
在框架上，支持样式和类属性来控制组件的样式。样式：静态样式是在类中编写的。样式接收动态样式，这些样式将在运行时被解析。请尽量避免将静态样式写入样式，以免影响渲染速度。
view:style= { color:color } /class:用于指定样式规则，其属性值是样式规则中类选择器名称(样式类名)的集合。样式类名不需要附带。和样式类名由空格分隔。
view class= normal _ view /（4）选择器
当前支持的选择器有：
选择器样本描述。class=" intro Select all components with class=" intro " # id # first name Select component with id=" first name " elementview Select all view components element，element view，Checkbox选择所有文档的视图组件和所有复选框组件：afterview:在视图组件后面插入内容后，仅vue页面生效：beforeview:在视图组件前面插入内容前，仅vue页面生效注意：
*不能在uni-app中用于在此处插入代码片选择器。微信小程序的自定义组件中只支持类选择器页面，相当于body节点，比如：-设置页面的背景颜色，使用scoped会导致失败-
页面{
背景色：# ccc}（5）背景图片 和 字体图标
支持Base64格式的图片。支持网络路径图片。使用本地图片或字体图标时请注意：
如果图片小于40kb，uni-app会自动转换为base64格式；
如果图像是40kb或更大，开发人员需要将其转换为base64格式，或者将其移动到服务器并从网络地址引用。
本地引用路径只支持以~ @开头的绝对路径(不支持相对路径)。/*背景图片*/。bgImg {
background-image:URL( ~ @/static/logo . png )；
}/*字体图标*/
@ iconImg {
字体系列：test1-icon；
src:URL( ~ @/static/icon font . TTF )；
}
十、常见问题
常见问题可以去官网查一下。
本文简单介绍一下uni-app，让大家先了解一下。希望你能喜欢。
推荐：《uniapp教程》以上是总结分享uni-app简介的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。