华为仓颉鸿蒙HarmonyOS NEXT ArkTS应用使用仓颉混合开发实例

开发过程中难免遇到需要使用混合开发的场景，今天简单介绍一下在ArkTS应用中使用仓颉的例子！希望对大家有帮助

仓颉作为HarmonyOS应用开发语言，开发者使用仓颉进行应用开发涉及以下2种场景：

• ​ 场景1：开发纯仓颉应用，即应用中全量功能都使用仓颉语言开发；
• ​ 场景2：在ArkTS应用中，使用仓颉开发部分应用逻辑；

后者会涉及混合使用ArkTS和仓颉两种语言开发UI逻辑的情况，即UI页面中同时包含由ArkTS和仓颉开发的页面/组件。

借助ArkUI 的 XComponent的能力，以及仓颉与ArkTS互操作，可以实现仓颉和ArkTS的混合开发。仓颉组件可作为XComponent的内容嵌入ArkTS页面中。

与纯仓颉开发模式的异同

相同点：

• ​混合UI场景下的页面和纯仓颉写法基本一致
• ​状态管理支持@State、@Link、@Prop、@Observed、@Publish、@Provide、@Consume，但不支持跨语言的状态同步。

不同点：

区别体现在生命周期和页面跳转上。

• ​混合UI场景的仓颉页面不是一个真正意义上具有完整生命周期的页面，不支持页面生命周期接口。
• ​无法在仓颉页面中使用仓颉的router进行页面跳转。
• ​当前混合场景仅支持部分组件，参考混合页面支持情况。

混合页面支持情况

组件名	支持现状
AlphabetIndexer	暂不支持borderRadius。
Button	暂不支持borderRadius。
Flex	Flex内子组件暂不支持基于Flex宽高设置百分比，当子组件宽高大于Flex时，将限定为Flex的宽高大小。
Grid	Grid创建时暂不支持scroller参数。
Image	暂不支持onFinish；暂不支持onError事件的回调参数CJImageError，返回参数的componentWidth和componentHeight都为固定值0.0；额外支持colorFilter(ColorFilter)、ColorFilter。
ListItemGroup	ListItemGroup创建时暂不支持输入ListItemGroupParams类型的参数。
List	List创建时仅支持space参数，暂不支持：onItemDelete、onScrollIndex、onScroll、onScrollFrameBegin、onReachStart、onReachEnd、onScrollStart、onScrollStop。
LoadingProgress	支持接口enableLoading(value: Bool):设置LoadingProgress动画显示或者不显示。
Scroll	暂不支持：onScrollEnd(已废弃)、scrollBy。
Stack	Stack内不支持使用条件渲染 if/else。
Swiper	暂不支持：onChange、finishAnimation。
TextInput	暂不支持：inputFilter、onCopy、padding、backgroundColor、borderStyle、borderRadius、borderColor、borderWidth。
TextPicker	onChange事件只能获取到index值。
CustomDialog	暂不支持设置动画属性。

通用属性	支持现状
backgroundImagePosition(align: Alignment)	不支持
bindMenu	不支持
bindContextMenu	不支持
transition	不支持
aspectRatio	不支持
displayPriority	不支持
colorBlend	不支持
backdropBlur	不支持
saturate	不支持
hueRotate	不支持
position	不支持
flexBasis(value: Length)	不支持
flexBasis(value: CJResource)	不支持
foregroundColor	不支持

通用事件	支持现状
onHover	不支持
onMouse	不支持
onKeyEvent	不支持

colorFilter(ColorFilter)

public func colorFilter(value: ColorFilter): This

为图像设置颜色滤镜效果。

参数名	参数类型	必填	默认值	描述
value	ColorFilter	是	-	给图像设置颜色滤镜效果，入参为一个的4x5的RGBA转换矩阵。矩阵第一行表示R（红色）的向量值，第二行表示G（绿色）的向量值，第三行表示B（蓝色）的向量值，第四行表示A（透明度）的向量值，4行分别代表不同的RGBA的向量值。当矩阵对角线值为1，其余值为0时，保持图片原有色彩。计算规则：如果输入的滤镜矩阵为：像素点为[R, G, B, A]则过滤后的颜色为 [R’, G’, B’, A’]说明：svg类型图源不支持该属性。

ColorFilter

创建具有4*5矩阵的颜色过滤器。

public class ColorFilter {
        init(array: Array<Float32>)
    }

参数名	参数类型	必填	默认值	描述
array	Array	是	-	创建具有45矩阵的颜色过滤器, 入参为[mn]位于m行和n列中矩阵值, 矩阵是行优先的。

混合页面工程

混合页面工程，依赖仓颉与 ArkTS 互操作能力，首先需要参考 "在 ArkTS （+ C++）的HAP或HAR中创建仓颉模块" 章节，创建一个 ArkTS 仓颉混合工程，然后参考 "添加供ArkTS调用的页面组件" 章节，添加一个混合页面，按照以上步骤可以完成混合UI工程的配置。

添加仓颉UI代码

修改./entry/src/main/cangjie/src/index.cj，示例代码如下

package entry
    
    import cj_res_entry.*
    import ohos.component_ndk.*
    import ohos.state_manage_ndk.*
    import ohos.state_macro_manage_ndk.*
    import ohos.base.*
    import ohos.hybrid_base.*
    
    @HybridComponentEntry
    @Component
    class MyPage {
        @State
        var msg: String = "Hello"
    
        public func build() {
            Column {
                Text(msg)
                Button("click to change Text").onClick{=>
                    msg = "world"
                }
            }
        }
    }

ArkTS页面中插入仓颉UI

修改./entry/src/main/ets/pages/Index.ets，示例如下

import { CJHybridComponent } from "hybridView" // 导入CJHybridComponent
    
    @Entry
    @Component
    struct Index {
      build() {
        Column() {
          CJHybridComponent({
            library: "entry",      // 指定加载的仓颉package，对应上面的仓颉UI所在的包名
            component: "MyPage"    // 指定加载的仓颉class，对应上面仓颉UI中使用@HybridComponentEntry修饰的class
          })
        }
        .height('100%')
        .width('100%')
      }
    }

按照上述操作，可以完成一个简单的混合UI工程创建