uts-plugin.md 12.0 KB
Newer Older
W
wanganxp 已提交
1
> HBuilderX 3.6+ 支持uts插件
杜庆泉's avatar
杜庆泉 已提交
2

W
wanganxp 已提交
3
## 1 uts插件介绍
杜庆泉's avatar
杜庆泉 已提交
4

W
wanganxp 已提交
5
### 什么是uts
杜庆泉's avatar
杜庆泉 已提交
6

W
wanganxp 已提交
7
uts,全称 uni type script,是一门跨平台的、高性能的、强类型的现代编程语言。
杜庆泉's avatar
杜庆泉 已提交
8

W
wanganxp 已提交
9 10 11 12
它可以被编译为不同平台的编程语言,如:
- web平台,编译为JavaScript
- Android平台,编译为Kotlin
- iOS平台,编译Swift(暂未发布)
13

W
wanganxp 已提交
14
uts 采用了与 ts 基本一致的语法规范,支持绝大部分 ES6 API。
15

W
wanganxp 已提交
16
如需详细了解uts语法,另见[uts语法介绍](../tutorial/syntax-uts.md)
W
wanganxp 已提交
17 18 19 20 21 22 23 24 25 26

### 什么是uts插件

现有的uni-app,仍以js引擎为主。但从HBuilderX 3.6开始,uni-app支持uts插件。

也就是uts的第一步不是完整开发一个独立的app,而是作为uni-app的插件。后续uts会持续迭代,达到完整开发app的水平。

uts插件编译到app平台时,在功能上相当于uni-app之前的app原生插件,也就是kotlin和swift开发的插件。

开发uts插件不需要熟悉kotlin和swift的语法,因为使用的是基于ts的语法。但需要熟悉Android和iOS的系统API,否则无法调用原生能力。
杜庆泉's avatar
杜庆泉 已提交
27 28 29

![uts插件结构](https://native-res.dcloud.net.cn/images/uts/UTS%E7%BB%93%E6%9E%84%E7%A4%BA%E6%84%8F%E5%9B%BE1.png)

W
wanganxp 已提交
30
### uts插件与uni原生语言插件的区别
31 32 33

在HBuilderX 3.6以前,uni-app在App侧只有一种原生插件,即用java或object-c开发的插件。

W
wanganxp 已提交
34
在uts推出后,原来的“App原生插件”,更名为“App原生语言插件”。
35 36

不同的名字,代表它们需要开发者编写语言不同。但殊途同归,最后都编译为原生的二进制代码。
杜庆泉's avatar
杜庆泉 已提交
37

W
wanganxp 已提交
38 39 40 41 42 43
|-				|原生语言插件				|uts插件					|
|-				|-------					|--------						|
|开发语言		|java/oc					|uts							|
|开发环境		|Android studio/XCode		|HBuilderX						|
|打包方式		|外挂aar 等产出物			|编译时生成原生代码				|
|js层调用方式	|uni.requireNativePlugin()	|普通的js函数/对象,可以直接import|
杜庆泉's avatar
杜庆泉 已提交
44

W
wanganxp 已提交
45
相当于原生语言插件,uts插件的优势:
杜庆泉's avatar
杜庆泉 已提交
46

W
wanganxp 已提交
47
1. 统一了编程语言(uts),一种语言开发所有平台,真正大前端。
48
2. 统一了开发工具(HBuilderX),免除搭建复杂的原生开发环境。
杜庆泉's avatar
杜庆泉 已提交
49
3. 插件封装中要理解的概念更少。 传统原生语言插件需要在js和原生层处理通信,使用各种特殊转换,使用特殊语法导入,注意事项很多。**uts统一为纯前端概念,简单清晰。**
W
wanganxp 已提交
50
4. uts下前端和原生可以统一在HBuilderX中联调。而传统原生语言插件需要在多个开发工具间切换,联调复杂。
杜庆泉's avatar
杜庆泉 已提交
51 52


W
wanganxp 已提交
53
## 2 创建uts插件
杜庆泉's avatar
杜庆泉 已提交
54

W
wanganxp 已提交
55
### uts插件目录结构
杜庆泉's avatar
杜庆泉 已提交
56

W
wanganxp 已提交
57
在uni-app的项目工程下,提供了独立的目录`utssdk`,来存放uts插件。
杜庆泉's avatar
杜庆泉 已提交
58

W
wanganxp 已提交
59 60 61
当然官方更推荐使用[uni_modules](uni_modules.md)方式,这是更好的包管理方案。

首先确保项目根目录存在uni_modules文件夹,如果不存在,需要手动创建一个。
杜庆泉's avatar
杜庆泉 已提交
62 63 64

![插件目录](https://native-res.dcloud.net.cn/images/uts/uni_modules.jpg)

W
wanganxp 已提交
65
### 新建步骤拆解
杜庆泉's avatar
杜庆泉 已提交
66 67 68 69 70

选中`uni_modules`目录 -- 右键 -- 新建插件

![新建插件1](https://native-res.dcloud.net.cn/images/uts/new_uts_plugin.jpg)

W
wanganxp 已提交
71
选择 **uts原生插件**
杜庆泉's avatar
杜庆泉 已提交
72

73
![新建插件2](https://native-res.dcloud.net.cn/images/uts/new_uts_plugin2_1.jpg)
杜庆泉's avatar
杜庆泉 已提交
74

W
wanganxp 已提交
75
uts插件目录结构
杜庆泉's avatar
杜庆泉 已提交
76

77
![新建插件3](https://native-res.dcloud.net.cn/images/uts/new_uts_plugin3_1.jpg)
杜庆泉's avatar
杜庆泉 已提交
78 79


W
wanganxp 已提交
80
### 清单文件package.json
杜庆泉's avatar
杜庆泉 已提交
81

W
wanganxp 已提交
82
package.json为uni_modules的配置清单文件。
83

杜庆泉's avatar
杜庆泉 已提交
84

85
```json
杜庆泉's avatar
杜庆泉 已提交
86 87
{
  "id": "uts-helloworld",
W
wanganxp 已提交
88
  "displayName": "uts插件示例",
杜庆泉's avatar
杜庆泉 已提交
89
  "version": "0.1",
W
wanganxp 已提交
90
  "description": "uts插件示例",
杜庆泉's avatar
杜庆泉 已提交
91
  "uni_modules": {
杜庆泉's avatar
杜庆泉 已提交
92
    
杜庆泉's avatar
杜庆泉 已提交
93 94 95 96
  }
}
```

W
wanganxp 已提交
97
package.json的完整文档[详见](uni_modules.md#package.json)
杜庆泉's avatar
杜庆泉 已提交
98

W
wanganxp 已提交
99
### 插件的目录结构
100

101 102
<pre v-pre="" data-lang="">
	<code class="lang-" style="padding:0">
W
wanganxp 已提交
103
uni_modules插件标识  
杜庆泉's avatar
杜庆泉 已提交
104
  - utssdk
105
  	+ app-android //Android平台目录
杜庆泉's avatar
杜庆泉 已提交
106
  	  * index.uts
W
wanganxp 已提交
107
  	  * config.json //Android原生配置
108
  	+ app-ios //ios平台目录
杜庆泉's avatar
杜庆泉 已提交
109
  	  * index.uts
W
wanganxp 已提交
110 111
  	  * config.json //ios原生配置
  	+ web //web平台目录
杜庆泉's avatar
杜庆泉 已提交
112
	  * index.uts
113
  	+ mp-xxx  // 其他平台,待实现
W
wanganxp 已提交
114 115
  - common // 可跨端公用的uts代码。推荐,不强制
  - static // 静态资源
杜庆泉's avatar
杜庆泉 已提交
116
  - package.json
W
wanganxp 已提交
117
  - index.d.ts  // 插件能力声明,非必需
118
  - index.uts   // 插件能力实现
119 120
</code>
</pre>
杜庆泉's avatar
杜庆泉 已提交
121 122


W
wanganxp 已提交
123 124 125
index.uts文件是程序主入口。如果插件根目录下没有index.uts,则会在编译到不同平台时,寻找分平台的目录下的index.uts文件。

比如编译到app-android平台时,如果uts插件根目录没有index.uts,会寻找app-android/index.uts。如果也没有找到,会报错。
126

W
wanganxp 已提交
127
当同时存在分平台目录的index.uts和根目录index.uts时,会优先获取具体的分平台目录。
128

W
wanganxp 已提交
129 130 131 132
开发者有多种组织自己代码的方式:
1. 在插件根目录的index.uts中写条件编译代码。简单的业务一个文件搞定
2. 在插件根目录index.uts中写条件编译,import分平台的文件
3. 不写根目录的index.uts,直接在分平台目录写index.uts。不跨端时,比如只做一个Android插件,这样写比较简单
133

W
wanganxp 已提交
134 135 136
index.d.ts文件是对当前插件能力的**声明**,用于语法提示。它不是必写项。
因为uts写好后,HBuilderX可以自动识别uts api并进行语法提示。它更多的用于后续uts插件加密时给予语法提示。
如果不熟悉d.ts,可以自行网上搜索,它属于ts标准技术。
137

138
app-android 文件夹下存在下面两个文件
139

W
wanganxp 已提交
140 141 142 143
|文件名		|用途										|
|---		|---										|
|index.uts	|index.d.ts声明的能力在Android平台下的实现	|
|config.json|Android平台下的配置文件					|
W
wanganxp 已提交
144 145 146 147

### 原生层配置

app-android、app-ios目录下的config.json,是uts插件在相应平台的原生层配置文件。可以在其中配置依赖的aar包或gradle配置。
杜庆泉's avatar
杜庆泉 已提交
148 149 150

```json
{
W
wanganxp 已提交
151
         // 依赖某些aar
杜庆泉's avatar
杜庆泉 已提交
152 153 154
	"libs": [
	  "xxx.aar"
	],
155
        // 依赖某些gradle配置
杜庆泉's avatar
杜庆泉 已提交
156 157 158 159
	"dependencies": [{
	  "id": "com.xxx.richtext:richtext",
	  "source": "implementation 'com.xxx.richtext:richtext:3.0.7'"
	}],
160
        // Android系统版本要求,最低Android 5.0
杜庆泉's avatar
杜庆泉 已提交
161
	"minSdkVersion": 21
W
wanganxp 已提交
162
}
杜庆泉's avatar
杜庆泉 已提交
163
```
杜庆泉's avatar
杜庆泉 已提交
164

W
wanganxp 已提交
165 166 167 168 169 170 171
config.json只是uts插件的配置。如需要配置uni-app应用级的原生配置,需要另行在uni-app主项目中配置。

uni-app项目根目录有:
- manifest.json:uni-app封装的常用的原生层配置
- AndroidManifest.xml:Android打包时的扩展配置。manifest.json中不包含的部分,可以在这里配置。如没有这个文件,可自行创建。[详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android)

uni-app项目根目录还支持 nativeresource 目录,下面有 android、ios 目录。其中 android 目录下可以放原生应用资源目录 res、assets。[详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android)
杜庆泉's avatar
杜庆泉 已提交
172

W
wanganxp 已提交
173
## 3 开发uts原生插件
174

W
wanganxp 已提交
175
以android平台获取电量为例,介绍uts原生插件开发步骤
杜庆泉's avatar
杜庆泉 已提交
176

177
![OSAPI示例](https://native-res.dcloud.net.cn/images/uts/uts_osapi_demo_1.jpg)
杜庆泉's avatar
杜庆泉 已提交
178

W
wanganxp 已提交
179
在android平台目录下,编辑index.uts,键入以下内容。
杜庆泉's avatar
杜庆泉 已提交
180 181


182
```ts
杜庆泉's avatar
杜庆泉 已提交
183 184 185 186 187
// index.uts

// 引用android api
import Context from "android.content.Context";
import BatteryManager from "android.os.BatteryManager";
188
// 引用uts环境库
杜庆泉's avatar
杜庆泉 已提交
189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
import { getAppContext } from "io.dcloud.uts.android";

export function getBatteryCapacity(): string {
	// 获取android系统 application上下文
    const context = getAppContext();
    if (context != null) {
        const manager = context.getSystemService(
            Context.BATTERY_SERVICE
        ) as BatteryManager;
        const currentLevel: number = manager.getIntProperty(
            BatteryManager.BATTERY_PROPERTY_CAPACITY
        );
        return '' + currentLevel + '%';
    }
    return "0%";
}

```

W
wanganxp 已提交
208
`io.dcloud.uts.android`库介绍文档[见下](#iodcloudutsandroid)
杜庆泉's avatar
杜庆泉 已提交
209 210 211

至此,我们已经完成一个android平台上获取电量的原生能力封装。

212 213 214
在下一节,将介绍插件的使用,可以像使用普通js函数一样,使用getBatteryCapacity函数来获取设备电量。

注:HBuilderX的代码提示系统,支持在uts文件中对Android的原生API进行提示。
杜庆泉's avatar
杜庆泉 已提交
215

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
216

W
wanganxp 已提交
217
## 4 前端使用插件
杜庆泉's avatar
杜庆泉 已提交
218

W
wanganxp 已提交
219
虽然uts插件由uts语法开发,但前端引用插件并不要求一定需要ts,普通js即可引用uts插件。
220

杜庆泉's avatar
杜庆泉 已提交
221 222
下面介绍两种常见的引入方式

223
 **泛型引用**
杜庆泉's avatar
杜庆泉 已提交
224

225 226 227 228
作为一个对象全部import进来,然后通过点运算符调用这个对象的方法或属性。

```js
// 先引用,全部导入,对象起名为UTSHello
W
wanganxp 已提交
229
import * as UTSHello from "../../../uni_modules/uts-osapi";
杜庆泉's avatar
杜庆泉 已提交
230

231 232
// 然后使用UTSHello的方法
UTSHello.getBatteryCapacity()
杜庆泉's avatar
杜庆泉 已提交
233
```
234 235


236
**显性引用**
237 238 239 240 241

从可导出的选项里import 1个或多个(逗号分隔),然后直接使用导出的方法或属性。

```js
//先引用,导入指定方法或属性
杜庆泉's avatar
杜庆泉 已提交
242
import {
243
  getBatteryCapacity
W
wanganxp 已提交
244
} from "../../../uni_modules/uts-osapi";
杜庆泉's avatar
杜庆泉 已提交
245

246
// 然后使用导入的方法
杜庆泉's avatar
杜庆泉 已提交
247 248 249
getBatteryCapacity()
```

W
wanganxp 已提交
250
更多示例,可以参考 [HelloUTS](https://gitcode.net/dcloud/hello-uts)
杜庆泉's avatar
杜庆泉 已提交
251

252
## 5 真机运行
杜庆泉's avatar
杜庆泉 已提交
253

254
**uts虽然是原生代码,但同样具有真机运行功能。**
杜庆泉's avatar
杜庆泉 已提交
255

256
若HBuilderX中没有`uts编译运行插件`,在第一次运行时会自动下载。
杜庆泉's avatar
杜庆泉 已提交
257

258
在Android上,运行体验与uni-app基本无差异。一样可以热刷新,打印console.log。
杜庆泉's avatar
杜庆泉 已提交
259

W
wanganxp 已提交
260
**自定义基座**:同之前的uni-app。如果涉及微信支付等自定义manifest信息,需要选择自定义基座运行。自定义基座也支持uts插件。
261

W
wanganxp 已提交
262 263 264
截止到HBuilderX 3.6时遗留事项:
- 不能debug uts源码
- iOS版还未发布
杜庆泉's avatar
杜庆泉 已提交
265

W
wanganxp 已提交
266
遗留事项后续升级完善。
杜庆泉's avatar
杜庆泉 已提交
267

268
## 6 云端打包
杜庆泉's avatar
杜庆泉 已提交
269

270
正常支持云端打包。
杜庆泉's avatar
杜庆泉 已提交
271

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
272
注意:虽然uts在真机运行时支持热刷,但打包后uts编译为了纯原生二进制代码,不支持wgt热更新。
杜庆泉's avatar
杜庆泉 已提交
273

W
wanganxp 已提交
274
## Android内置库@iodcloudutsandroid
W
wanganxp 已提交
275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328

在uts里,Android的所有api都可以访问。同时DCloud提供了`io.dcloud.uts.android`库,处理在uni-app下的特殊情况。

```ts
import { getAppContext } from "io.dcloud.uts.android";
```

### getAppContext

获取当前应用Application上下文,对应android平台上的application context
```ts
fun getAppContext():Context?
```

### getUniActivity

获取当前应用宿主activity示例,当前 uni-app 应用实例的宿主activity
```ts
fun getUniActivity():Context?
```

### getResourcePath(resourceName:String)

获取指定插件资源 的运行期绝对路径
```ts
fun getResourcePath(resourceName:String):String
```

比如,插件A使用到了一张图片,开发期间 存放位置为`uni_modules/test-uts-static/static/logo.png`

程序运行期间,需要获取到此资源,可以使用 
 
```ts
getResourcePath("uni_modules/test-uts-static/static/logo.png")
```

得到文件运行时路径: `/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/__UNI__3732623/www/uni_modules/test-uts-static/static/logo.png`

### onAppActivityPause

容器的宿主activity onPause时触发

### onAppActivityResume

容器的宿主activity onResume时触发

### onAppActivityDestroy

容器的宿主activity onDestroy时触发

### onAppActivityBack

容器的宿主activity 回退物理按键点击时触发

W
wanganxp 已提交
329
## 常见问题
W
wanganxp 已提交
330

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
331
### 常见报错
fxy060608's avatar
fxy060608 已提交
332

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
333 334
- [plugin:vite:resolve] Failed toresolve entry for package "插件路径"
	HBuilderX 的最低要求为3.6.0,低于此版本无法import uts插件,编译时将报错。
fxy060608's avatar
fxy060608 已提交
335

W
wanganxp 已提交
336 337
### Float类型传参

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
338
android很多布局参数强制要求Float,但是ts中没有内置这种类型。可以使用下面的代码实现转换
W
wanganxp 已提交
339

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
340
```ts
W
wanganxp 已提交
341 342 343 344 345
let textSize =  30.0.toFloat();
```

### 泛型参数

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
346
android中UI相关的api,很多会要求泛型,目前uts支持用as关键字强转,满足类似的场景
W
wanganxp 已提交
347

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
348
```ts
W
wanganxp 已提交
349 350
let frameContent = decorView.findViewById(android.R.id.content) as FrameLayout
```
杜庆泉's avatar
杜庆泉 已提交
351

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
352 353 354 355 356 357
## 路线图

uts是一个宏大工程,产品将分阶段发布。近期将陆续发布:
1. iOS相关功能
2. debug
3. UI操作能力
DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
358
4. 插件市场支持uts插件的加密和计费销售
DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
359 360 361 362 363

最终,uts不再是uni-app的插件,而是应用的主体。(现在是以js为主,uts作为插件存在,主引擎仍然在v8或jscore里)

那时,即便是最复杂的应用,比如微信,也可以使用uts来开发,毫无功能和性能的影响。

杜庆泉's avatar
杜庆泉 已提交
364

W
wanganxp 已提交
365
## 示例项目
杜庆泉's avatar
杜庆泉 已提交
366

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
367
DCloud提供了 Hello UTS示例,[详见](https://gitcode.net/dcloud/hello-uts)