一.创建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 项目相同