# uni-app x项目

# 新建

在HBuilder3.9起,新建uni-app项目界面的底部有一个checkbox:uni-app x。勾选后会新建为uni-app x项目。

uni-app x不支持vue2,所以无法同时勾选vue2。

uni-app x的项目,manifest.json中会多一个节点"uni-app-x" : {}。这是HBuilder识别项目类型的标记。如手动增删这个节点,需对项目点右键"重新识别项目类型"

{
    "name" : "hello-uniapp x",
    "appid" : "__UNI__4517034",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "uni-app-x" : {
    }
}

uni-app x的项目,在左侧项目管理器的图标是圆形的U(之前是方型的U)。

# 项目结构

uni-app x的项目结构与uni-app js引擎版的项目结构基本一致。

主要的差别是没有nativeplugins目录。原因是uni-app x不支持App原生语言插件,仅支持uts插件。

基于uts的插件,可以在uni-app x和uni-app上通用。

uni-app x的App平台也不支持微信小程序wxml组件。

	
┌─uniCloud              云空间目录,支付宝小程序云为uniCloud-alipay,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
│─components            符合vue组件规范的uni-app x组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.uvue      index页面
│  └─list
│     └─list.uvue       list页面
├─static                存放应用引用的本地静态资源(如图片、字体、音视频等)的目录,注意:静态资源都应存放于此目录  详见
├─uni_modules           存放uni_module 详见
├─platforms             存放各平台专用页面的目录,详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放web-view组件使用的本地html文件的目录,详见
├─wxcomponents          微信小程序平台wxml组件专用目录
├─unpackage             非工程代码,一般存放运行或发行的编译结果、App自定义基座
├─main.uts              Vue初始化入口文件
├─App.uvue              应用配置,用来配置App全局样式以及监听 详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量
	

# App的运行和发行

# App运行

uni-app x的真机运行基座(playground),和 uni-app/5+App/wap2app 不同,是一个绿色圆形的U(之前是方型H),基座名称默认为uni-app x(之前叫HBuilder)。

  • uni-app x基座,只能运行uni-app x项目,包名是io.dcloud.uniappx
  • HBuilder基座,可以运行uni-app/5+App/wap2app。包名是io.dcloud.HBuilder

标准基座使用的图标、包名、证书以及配置的三方sdk的appkey等各种原生信息,都是DCloud的。

当需要使用自己的包名、证书和原生配置进行运行调试时,需在打包界面勾选打包自定义基座,打包后的自定义基座会放置在项目的unpackage目录下,然后在运行项目时的界面中可以选择自定义基座来运行。

uni-app x运行时,控制台右上角可以选择开启原生日志。

目前支持真机运行、从HBuilderX 4.0起支持uts插件的debug断点。但目前还不支持uvue的断点debug。

# App发行

uni-app x App平台,目前打包的apk暂不支持渠道包。不支持wgt热更新、不支持安心打包。下载到项目下的uts插件可打包含入。

# web的运行和发行注意

uni-app x运行到浏览器时,编译基于vite,其特点是按需编译。所以项目运行后很快能看到首页,但点击二级页时有等待延迟,因为此时正在先编译后再渲染。

这带来2个问题:

  1. 运行时点击初次打开的二级页有等待过程。在一个运行的周期内,已编译过的页面再次进入时瞬间打开。
  2. 运行后未点到页面由于不会被编译,其中隐藏的类型错误不可知,需在发行时查阅。

发行时会编译全部项目。因为运行时未必点全所有页面,所以发行时可能看到更多编译报错。另外发行后由于已编译过,打开二级页面时很快。

发行后的文件如果部署uniCloud的前端网页托管,记得在uniCloud的web控制台点强制刷新。

如果有条件的话,可以在重新部署后用各地ip访问一遍,让文件同步到各地的cdn节点,这样当地用户第一次访问时就会更快。