HelloWorld

创建uni-app

工具栏 -> 文件 -> 新建 -> 项目：

配置Android真机运行

连接手机，开启USB调试，工具栏 -> 运行 -> 运行到手机或模拟器

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

配置IOS真机运行

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

配置微信小程序运行

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

编译后代码会被保存在项目的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云打包

使用云打包时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多

综合安卓和苹果，云打包时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目录下，可直接用微信开发者工具运行该目录并进行后续的发布操作

判断平台

1. 条件编译

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

2. 运行期判断 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页面使用原生渲染。一个项目中两种页面可以混用。

• nvue与vue开发的语法区别

• 优势

  • 新的组件 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信息，需要打包自定义基座或正式包测试相关功能(如升级)。

需要自定义基座的场景

• 需要APPplus.runtime.version等值的场景（如升级）
• 调用uni-app原生插件
• 使用unipush推送
• 微信支付 决定收款账户
• 地图、登录、分享 来源信息显示不同
• 百度语音识别和友盟统计 决定数据接收方