uts-plugin.md 12.8 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">
103

104 105 106 107 108 109 110 111 112
┌─utssdk
│	├─app-android //Android平台目录
│	│ └─index.uts
│	│ └─config.json //Android原生配置
│	├─app-ios //ios平台目录
│	│ └─index.uts
│	│ └─config.json //ios原生配置
│	├─web //web平台目录
│	│ └─index.uts
113
│	└─mp-xxx  // 其他平台
114 115 116 117 118 119
├─common // 可跨端公用的uts代码。推荐,不强制
├─static // 静态资源
├─package.json
├─index.d.ts  // 插件能力声明,非必需
└─index.uts   // 插件能力实现

120 121
</code>
</pre>
杜庆泉's avatar
杜庆泉 已提交
122 123


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

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

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

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

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

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

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

### 原生层配置

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

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

W
wanganxp 已提交
166 167 168 169 170 171 172
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
杜庆泉 已提交
173

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

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

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

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


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

// 引用android api
import Context from "android.content.Context";
import BatteryManager from "android.os.BatteryManager";
189
// 引用uts环境库
杜庆泉's avatar
杜庆泉 已提交
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
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 已提交
209
`io.dcloud.uts.android`库介绍文档[见下](#iodcloudutsandroid)
杜庆泉's avatar
杜庆泉 已提交
210 211 212

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

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

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

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
217

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

W
wanganxp 已提交
275
## Android内置库@iodcloudutsandroid
W
wanganxp 已提交
276 277 278 279 280 281 282 283 284

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

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

### getAppContext

285 286 287 288 289
获取当前应用Application上下文,对应android平台 Context.getApplicationContext 函数实现

Android开发场景中,调用应用级别的资源/能力,需要使用此上下文。更多用法,参考[Android官方文档]()


W
wanganxp 已提交
290
```ts
291 292 293 294 295 296 297
// [示例]获取asset下的音频,并且播放
let assetManager = getAppContext()!.getAssets();
let afd = assetManager.openFd("free.mp3");
let mediaPlayer = new MediaPlayer();
mediaPlayer.setDataSource(afd.getFileDescriptor(),afd.getStartOffset(), afd.getLength());
mediaPlayer.prepare();
mediaPlayer.start();
W
wanganxp 已提交
298 299 300 301
```

### getUniActivity

302 303 304 305
获取当前插件所属的activity实例,对应android平台 getActivity 函数实现

Android开发场景中,调用活动的级别的资源/能力,需要使用此上下文。更多用法,参考[Android官方文档]()

W
wanganxp 已提交
306
```ts
307 308
// [示例]获取当前activity顶层容器
let frameContent = decorView.findViewById<FrameLayout>(android.R.id.content)
W
wanganxp 已提交
309 310 311 312 313
```

### getResourcePath(resourceName:String)

获取指定插件资源 的运行期绝对路径
314

W
wanganxp 已提交
315 316 317 318 319 320

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

程序运行期间,需要获取到此资源,可以使用 
 
```ts
321 322
// [示例]获取指定资源路径
// 得到文件运行时路径: `/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/__UNI__3732623/www/uni_modules/test-uts-static/static/logo.png`
W
wanganxp 已提交
323
getResourcePath("uni_modules/test-uts-static/static/logo.png")
324

W
wanganxp 已提交
325 326
```

327

W
wanganxp 已提交
328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344

### onAppActivityPause

容器的宿主activity onPause时触发

### onAppActivityResume

容器的宿主activity onResume时触发

### onAppActivityDestroy

容器的宿主activity onDestroy时触发

### onAppActivityBack

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

345

W
wanganxp 已提交
346
## 常见问题
W
wanganxp 已提交
347

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
348
### 常见报错
fxy060608's avatar
fxy060608 已提交
349

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

W
wanganxp 已提交
353 354
### Float类型传参

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

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
357
```ts
W
wanganxp 已提交
358 359 360 361 362
let textSize =  30.0.toFloat();
```

### 泛型参数

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

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
365
```ts
366 367
let frameContent = decorView.findViewById<FrameLayout>(android.R.id.content)
let layoutParam = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
W
wanganxp 已提交
368
```
杜庆泉's avatar
杜庆泉 已提交
369

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
370 371 372 373 374 375
## 路线图

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

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

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

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

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

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