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

配置微信小程序运行

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

工具栏 => 发行 => 原生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目录下，可直接用微信开发者工具运行该目录并进行后续的发布操作

判断平台

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语句可以导入外联样式表

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');
 }

---

使用