当前位置:Gxl网 > 前端框架 > 总结分享uni-app的简单介绍

总结分享uni-app的简单介绍

时间:2022-05-19 帮助过:152人阅读 来源: 互联网

本篇文章中给大家简单的介绍了uni-app的相关知识,其中包括目录结构、生命周期、路由以及样式布局的相关问题,希望对大家有帮助。

一、什么是uni-app?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

uni-app的优点

跨平台发行,运行体验更好
与小程序的组件、API一致;
兼容weex原生渲染,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化;
通用前端技术栈,学习成本更低
支持vue语法,微信小程序API
内嵌mpvue
开发生态,组件更丰富
支持通过npm安装第三方包
支持微信小程序自定义组件及JS SDK
兼容mpvue组件及项目(内嵌mpvue开源框架)
App端支持和原生混合编码
插件丰富,DCloud将发布插件到市场

二、功能框架

在这里插入图片描述

三、创建项目

在点击工具栏里的文件 -> 新建 -> 项目:
在这里插入图片描述
选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

uni-app自带的模板有 Hello uni-app ,是官方的组件和API示例。还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。
在这里插入图片描述

运行uni-app

  1. 浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。
    在这里插入图片描述
  2. 真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。
    在这里插入图片描述
  3. 在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
    在这里插入图片描述
    **注意:**如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在微信开发者工具里面就可看到实时的效果。

uni-app默认把项目编译到根目录的unpackage目录。
在这里插入图片描述
其他支付宝小程序、百度小程序、字节跳动小程序、360等运行方式都是差不多的,感兴趣的话可以去官网查看

四、目录结构

一个uni-app工程,默认包含如下目录及文件:

┌─uniCloud              云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录,详见
├─platforms             存放各平台专用页面的目录,详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录,详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
└─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 Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。

路由跳转
uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

页面栈
框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>
页面重定向当前页面出栈,新页面入栈调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
页面返回页面不断出栈,直到目标返回页调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab
重加载页面全部出栈,只留下新的页面调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/>

七、判断平台

平台判断有2种场景,一种是在编译期判断,一种是在运行期判断。
编译期判断 编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码。详见:
条件编译

// #ifdef H5
    alert("只有h5平台才有alert方法")// #endif

如上代码只会编译到H5的发行包里,其他平台的包不会包含如上代码。
运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用uni.getSystemInfoSync().platform判断客户端环境是 Android、iOS 还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用uni.getSystemInfoSync().platform返回值均为 devtools)。

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;}

如有必要,也可以在条件编译里自己定义一个变量,赋不同值。在后续运行代码中动态判断环境。

其他环境变量
其他环境变量的定义方式参考 环境变量。

八、uni-app 开发的注意事项

html标签
uni-app的tag同小程序的tag,和HTML的tag不一样,比如p要改成view,span要改成text、a要改成navigator。
CSS
推荐使用flex布局模型
单位方面,uni-app 支持的通用 css 单位包括 px、rpx
(早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)
JS
只有H5端可使用浏览器内置对象,比如document、window、localstorage、cookie等,以及jquery等依赖。

九、页面样式与布局

(1)尺寸单位
uni-app支持以下css单位:
在这里插入图片描述

注意问题: 动态绑定的 style 不支持使用 upx,因为upx是编译器处理的,在手机端动态修改样式赋值时,无法直接使用 upx。
解决方案: 使用 uni.upx2px(Number) 转换为 px 后再赋值。

this.cWidth = uni.upx2px(750);

(2)样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:

<style>
    @import "../../common/uni.css";
   .uni-card {
        box-shadow: none;
    }</style>

(3)内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

<view :style="{color:color}" />

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

<view class="normal_view" />

(4)选择器
目前支持的选择器有:

选择器样例样例描述
.class.intro选择所有拥有 class=“intro” 的组件
#id#firstname选择拥有 id=“firstname” 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容,仅 vue 页面生效
::beforeview::before在 view 组件前边插入内容,仅 vue 页面生效

注意:

  1. uni-app 中不能使用 * 在这里插入代码片选择器。
  2. 微信小程序自定义组件中仅支持 class 选择器
  3. page 相当于 body 节点,例如:
<!-- 设置页面背景颜色,使用 scoped 会导致失效 -->
page {
  background-color:#ccc;}

(5)背景图片 和 字体图标

  1. 支持 base64 格式图片。
  2. 支持网络路径图片。
  3. 使用本地图片或字体图标需注意:
    图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

十、常见问题

常见问题大家可以去官网查看

这篇简单的介绍了一下uni-app,让大家先认识一下,希望大家能够喜欢。

推荐:《uniapp教程》

以上就是总结分享uni-app的简单介绍的详细内容,更多请关注gxlsystem.com其它相关文章!