uni-app uni-app - 锐客网

对比其他框架

ReactNative: 原生 - 类小程序架构, 和 weex 本质差不多。
Flutter: 前期学习成本高
uni-app: 性能不好，本质就是小程序引擎上运行小程序，傻瓜式开发。
Taro: 生态暂时不如uni-app完善

HelloWorld 创建uni-app 工具栏 -> 文件 -> 新建 -> 项目：
配置Android真机运行连接手机，开启USB调试，工具栏 -> 运行 -> 运行到手机或模拟器

手机开启USB调试
以OPPO FindX举例:设置=>关于手机=>版本信息=>版本号(连续点击多次)=>回到设置=>其他设置=>打开开发者选项=>打开USB调试

配置IOS真机运行

手机通过数据线连接到电脑
安装12.9.4.102之前的iTunes版本
启动HBuilderX并选择真机运行（项目路径、静态资源等均不可出现中文名）
设置=>通用=>描述文件与设备管理=>信任HBuilder

配置微信小程序运行

打开微信开发工具--->设置--->安全--->开启服务端口（否则Hbuilder会报错）
进入XHbuilder，点击工具--->设置，设置微信开发者工具安装目录(注意太老的微信开发者工具最好卸载了重新安装一下)
运行--->运行到小程序模拟器

编译后代码会被保存在项目的unpackage\dist\dev\mp-weixin目录下，可直接用微信开发者工具运行该目录
appid DCloud appid是 DCloud 应用的唯一标识，和小程序的appid以及Apple的appid（iOS包名）是不同体系。

即manifest 文件中的 appid 字段
可以通过开发者中心查看自己拥有的应用（appid）
appid的变更会影响 uni push、云打包权限、wgt 升级、本地存储（plus.storage、uni.setStorage、plus.io数据等）、开发者中心的各项服务（数据统计等）、插件购买

发布与更新uni-app 更新app说明
原生APP 工具栏 => 发行 => 原生app-云端打包

Android证书
证书是一个开发者的身份标志，对Android系统而言。使用一个证书签发的App，是属于同一个开发者的App。
相同的包名+证书时，应用安装会覆盖旧应用
包名相同但证书不同时，应用安装会提示出错（因此同一应用不要改变证书）
- 使用自有证书（开发者自己生成证书）
  注意证书申请时DCloud要求证书文件密码（storepass）和证书密码（keypass）一致，且名称和别名仅使用英文、数字
- 使用公共测试证书
  使用DCloud云端默认的测试证书，对所有开发者公开，仅限开发测试时使用。

打包后的安装包会出现在unpackage\release\apk目录下

IOS证书（.p12）和描述文件(.mobileprovision)
- 开发(Development)证书和描述文件
  用于开发测试，在 HBuilderX 中打包后可在真机环境通过Safari调试
- 发布(Distribution)证书和描述文件
  用于提交 AppStore，在 HBuilderX 中提交云打包后提交到 AppStore 审核发布

打包后的安装包
可在apploader网站申请ios P12证书一年600多
wgt 即热更新包，因只变动前端代码，不用重新上架核审，需注意wgt编译时的HBuilder版本需和发布到的apk编译时的HBuilder版本一致
h5 编译后代码会被保存在项目的unpackage\dist\build\h5目录下

页面标题/网站标题 title
运行的基础路径服务器下代码部署目录位置，用于代码间互相引用，如/h5/。
./表示使用相对路径

小程序编译后代码会被保存在项目的unpackage/dist/build/mp-weixin目录下，可直接用微信开发者工具运行该目录并进行后续的发布操作
判断平台

条件编译

// #ifdef H5 alert("只有h5平台才有alert方法") // #endif // #ifdef APP-PLUS// #endif

运行期判断 uni.getSystemInfoSync().platform

switch(uni.getSystemInfoSync().platform){ case 'android': console.log('运行Android上') break; case 'ios': console.log('运行iOS上') break; default: console.log('运行在开发者工具上') break; }

样式为保证通用，应使用flex布局
rpx和px是通用的，其他vw、vh、百分比等在nvue中不支持
rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx
没有*选择器，page代替了body（即uni-page-body元素，不含原生头部和tabbar）

使用@import语句可以导入外联样式表

@import "../../common/uni.css"; .uni-card { box-shadow: none; }

CSS变量

变量名	App	小程序	H5
var(--status-bar-height)	系统状态栏高度	25px	0
var(--window-top)	0	0	div模拟的NavigationBar高度(44px)
var(--window-bottom)	0	0	div模拟的TabBar高度(50px)