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

uni-app特点

• 开发成本低
• 省时间
• 跨平台

uini-app使用vue的语法+小程序的标签和API

开发规范 

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发
• 95%等同于vue的语法

css

推荐使用的单位是rpx 750rpx=1个屏幕的宽度

uni-app有一特点就是可以在一个页面写app,小程序，h5网页端的代码展示不同的样式和内容

这也就是我们在生活中看到小程序和app、h5网页端的是有所不同的内容和样式(利用下面可以做到)

模板条件

<!-- #ifdef APP-PLUS -->
        <view>app显示的内容</view>
    <!-- #endif -->
    <!-- #ifdef MP -->
        <view>小程序显示的内容</view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view>h5网页端显示的内容</view>
    <!-- #endif -->

css 

/* #ifdef APP-PLUS */
        .lovely{
            color: red;  //app
        }
        /* #endif */
        /* #ifdef MP */
        .lovely{
            color: white; //小程序
        }
        /* #endif */
        /* #ifdef H5 */
        .lovely{
            color: black; //h5
        }
        /* #endif */

在Hbuilder开发版本（下载开发版本HBuilderX-高效极客技巧）

创建uni-app

文件---新建---项目--输入uni-app的项目名---模板（有不同模板可供选择）