uni-app学习之路

在我在用vue.js的时候 要调用手机摄像头的时候 无意间发现了uin-app这个混合型框架,但是当时没有注意这个框架,现在项目要用这个框架,所以现在开始学习。

一、框架简介基础知识点

uniapp生命周期

  1. onLaunch 当uniapp初始化完成时进行触发,全局只触发一次
  2. onShow 当uniapp启动或者从后台进入前台显示
  3. onHide 当uniapp从前台进入后台
  4. onUniNViewMessage 对nvue页面发送数据进行监听

uniapp页面生命周期

文档路径

二、路由

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

1.打开新页面,页面重定向===》 调用 API uni.navigateTo 、使用组件

2.页面返回 调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
3.Tab 切换 调用 API uni.switchTab 、使用组件 、用户切换 Tab
4.重加载 调用 API uni.reLaunch 、使用组件

Tips:

  1. navigateTo, redirectTo 只能打开非 tabBar 页面。
  2. switchTab 只能打开 tabBar 页面。
  3. reLaunch 可以打开任意页面。
  4. 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  5. 不能在 App.vue 里面进行页面跳转。

三、页面样式与布局

  1. uni-app支持的通用css单位包括px、upx、vh。
  2. upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

四、upx2px

  1. 因为upx是编译器处理的,动态绑定upx不生效
  2. 可使用 uni.upx2px(Number) 转换为 px 后再赋值。
    例如
 return uni.upx2px(750 / 2) + 'px';

五、样式导入

  1. 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
@import "../../common/uni.css";

内联样式

1.style:静态的样式统一写到 class 中。

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

选择器
1 .class

2 #id

3 element 选择所有 view 组件
全局样式与局部样式
定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。

注意: App.vue 中通过 @import 语句可以导入外联样式,一样作用于每一个页面。

uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目相同,需要注意以下几点:

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

六、字体图标

uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

  1. 支持 base64 格式字体图标。
  2. 支持网络路径字体图标。
  3. 网络路径必须加协议头 https。
  4. 从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。

uni-app 本地路径图标字体支持情况:

  1. 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;

  2. 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;

字体文件的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。

 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

七、template和 block

  1. uni-app 支持在 template 模板中嵌套 template 和 block,用来进行 列表渲染 和 条件渲染。
  2. template和 block 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

uni-app 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。
NPM支持
uni-app支持使用npm安装第三方包。
TypeScript 支持
在 uni-app 中使用 ts 开发

八、平台差异说明
在这里插入图片描述

九、常见问题

uni-app 导航栏开发指南

uni-app 实现全局变量

微信小程序转换uni-app指南

uni-app 引用 npm 第三方库

uni-app 中使用微信小程序第三方 SDK 及资源汇总

uni-app 中使用 5+ 的原生界面控件(包括map、video、livepusher、barcode、nview)

uni-app 的 H5 版使用注意事项

uni-app各环节(HBuilderX、cli、自定义基座、本地sdk、云打包引擎)版本兼容性说明

uni-app 中选择和上传非图像、视频文件

uni-app 资源热更新

uni-app App整包升级检测

uni-app 中可使用的 UI 框架

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想要一百块

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值