@Builder
export function buildButton(params: ESObject) {
Button(params.text, { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.onClick(() => {
params.onClick()
})
.attributeModifier(params.attributeUpdater)
}
如果我是个画布,需要定义context怎么处理,例如下面的代码:
import { qrcodegen } from '@ohos/qr-code-generator'
@Builder
export function buildButton(params: ESObject) {
//我要咋办
SimpleContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
//我要咋办,CanvasRenderingContext2D目前,如果从paams传递过来例如params.SimpleContex,
//会提示缺少CanvasRenderingContext2D接口的某些属性,编译不通过
QRCode(params.text)
.width(200)
.height(200)
.color("#000") // 设置二维码颜色:ml-citation{ref="7" data="citationList"}
.backgroundColor("#fff") // 设置背景色:ml-citation{ref="7" data="citationList"}
.onClick(() => {
params.onClick()
})
.attributeModifier(params.attributeUpdater)
Canvas(params.SimpleContext).width('80%').height("50%")
.onReady(() => {
let qrcode: qrcodegen.QrCode = qrcodegen.QrCode.encodeText(params.text, qrcodegen.QrCode.Ecc.MEDIUM)
qrcode.drawCanvas(8, 1, params.SimpleContext)
})
}
//#################################
//import { CanvasRenderingContext2D, UniNativeViewElement, UniNativeViewEvent, UTSJSONObject } from "@dcloudio/uni-app-x-runtime";
//编译后的CanvasRenderingContext2D缺少鸿蒙CanvasRenderingContext2D需要的部分属性
index.uts
import { BuilderNode} from "@kit.ArkUI"
import { util } from '@kit.ArkTS';// 标准导入语法:ml-citation{ref="1,6" data="citationList"}
import { scanCore,generateBarcode } from '@kit.ScanKit'; // 标准导入语法:ml-citation{ref="1,2" data="citationList"}
import { image } from '@kit.ImageKit'; // 官方图像处理模块:ml-citation{ref="1" data="citationList"}
// 导入混编实现的声明式UI构建函数
import { buildButton } from "./builder.ets"
import { INativeButtonContext } from "../interface.uts"
// 定义 buildButton 的参数类型
interface NativeButtonOptions {
text : string
SimpleContext:CanvasRenderingContext2D
onClick : () => void
}
export class NativeButton {
private $element : UniNativeViewElement;
public base64Str:string="";
private builder : BuilderNode<[NativeButtonOptions]> | null = null
//#################################
//import { CanvasRenderingContext2D, UniNativeViewElement, UniNativeViewEvent, UTSJSONObject } from "@dcloudio/uni-app-x-runtime";
//编译后的CanvasRenderingContext2D缺少鸿蒙CanvasRenderingContext2D需要的部分属性
private SimpleContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
// 初始化 buildButton 默认参数
private params : NativeButtonOptions = {
text: '',
SimpleContext:this.SimpleContext,
onClick: () => {
this.$element.dispatchEvent(new UniNativeViewEvent("customClick", {}))
}
}
// async getQrBase64() {
// const pixelMap = await generateBarcode.createBarcode(this.,{
// scanType: scanCore.ScanType.QR_CODE,
// width: 200,
// height: 200
// });
// const imagePacker = image.createImagePacker();
// const buffer = await imagePacker.packing(pixelMap, {
// format: 'image/jpeg',
// quality: 50
// });
// this.base64Str = new util.Base64Helper()
// .encodeToStringSync(new Uint8Array(buffer));
// }
constructor(element : UniNativeViewElement) {
// 绑定 wrapBuilder 函数
this.builder = element.bindHarmonyWrappedBuilder(wrapBuilder<[NativeButtonOptions]>(buildButton), this.params)
this.$element = element
// 绑定当前实例为自定义的controller,方便其他地方通过 element 获取使用
this.$element.bindHarmonyController(this)
}
updateText(text : string) {
this.params.text = text
// 调用 builder update 函数来更新 UI
this.builder?.update(this.params)
}
}
class NativeButtonContext implements INativeButtonContext {
private controller : NativeButton
constructor(element : UniNativeViewElement) {
// 获取自定义的 controller
this.controller = element.getHarmonyController<NativeButton>()!
}
updateText(text : string) {
// 调用 controller 来更新文字
this.controller?.updateText(text)
}
}
项目放在附件里面了