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云打包
使用云打包时HBuilder版本（编译环境）需和HBuilder云服务器版本（运行环境）一致，否则会出现警告
安卓
工具栏 => 发行 => 原生app-云端打包
- Android包名
包名是一个APP的唯一标志，手机重复安装相同包名的APP时会检查两者证书，若不同则报错。若相同则检查Version Code何者更新，若为新版本则安装，否则提示已经安装了更高版本。 - Android Version Name
即通常说的版本号, 仅用于展示 - Version Code
是一个正整数，用于标识版本新旧。 - Android证书
证书是一个开发者的身份标志，一个证书可以对应多个包。-
开发者自己生成证书
注意证书申请时DCloud要求证书文件密码（storepass）和证书密码（keypass）一致，且名称和别名仅使用英文、数字 - 使用公共测试证书
DCloud云端默认的测试证书，对所有开发者公开，仅限开发测试时使用。
-
开发者自己生成证书
IOS
- IOS Bundle Id（AppID）
等同于安卓的包名 - IOS Build
等同于安卓的Version Code，是一个字符串 - IOS Version
等同于安卓的Version Name - IOS证书（.p12）和描述文件(.mobileprovision)
- 开发(Development)证书和描述文件
用于开发测试，用Xcode在描述文件中添加udid的设备才能安装
在 HBuilderX 中打包后可用mac通过Safari调试真机 - 发布(Distribution)证书和描述文件
用于提交到 AppStore 审核发布 - 可在apploader网站申请ios P12证书 一年600多
- 开发(Development)证书和描述文件
综合安卓和苹果，云打包时version采用X.X.X，Version Code采用正整数，且每次升级两个都要变大（又因为苹果提交审核驳回后build必须变大，建议先提交苹果审核，通过后再提交安卓，以保证两者build一致）
wgt
即热更新包，因只变动前端代码，不用重新上架核审
wgt为本地打包，打包时HBuilder版本（编译环境）需和apk编译时的HBuilder云服务器版本（运行环境）一致，否则会出现警告
- 安装 wgt 资源包成功后，必须执行
plus.runtime.restart()，否则新的内容并不会生效 - 注意使用wgt热更新时，App版本和wgt应用资源版本将不再保持一致。此时通过
plus.runtime.version/uni.getSystemInfo()获取到的是apk、ipa版本，通过plus.runtime.getProperty才可获取wgt的版本。
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语句可以导入外联样式表
<style>
@import "../../common/uni.css";
.uni-card {
box-shadow: none;
}
</style>
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) |
- 目前 nvue 在App端，还不支持
--status-bar-height变量，替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度
本地背景图片/字体图标
- 推荐使用以
~@开头的绝对路径。 - 小程序不支持在css中使用本地字体文件、背景图片,需以base64方式方可使用。小于40KB时IDE可以将其自动转换。
- 图片/字体大于等于 40kb，会有性能问题，不建议使用。如需使用可以自行转base64或用网络资源(字体的网络路径必须为
https协议头) - nvue只能通过js引入字体
.test2 {
background-image: url('~@/static/logo.png');
}
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
使用<template/>进行条件/列表渲染
平台兼容
- Android的js运行在专门的容器中，各版本无兼容区别
- uni-app支持使用npm，但建议优先从 uni-app插件市场 获取插件，防止只兼容H5端。
- 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块(如JQuery)，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API）
- 微信小程序自定义组件在各个平台都支持使用(但性能不如vue组件)，配置方式同微信小程序，但不支持npm下载的小程序自定义组件引入
WXS
仅支持编译到微信小程序和H5
renderjs
仅支持编译到APP和H5
- 运行在视图层的js，降低逻辑层和视图层的通讯损耗，提高视图交互能力
- 在视图层操作dom，运行dom操作和canvas渲染的js库(echarts和threejs等)
- APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）
- H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。
nvue
基于 weex 改进的原生渲染引擎，提供了原生渲染能力。
vue页面使用webview渲染；nvue页面使用原生渲染。一个项目中两种页面可以混用。
-
优势
- 新的组件
list高性能长列表、waterfall高性能瀑布流、refresh高性能下拉刷新、barcode页面内嵌扫码等 - 原生控件的层级覆盖问题
- 深度使用video、map组件
- 新的组件
-
劣势
- canvas不如vue+renderjs，且nvue页面的css不支持媒体查询，不利于横竖屏动态切换、适配屏幕。
IOS平台默认情况下滚动容器组件（如list、waterfall组件）内容不足时，由于没有撑满容器的可视区域会导致无法上下滚动，此时无法操作下拉刷新功能，无法触发refresh组件的@refresh、@pullingdown事件。 此时可在容器组件中配置alwaysScrollableVertical属性值为true来设置支持上下滚动，支持下拉刷新操作。
编译与基座
使用HBuilder/HBuilderX开发应用时，可在手机/模拟器上查看运行效果，点击菜单栏“运行”->“运行到手机或模拟器”使用。
此功能会在手机/模拟器上安装HBuilder标准运行基座，在开发过程中实现热更新。
- HBuilder标准运行基座，是由DCloud提前打包好的，使用的是DCloud申请的第三方SDK配置，manifest里大多数设置都是固定的。
因此在HBuilderX 真机运行开发期间，appid、plus.runtime.version、plus.runtime.versionCode等获取的都是HBuilder的信息而非自己的APP信息，需要打包自定义基座或正式包测试相关功能(如升级)。
需要自定义基座的场景
- 需要APP
plus.runtime.version等值的场景（如升级） - 调用uni-app原生插件
- 使用unipush推送
- 微信支付 决定收款账户
- 地图、登录、分享 来源信息显示不同
- 百度语音识别和友盟统计 决定数据接收方
