一.创建uniapp项目
1.cli脚手架==>vue-cli==> vue create -p dcloudio/uni-preset-vue my-project
2.hbuildx IDE 创建项目
****命令行创建项目和IDE创建项目的区别：1.编译器安装位置不同，并且通过命令行创建的项目的编译器不会跟随IDE升级，如果需要升级则需手动升级。
IDE创建的项目的编辑器安装在hbuildX的安装目录下的plugin目录，会跟随IDE自动升级。
2.cli创建的项目不会自动安装less，scss等编译器，需手动安装。
二.运行、发布uni-app
1.npm run dev:%PLATFORM%
2.npm run build:%PLATFORM%
3.%PLATFORM%取值：app-plus、h5、mp-alipay、mp-baidu、mp-weixin、mp-toutiao、mp-360、mp-qq等
三.H5,APP,小程序各端的管理规则
1.H5端的浏览器有跨域限制
2.微信小程序强制要求https链接，并且所有域名都需要配置到微信白名单中
3.APP端，IOS对隐私控制和虚拟支付控制非常严格
等等
四.开发规范
1.页面文件遵循VUE单文件组件（SFC）规范，<template>、<script> 和 <style>，地址：https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B
2.组件标签靠近小程序规范，地址：https://uniapp.dcloud.io/component/README
3.接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni，地址：https
4.数据绑定及时间处理同vue.js规范，同时补充了APP及页面的生命周期
5.为了兼容多端运行，建议使用flex布局进行开发
五.目录结构和资源文件
1.编译到任意平台，static目录下的文件均会被打包进去，非static目录下的文件（vue,js,css等）被引用到才会被打包进去。
2.static目录下的js文件不会被编译，如果里面有es6的代码，不经过转换直接运行，在手机设备上会报错
3.@开头的绝对路径和相对路径会经过base64转换规则校验
4.H5平台，小于4kb的资源会被转换成base64，其余不转
5.支付宝小程序组件内image标签不可使用相对路径
六.生命周期
1.路由，页面路由由框架统一管理，需在pages.json里配置每个页面的路径及页面样式
2.路由跳转，两种跳转方式，通过navigator组件跳转，或通过API进行跳转
3.页面栈
3.1 初始化，新页面入栈
3.2 打开新页面，新页面入栈
3.3 页面重定向，当前页面出栈，新页面入栈
3.4 页面返回，页面不断出栈，直到目标返回页
3.5 Tab切换，页面全部出栈，只留下新Tab页面
3.6 重加载，页面全部出栈，只留下新的页面
七.运行环境判断
1.开发环境和生产环境，process.env.NODE_ENV == ‘development‘ or ‘production‘
2.平台判断，分为编译期判断和运行期判断
2.1编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码 #ifdef %PLATFORM% #endif
2.2运行期判断，指在已经编译好的包中，仍然需要在运行期判断平台， uni.getSystemInfoSync().platform
八.页面样式与布局
1.支持通用的css单位包括px rpx
2.vue页面支持普通H5单位，但在nvue里不支持，rem 根字体大小可以通过 page-meta 配置，vh viewpoint height，视窗高度，1vh等于视窗高度的1%，vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%
3.nvue还不支持百分比单位
4.App端，在pages.json里的titleNView或页面里的plus api中涉及的单位，仅支持px。注意不支持rpx。
5.设计稿比例换算， 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换而言之 750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明
若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。
6.样式导入，@import ../demo.css
7.内联样式，style静态样式统一写到class中。style接收动态样式，在运行时会进行解析，请尽量避免将静态样式写进style中以免影响渲染速度。
8.选择器，.class, #id, element(组件名称), element element(组件名称，组件名称), ::after 在组件后插入内容, ::before 在组件前插入内容
9.全局样式与局部样式，css变量 --status-bar-height 系统状态栏高度，--window-top 内容区域距离顶部的距离，--window-bottom内容区域距离底部的距离
10.固定值，导航栏高度 44px 底部选项卡高度 50px
11.图标，支持使用字体图标，使用方式与普通 web 项目相同
原文：https://www.cnblogs.com/wmzll/p/14426137.html