需要接手一个uni-app项目，目前只会vue和小程序，只能熬夜苦学一晚！

一，uni-app的产品特性

1，支持条件编译-可以实现多端开发的基础

唯一的缺点是需要写很多套代码，然后通过条件判断是在哪一端，就使用哪一端的对应代码！

二，快速入门

1，新建项目

2，项目结构

三，开发者最常用的是page文件夹下的页面开发

1，页面的结构

单个页面遵循vue的单页面开发规范，也就是和vue差不多一样的。

2，dom结构html标签

而其中的html标签，和小程序的差不多，把它理解成uni-app的自定义基础组件即可：
https://uniapp.dcloud.io/component/README
虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发。基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。

3，API接口

和微信小程序的API接口一致
https://uniapp.dcloud.io/api/README

uni.on 开头的 API 是监听某个事件发生的 API 接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
如未特殊约定，其他 API 接口都接受一个 OBJECT 作为参数。
OBJECT 中可以指定 success，fail，complete 来接收接口调用结果。

Promise 封装
uni-app 对部分 API 进行了 Promise 封装，返回数据的第一个参数是错误对象，第二个参数是返回数据。
详细策略如下：

异步的方法，如果不传入 success、fail、complete 等 callback 参数，将以 Promise 返回数据。例如：uni.getImageInfo()
异步的方法且有返回对象，如果希望获取返回对象，必须至少传入一项 success、fail、complete 等 callback 参数。例如：uni.connectSocket()
同步的方法（即以 sync 结束），不封装 Promise。例如：uni.getSystemInfoSync()
以 create 开头的方法，不封装 Promise。例如：uni.createMapContext()
以 manager 结束的方法，不封装 Promise。例如：uni.getBackgroundAudioManager()

示例代码:

// 默认方式
uni.request({url: 'https://www.example.com/request',success: (res) => {console.log(res.data);}
});
// Promise
uni.request({url: 'https://www.example.com/request'}).then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据var [error, res]  = data;console.log(res.data);})
// Await
function async request () {var [error, res] = await uni.request({url: 'https://www.example.com/request'});console.log(res.data);
}

4,CSS样式

推荐使用flex布局，这个我很擅长，就无需多说
css样式导入引入静态资源时，可以使用相对路径或绝对路径

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

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

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

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

<view class="normal_view" />

5，尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

px 即屏幕像素
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

四，条件编译的小例子

其中运行到小程序的方法是：
https://blog.csdn.net/weixin_42970423/article/details/100984418

1，手机的真机调试

1，先手机的数据线连接
2，
3，
4，打开手机上的Hbulider就可以看到了

五，打包配置

六，小型开发案例学习

1，创建项目

但是项目若想要基于uni-app.css为基础进行开发，则需要有uni-app.css文件：

这个common文件夹下就是基础的样式。
于是：

2，我们希望在全局都使用uni.css

3，清空index.vue页面，获取数据

4，渲染新闻列表页

使用uni的list组件

然而我感觉这个list不是很好用哈哈，有时间自己封装一个。这里先这样吧。

5，需要点击切换到详情页：navigator

第一种方式：

第二种编程式导航

6，让跳转页面时携带参数（指明是哪个东西对应的页面）

因为新的页面需要这个参数来获取对应的数据，完成页面的渲染。

一夜上手uni-app相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

一夜上手uni-app