uts-plugin-hybrid.md 14.0 KB
Newer Older
lizhongyi_'s avatar
lizhongyi_ 已提交
1 2
# UTS原生混编介绍

杜庆泉's avatar
杜庆泉 已提交
3
`HBuilder X 4.25`起,UTS插件可以直接使用原生的kotlin、java、swift代码,即 `UTS原生混编`(下文简称:`原生混编`)
lizhongyi_'s avatar
lizhongyi_ 已提交
4 5 6



杜庆泉's avatar
杜庆泉 已提交
7
## 原生混编的优势和适用场景
lizhongyi_'s avatar
lizhongyi_ 已提交
8

杜庆泉's avatar
杜庆泉 已提交
9
`原生混编`出现之前,开发者只能使用[UTS语言](https://doc.dcloud.net.cn/uni-app-x/uts/) 来开发[UTS插件](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html) 
lizhongyi_'s avatar
lizhongyi_ 已提交
10

杜庆泉's avatar
杜庆泉 已提交
11
对于不熟悉原生的开发者来说,要实现原生功能的开发,往往要经过下面的步骤:
杜庆泉's avatar
杜庆泉 已提交
12

杜庆泉's avatar
杜庆泉 已提交
13
	1   通过`搜索引擎`/`AIGC`/`原生API`文档 得到对应功能的关键原生代码(kotlin/swift等)
杜庆泉's avatar
杜庆泉 已提交
14

杜庆泉's avatar
杜庆泉 已提交
15
	2   手动翻译这段代码为`UTS`
杜庆泉's avatar
杜庆泉 已提交
16

杜庆泉's avatar
杜庆泉 已提交
17
	3   如果存在`UTS`不支持的语法,还需要把原生代码封装成 `aar`/`framework` 等原生库形式,再供`UTS`代码调用
杜庆泉's avatar
杜庆泉 已提交
18 19


杜庆泉's avatar
杜庆泉 已提交
20 21 22 23 24 25
**这是一件很繁琐的事情,`UTS原生混编`的出现彻底解决了这个问题:**


开发者只需要把正确的 kotlin/swift/java 原生代码按照约定放在UTS插件目录中,就可以通过 `uts`无缝的使用这些原生代码。

`UTS插件`的编译流程中,UTS源码是 Kotlin/swift 源码的上游环节,也就是说 UTS本身就会被编译为Kotlin/swift 源码,所以 uts 与原生语言之间的相互调用 本质是**同一语言内部 不同函数/对象之间的相互调用,不会有任何调用成本和性能损耗**
杜庆泉's avatar
杜庆泉 已提交
26 27 28 29 30 31 32


和uts插件代码一样,混编的原生代码可以直接真机运行,省去了手动集成AAR三方库需要打包自定义基座的环节,大大提升了开发效率。


有了`UTS原生混编`之后,开发者如果想要实现对应的原生功能,仅需要:

杜庆泉's avatar
杜庆泉 已提交
33
+   1  通过`搜索引擎`/`AIGC`/`原生API` 得到原生代码片段,
杜庆泉's avatar
杜庆泉 已提交
34 35
+   2  放入UTS插件中,真机运行

杜庆泉's avatar
杜庆泉 已提交
36
即可以看到执行结果。
杜庆泉's avatar
杜庆泉 已提交
37 38


杜庆泉's avatar
杜庆泉 已提交
39
下面我们以内存监控功能为例,分别拆解 `UTS原生混编`技术在`Android``ios`平台上的使用步骤
lizhongyi_'s avatar
lizhongyi_ 已提交
40 41 42 43


## Android平台

杜庆泉's avatar
杜庆泉 已提交
44 45 46 47 48
#### 前置条件

在真正开始使用 `UTS原生混编`之前,开发者需要确保两个前置条件:

1  `HBuidlerX` 最低 4.25 版本
lizhongyi_'s avatar
lizhongyi_ 已提交
49

杜庆泉's avatar
杜庆泉 已提交
50
2  对[UTS插件](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html#%E7%AE%80%E5%8D%95%E6%8F%92%E4%BB%B6%E7%A4%BA%E4%BE%8B)的有基本的认识,和一定的开发经验。
lizhongyi_'s avatar
lizhongyi_ 已提交
51

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

杜庆泉's avatar
杜庆泉 已提交
53
在进行下一步的操作之前,你的目录应该是这样的:
杜庆泉's avatar
杜庆泉 已提交
54

杜庆泉's avatar
杜庆泉 已提交
55
![目录](https://web-ext-storage.dcloud.net.cn/doc/uts/uts_hybrid_plugin/bybrid_android_start.png)
杜庆泉's avatar
杜庆泉 已提交
56

杜庆泉's avatar
杜庆泉 已提交
57 58 59 60

#### 第一步 获取和验证原生代码

原生代码的获取有以下方式:
杜庆泉's avatar
杜庆泉 已提交
61 62 63 64 65 66

1 [Android官方文档](https://developer.android.google.cn/?hl=zh-cn)

2 搜索引擎/AI工具


杜庆泉's avatar
杜庆泉 已提交
67 68 69
我们在这里使用AI工具得到了关键代码:

![获取代码](https://web-ext-storage.dcloud.net.cn/doc/uts/uts_hybrid_plugin/hybrid_android_getcode.png)
杜庆泉's avatar
杜庆泉 已提交
70

杜庆泉's avatar
杜庆泉 已提交
71
AI工具或官方文档得到的代码并不总是准确的,我们需要去验证它。
杜庆泉's avatar
杜庆泉 已提交
72

杜庆泉's avatar
杜庆泉 已提交
73
目前`HBuilderX`并未提供原生代码的语法提示和校验,因此我们建议:
杜庆泉's avatar
杜庆泉 已提交
74

杜庆泉's avatar
杜庆泉 已提交
75
+ 如果编写大段原生代码,推荐在原生IDE(比如:AndroidStudo)中编写验证,再放入uts插件混编联调
杜庆泉's avatar
杜庆泉 已提交
76

杜庆泉's avatar
杜庆泉 已提交
77
+ 如果是小的代码片段,可以直接放入UTS插件目录,依靠HBuilderX本地编译功能来完成原生代码的校验
杜庆泉's avatar
杜庆泉 已提交
78

lizhongyi_'s avatar
lizhongyi_ 已提交
79

杜庆泉's avatar
杜庆泉 已提交
80
这里我们选择直接集成UTS插件, 使用`HBuilderX`来验证
杜庆泉's avatar
杜庆泉 已提交
81

杜庆泉's avatar
杜庆泉 已提交
82
#### 第二步 集成原生代码
杜庆泉's avatar
杜庆泉 已提交
83

杜庆泉's avatar
杜庆泉 已提交
84
`Kotlin`/`Java`语言中,存在[包名](https://kotlinlang.org/docs/packages.html) 的概念,类似ios中的命名空间。为了让我们的原生代码可以被uts访问到,我们需要确保原生代码的包名是正确的:
lizhongyi_'s avatar
lizhongyi_ 已提交
85 86 87 88

大多数情况下,我们建议混编代码的包名与[UTS插件默认包名](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-android.html#_3-1-%E9%85%8D%E7%BD%AEandroidmanifest-xml)保持一致,这样在UTS调用原生代码时,可以省去手动引入包名的步骤。

```kotlin
杜庆泉's avatar
杜庆泉 已提交
89 90
// 混编示例中的包名
package uts.sdk.modules.utsDemoMem
lizhongyi_'s avatar
lizhongyi_ 已提交
91 92 93 94 95 96 97 98
```

如果混编代码的包名与`UTS插件默认包名`不一致,则需要像使用原生对象一样手动引入

```ts
import KotlinObject from 'xxx.xxx.KotlinObject';
```

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

杜庆泉's avatar
杜庆泉 已提交
100
回到我们的示例,现在整理完的`Kotlin`代码是这样的:
杜庆泉's avatar
杜庆泉 已提交
101

杜庆泉's avatar
杜庆泉 已提交
102
```kotlin
杜庆泉's avatar
杜庆泉 已提交
103
package uts.sdk.modules.utsDemoMem
杜庆泉's avatar
杜庆泉 已提交
104

杜庆泉's avatar
杜庆泉 已提交
105 106 107
// 这里是原生的包名引用
import android.app.ActivityManager
import android.content.Context.ACTIVITY_SERVICE
杜庆泉's avatar
杜庆泉 已提交
108
// UTS内置对象的包名引用
杜庆泉's avatar
杜庆泉 已提交
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
import io.dcloud.uts.UTSAndroid
import io.dcloud.uts.setInterval
import io.dcloud.uts.clearInterval
import io.dcloud.uts.UTSArray
import io.dcloud.uts.console

object NativeCode {


    fun memMonitor(){

		val activityManager = UTSAndroid.getUniActivity()?.getSystemService(ACTIVITY_SERVICE) as ActivityManager
		val memoryInfo = ActivityManager.MemoryInfo()
		activityManager.getMemoryInfo(memoryInfo)
		val availMem = memoryInfo.availMem / 1024 / 1024
		val totalMem = memoryInfo.totalMem / 1024 / 1024
	  
		// availMem 可用内存,单位MB
		// totalMem 设备内存,单位MB
		console.log(availMem,totalMem)
		
    }
   

}
```
杜庆泉's avatar
杜庆泉 已提交
135

杜庆泉's avatar
杜庆泉 已提交
136
上面的代码中,我们将获取内存的信息的功能以kotlin静态方法`NativeCode.memMonitor()` 的形式对外暴露
杜庆泉's avatar
杜庆泉 已提交
137

杜庆泉's avatar
杜庆泉 已提交
138
接下来,我们将整理好的原生代码添加到 在`app-android` 目录
杜庆泉's avatar
杜庆泉 已提交
139

杜庆泉's avatar
杜庆泉 已提交
140 141 142
![](https://web-ext-storage.dcloud.net.cn/doc/uts/uts_hybrid_plugin/bybrid_android_add.png)

> 注意:java代码需要云打包自定义基座后生效,kotlin代码不需要打包,标准基座即可生效
杜庆泉's avatar
杜庆泉 已提交
143

杜庆泉's avatar
杜庆泉 已提交
144
是的,就是这样简单。如图所示,我们已经完成了对原生代码的集成。
杜庆泉's avatar
杜庆泉 已提交
145 146


杜庆泉's avatar
杜庆泉 已提交
147 148
#### 第三步 在原生代码中调用UTS内置对象

杜庆泉's avatar
杜庆泉 已提交
149
在上面的示例中,我们已经实现了获取当前设备内存信息的功能,但是我们还想更进一步:持续监控内存,并且回调信息到uvue页面
杜庆泉's avatar
杜庆泉 已提交
150

杜庆泉's avatar
杜庆泉 已提交
151
实现持续调用的方法有很多。这里我们为了演示在`Kotlin`代码中调用UTS内置对象,选择采用[setInterval](https://doc.dcloud.net.cn/uni-app-x/uts/buildin-object-api/timers.html#setinterval-handler-timeout-arguments)内置对象来实现这个功能:
lizhongyi_'s avatar
lizhongyi_ 已提交
152

杜庆泉's avatar
杜庆泉 已提交
153 154 155

使用 UTS内置对象 需要注意两点:

杜庆泉's avatar
杜庆泉 已提交
156 157
1 正确引入类名:

杜庆泉's avatar
杜庆泉 已提交
158
	UTS内置对象在具体的平台会有一个对应的类名,举例: UTS内置的Array -> kotlin中的io.dcloud.uts.UTSArray
杜庆泉's avatar
杜庆泉 已提交
159

杜庆泉's avatar
杜庆泉 已提交
160
2 正确的处理原生对象和内置对象直接的转换
杜庆泉's avatar
杜庆泉 已提交
161

杜庆泉's avatar
杜庆泉 已提交
162
	当前示例中不涉及,但如果开发者可能遇到类似 kotlin.Array 转换 UTS内置Array的情况,这种情况可以通过查阅内置对象文档来解决。
杜庆泉's avatar
杜庆泉 已提交
163

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

杜庆泉's avatar
杜庆泉 已提交
165
> 完整的内置对象实现清单和与原生对象转换代码示例,大家都可以在内置对象文档的具体章节找到
杜庆泉's avatar
杜庆泉 已提交
166 167


杜庆泉's avatar
杜庆泉 已提交
168 169 170 171 172 173 174 175 176 177 178
原生`kotlin`代码的最终形态:

```kotlin
package uts.sdk.modules.utsDemoMem

import android.app.ActivityManager
import android.content.Context.ACTIVITY_SERVICE
import io.dcloud.uts.UTSAndroid
import io.dcloud.uts.setInterval
import io.dcloud.uts.clearInterval
import io.dcloud.uts.UTSArray
杜庆泉's avatar
杜庆泉 已提交
179
import io.dcloud.uts.console
杜庆泉's avatar
杜庆泉 已提交
180 181 182 183 184 185 186 187 188 189 190

object NativeCode {

     /**
     * 记录上一次的任务id
     */
    private var lastTaskId = -1

	/**
	 * 开启内存监控
	 */
杜庆泉's avatar
杜庆泉 已提交
191
    fun startMemMonitor(callback: (UTSArray<Number>) -> Unit){
杜庆泉's avatar
杜庆泉 已提交
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206

        if(lastTaskId != -1){
            // 避免重复开启
            clearInterval(lastTaskId)
        }

		// 延迟1000ms,每2000ms 获取一次内存
        lastTaskId = setInterval({

          val activityManager = UTSAndroid.getUniActivity()?.getSystemService(ACTIVITY_SERVICE) as ActivityManager
          val memoryInfo = ActivityManager.MemoryInfo()
          activityManager.getMemoryInfo(memoryInfo)
          val availMem = memoryInfo.availMem / 1024 / 1024
          val totalMem = memoryInfo.totalMem / 1024 / 1024
          
杜庆泉's avatar
杜庆泉 已提交
207
		  console.log(availMem,totalMem)
杜庆泉's avatar
杜庆泉 已提交
208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
		  // 将得到的内存信息,封装为UTSArray(即UTS环境中的Array对象)
          val retArray = UTSArray<Number>()
          retArray.add(availMem)
          retArray.add(totalMem)
          callback(retArray)
          
        },1000,2000)
		

    }
    
	/**
	 * 关闭内存监控
	 */
    fun stopMemMonitor(){
        if(lastTaskId != -1){
            // 避免重复开启
            clearInterval(lastTaskId)
        }
    }

}
```

杜庆泉's avatar
杜庆泉 已提交
232 233 234 235
上面的代码中,我们将获取内存的信息的功能以`Kotlin`静态方法`NativeCode.startMemMonitor(callback)` 的形式对外暴露。 

这里的 `callback`参数是一个 参数为`UTSArray`类型的`Kotlin`函数,对应`UTS`中一个参数为`Array``function`对象

杜庆泉's avatar
杜庆泉 已提交
236 237 238
至此,内存监控功能的原生代码部分已经完全开发完毕。接下来,我们编写UTS代码来使用它。


杜庆泉's avatar
杜庆泉 已提交
239 240 241
#### 第四步 编写`UTS`调用代码

如我们在前文所讲,`UTS``Kotlin`语言的上游语言。所有`Kotlin`代码中的:`类``对象``函数``变量`,均可以在uts中直接使用。 
杜庆泉's avatar
杜庆泉 已提交
242

杜庆泉's avatar
杜庆泉 已提交
243
**但是反之,则不行**
杜庆泉's avatar
杜庆泉 已提交
244

杜庆泉's avatar
杜庆泉 已提交
245
因为`UTS`的编译器兼容了`Kotlin`的语法规则,所以`UTS`中调用`Kotlin`代码可以被很好的支持,即使升级HBuilderX版本也不会有什么问题。
杜庆泉's avatar
杜庆泉 已提交
246

杜庆泉's avatar
杜庆泉 已提交
247 248 249 250
`UTS`从未保证过编译对应的`Kotlin`的具体规则。所以虽然开发者可以通过一些取巧的方式实现:kotlin中调用UTS代码,但这是不被支持的,遇到类似HBuilderX版本升级之类的情况,类似代码可能会失效或者异常。


在我们的示例中,UTS中的调用的代码是这样的:
杜庆泉's avatar
杜庆泉 已提交
251 252

```ts
杜庆泉's avatar
杜庆泉 已提交
253
// 开启内存监控
杜庆泉's avatar
杜庆泉 已提交
254
export function callKotlinCallbackUTS(callback: (res: string) => void) {
杜庆泉's avatar
杜庆泉 已提交
255
	NativeCode.startMemMonitor(function(res:Array<number>){
杜庆泉's avatar
杜庆泉 已提交
256 257 258 259
    console.log(res)
    callback("设备内存:" + res[0] + ",可用内存:" + res[1])
  })
}
杜庆泉's avatar
杜庆泉 已提交
260 261 262 263
// 停止内存监控任务
export function callKotlinStopCallbackUTS() {
	NativeCode.stopMemMonitor()
}
杜庆泉's avatar
杜庆泉 已提交
264 265 266

```

杜庆泉's avatar
杜庆泉 已提交
267 268 269 270 271 272 273 274 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
上面的代码,我们在UTS中使用一个 入参为`Array<number>`类型的`function`对象就完成了对`kotlin`原生代码的调用。


#### 第五步 回调参数到uvue页面

uts文件与uvue 之间的相互调用,属于[UTS插件开发](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html)的相关内容,这里不展开叙述。开发者可以查阅相关文档掌握这部分知识。

下面仅列出了uvue示例代码。用于完整展示内存监控示例:

```vue
<template>
	<view>
		<button @tap="kotlinMemListenTest">kotlin监听内存并持续回调UTS</button>
		<button @tap="kotlinStopMemListenTest">停止监听</button>
		<text>{{memInfo}}</text>
	</view>
</template>

<script>
	
	import { callKotlinCallbackUTS,callKotlinStopCallbackUTS} from "../../uni_modules/demo-mem";
	 
	export default {
		data() {
			return {
				memInfo: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			kotlinMemListenTest: function () {
			    callKotlinCallbackUTS(function(ret:string){
			      this.memInfo = ret
			    })
			},
			
			kotlinStopMemListenTest:function () {
			    callKotlinStopCallbackUTS()
			},
		}
	}
</script>
杜庆泉's avatar
杜庆泉 已提交
311

lizhongyi_'s avatar
lizhongyi_ 已提交
312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407
```



## iOS平台

在插件的app-ios 目录下可以直接添加 swift 源码文件

![](https://web-ext-storage.dcloud.net.cn/doc/uts/uts_plugin/mixCodeIOS.png)

如图所示,可以将 swift 文件直接放在 app-ios 目录下,也可以放在 app-ios 的子目录下。

在 uts 代码中使用 swift 文件中定义的函数、变量、类等时无需导入,可以直接调用。


### 原生代码使用UTS内置对象

UTS的[内置对象](../uts/buildin-object-api/number.md)[平台专用对象](../uts/utsios.md)均可以在原生环境使用,
但是在使用前需要导入基础库 `DCloudUTSFoundation`

我们知道在 uts 中使用的 uts 内置对象会被编成原生类型,那么在混编的 swift 文件中要想使用 uts 内置对象,就要直接使用其编译后的原生类型。
下面列出 uts 内置对象对应的 swift 原生类名

|uts 内置对象		|编译成的原生类名		  			
|:----			|:---						
|Array			|Array						
|Number			|NSNumber 					
|String			|String						
|Set			|UTSSet						
|Map			|Map						
|UTSJSONObject	|UTSJSONObject				
|JSON			|JSON						
|Date			|Date						
|Math			|Math										
|RegExp			|UTSRegExp					
|Error			|UTSError					
|console		|console					

**以console对象为例,演示原生代码向 HX 控制台打印日志**

首先将基础库 `DCloudUTSFoundation` 导入到 swift 源码文件中,不过这个导入和使用过程将没有代码提示,输出的变量信息也不会包含变量所在的文件和代码行号等信息。

示例如下:

```swift

import DCloudUTSFoundation;

func test1() -> String {
    console.log("this is in swift file")
    return "123"
}
```

### 原生代码使用 UTSiOS 对象

如果你想在 swift 代码中使用 `UTSiOS` 对象提供的能力,你需要先导入基础库 `DCloudUniappRuntime`.

示例如下:

```swift

import DCloudUniappRuntime;

func getKeyWindow() -> UIWindow {
    return UTSiOS.getKeyWindow()
}
```

**注意:**

- UTSiOSHookProxy 因为涉及到自动注册的问题,在 swift 代码中直接使用将不生效。
- 目前仅支持 Swift 源码混编,OC 源码即使添加也不会参与编译
- Swift 源码文件中定义的函数、全局变量、类 等符号名称不要和 uts 文件中的符号名相同,否则会因为符号冲突导致编译不过


## 混编注意事项

+ `index`是保留文件名,原生代码不能命名为 index.kt/index.java/index.swift
 
+ HBuilder X 目前不支持原生代码的语法提示、转到定义、debug断点。仅支持高亮和格式化。

+ 混编需要使用[条件编译](https://uniapp.dcloud.net.cn/tutorial/platform.html#%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91%E5%A4%84%E7%90%86%E5%A4%9A%E7%AB%AF%E5%B7%AE%E5%BC%82)限制编译入口

```uts
// 下面的代码只会在Android平台编译
// #ifdef APP-ANDROID
export function callKotlinMethodGetInfo():String {
	return NativeCode.getPhoneInfo()
}
export function callJavaMethodGetInfo():String {
	return new JavaUser("jack",12).name
}
// #endif
```

杜庆泉's avatar
杜庆泉 已提交
408 409 410 411 412 413 414 415 416
完整的混编示例可以在[hello uts](https://gitcode.net/dcloud/hello-uts/-/tree/dev/uni_modules/uts-syntaxcase/utssdk)中找到



## 支持情况说明

但目前HBuilderX并未提供原生代码的语法提示和校验。所以如果编写大段原生代码,推荐在原生ide中编写好,再放入uts插件下混编联调。

如果是一小段简单代码,比如从网络或AI摘抄了一段,也可以直接在HBuilderX中开发联调。