鸿蒙跨平台框架ArkUI-X

01

引言

目前,移动端主流跨平台方案有Flutter、React Native、uni-app等等,还有刚推出不久的Compose-Multiplatform,真所谓是百花齐放。这些框架各有特点,技术实现各有差异,比如Flutter通过Dart编写的UI描述对接Flutter渲染引擎,React Native 则是借助大前端成熟的发展背景,利用JS引擎生成UI描述,渲染时转化为原生控件,复用了原生渲染能力。至于选择哪种框架实现跨平台取决于项目的具体需求、开发团队的技能和偏好。今天我们探索一个新的框架——ArkUI-X。

02

ArkTS、ArkUI、ArkUI-X

在探索ArkUI-X之前,先了解一下ArkTS、ArkUI、ArkUI-X三者关系:

  • ArkTS 是华为基于TypeScript自研的开发语言,主要用于Harmony应用层开发。ArkTS在保持原 TS 基本语法风格的基础上,对 TS 的动态类型特性施加了更严格的约束,引入静态类型,减少运行时的类型检查,有助于性能提升;

  • ArkUI 是一套声明式UI开发框架。包含一系列UI组件(Text、Image)、状态管理(State、LocalStorage)、界面绘制、交互事件以及实时界面预览工具;

  • ArkUI-X 进一步将 ArkUI 扩展到多个 OS 平台,目前支持 OpenHarmony、HarmonyOS、Android、iOS,后续会逐步增加更多平台支持。

简单来说,开发者基于ArkUI框架,使用ArkTS语言进行编码,构建OpenHarmony/HarmonyOS应用,为了让应用运行到Android iOS上,利用 ArkUI-X 框架实现各OS平台的适配和构建。接下来我们将创建一个 ArkUI-X 简易Demo,通过Demo来探索ArkUI如何绘制组件到屏幕,ArkUI-X如何扩展ArkUI到Android平台,ArkUI-X如何与Android系统能力交互。

03

快速上手

3.1 环境搭建

  1. DevEco Studio

首先从DevEco Studio官方网站(https://developer.huawei.com/consumer/cn/deveco-studio/)下载并安装DevEco Studio,需要选择4.0.0以上版本,以支持 ArkUI-X 套件。然后在DevEco Studio内部,分别下载HarmonyOS SDK 和 ArkUI-X,非合作企业开发者下载OpenHarmony SDK 和 ArkUI-X。

下载OpenHarmony SDK示例:

1.png

下载ArkUI-X示例:2.png

  1. Android Studio

因为最终要打出Android的apk实现跨平台,所以需要安装Android Studio。安装步骤对客户端小伙伴都已经轻车熟路了,强调一点:需要额外配置ANDROID_HOME(Android SDK安装路径)到系统环境变量中,这是步骤一中DevEco Studio编译项目的必备条件之一。

  1. Xcode 同理,使用Xcode导入iOS项目,打IPA格式的安装包。

3.2 创建工程

完成上述的环境搭建后,就可以创建工程了。可以通过 ArkUI-X 基础模板进行创建。 3.png
创建工程

创建完成后,得到这样一个工程结构:

4.png
项目结构
  • entry:存放的是应用程序入口、核心业务逻辑以及资源文件。跨平台的公共源代码放在entry下,这点和纯Harmony项目结构一致;

  • .arkui-x/android:是一个标准的Android项目结构。但目前文件还不完整,需要Build App/Hap之后,才会生成更为完整的Android项目;

  • .arkui-x/iOS: 是一个标准的iOS项目结构,包含project.pbxproj。

Build App/Hap之后,在build目录下生成的后缀名.hap文件,可安装到HarmonyOS平台上。其它平台需要单独打包,.arkui-x下的Android项目导入到Android Studio中打出.apk;.arkui-x下的iOS项目导入到Xcode中打出.IPA。至此完成三个平台的打包工作。也就是说,在Build App过程中,ArkUI-X框架会把entry里公用ArkTS代码和resource,打入到各平台的安装包或项目文件中。

应用调试方面,目前只支持HarmonyOS调试,Android和iOS暂不支持ArkTS调试。

其实上述的环境搭建、新建项目、编译打包和安装调试,还有另一种方式实现——ACE Tools,是一套为ArkUI-X开发者提供的命令行工具。详情参见:ACE Tools快速指南(https://gitee.com/arkui-x/docs/blob/master/zh-cn/application-dev/quick-start/start-with-ace-tools.md)

04

窥探ArkUI的绘制过程

在了解 ArkUI-X 实现跨平台之前,我们先简单过一遍ArkTS编写的UI界面,是如何绘制到OpenHarmony/HarmonyOS上的,以上面的Demo为例:

// Index.ets
@Entry
@Component
struct Index {@State message: string = '今天星期五'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

Build App / Hap 之后得到hap包,和Android apk类似,对hap包进行解压得到modules.abc字节码文件 (Ark Byte Code),再对字节码文件进行16进制解析,可以看到这样一段代码:

class Index extends ViewPU {constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {super(parent, __localStorage, elmtId, extraInfo);this.__message = new ObservedPropertySimplePU('今天星期五', this, "message");this.setInitiallyProvidedValue(params);}setInitiallyProvidedValue(params: Index_Params) {if (params.message !== undefined) {this.message = params.message;}}aboutToBeDeleted() {this.__message.aboutToBeDeleted();SubscriberManager.Get().delete(this.id__());}private __message: ObservedPropertySimplePU<string>;initialRender() {   // 编译器根据ArkTS中对组件的描述部分,重新生成jsthis.observeComponentCreation2((elmtId, isInitialRender) => {Row.create();Row.height('100%');}, Row);this.observeComponentCreation2((elmtId, isInitialRender) => {Column.create();Column.width('100%');}, Column);this.observeComponentCreation2((elmtId, isInitialRender) => {Text.create(this.message);Text.fontSize(50);Text.fontWeight(FontWeight.Bold);}, Text);Text.pop();Column.pop();Row.pop();}
}

可以看出,我们用@Component编写的组件,经过ArkCompiler编译后,会生成一个继承自ViewPU的js类,这个过程和kotlin经过kotlin编译器生成java有点类似。ViewPU位于ArkUI框架的arkui_ace_engine

(https://gitee.com/openharmony/arkui_ace_engine/tree/master)仓, 部分代码如下:

// 位于 frameworks/bridge/declarative_frontend/state_mgmt/src/lib/partial_update/pu_view.ts
abstract class ViewPU extends PUV2ViewBase implements IViewPropertiesChangeSubscriber, IView {constructor(parent: IView, localStorage: LocalStorage, elmtId: number = UINodeRegisterProxy.notRecordingDependencies, extraInfo: ExtraInfo = undefined) {super(parent, elmtId, extraInfo); this.id_ = SubscriberManager.MakeId() : elmtId;if (localStorage) {this.localStorage_ = localStorage;}SubscriberManager.Add(this);}public initialRenderView(): void {this.obtainOwnObservedProperties();this.initialRender();...}// 编译器生成的js类会实现该方法,主要是对组件的描述protected abstract initialRender(): void;// implements IMultiPropertiesChangeSubscriber UI状态变化回调viewPropertyHasChanged(varName: PropertyInfo, dependentElmtIds: Set<number>): void {if (dependentElmtIds.size && !this.isFirstRender()) { // 第一次走initialRenderView()if (!this.dirtDescendantElementIds_.size && !this.runReuse_) {this.markNeedUpdate(); // 更新UI 最终调到C++}...}let cb = this.watchedProps.get(varName);if (cb && typeof cb === 'function') {// ArkTS中@Prop @Watch('xxx') value 的invokecb.call(this, varName);}}
}

从上面ViewPU的部分代码,可以提取几点信息:

  1. 构造方法第一个参数parent: IView,说明整个UI结构中存在子父组件概念,其内部维护一个子父组件关系链,这点和其它UI框架一样;

  2. 构造逻辑依次是:

  • 生成element Id,用于局部刷新;

  • 定义localStorage对象,用于页面状态共享;

  • SubscriberManager.Add(this),添加订阅,监听状态变化。

状态变化后,回调viewPropertyHasChanged,更新UI并执行@Watch装饰器逻辑。

更多实现可查看源码,当然只需要看看流程即可,因为代码的commit频次比较高,每次打开看细节都可能有所变化,而且还存在很多同名v2类、v2方法。总之,ViewPU 是所有组件的基类,ViewPU 继承自 PUV2ViewBasePUV2ViewBase 继承自 NativeViewPartialUpdate。从下面代码块的注释得知,UI渲染将在 C++ 里面实现,将通过NAPINAPIJNI 类似)完成jsC++的交互。

// 位于 frameworks/bridge/declarative_frontend/state_mgmt/src/lib/puv2_common/puv2_view_base.ts 和 puv2_view_native_base.d.ts
// implemented in C++  for release
abstract class PUV2ViewBase extends NativeViewPartialUpdate {...
}/*** NativeViewPartialUpdate aka JSViewPartialUpdate C++ class exposed to JS*  all definitions in this file are framework internal*/
declare class NativeViewPartialUpdate {constructor();markNeedUpdate(): void; // 更新UIfinishUpdateFunc(elmtId: number): void;...static create(newView: NativeViewPartialUpdate): void;
}

markNeedUpdate()主要负责UI刷新,追踪一下它的实现逻辑:

// 位于 frameworks/bridge/declarative_frontend/jsview/js_view.cpp
void JSViewPartialUpdate::JSBind(BindingTarget object)
{JSClass<JSViewPartialUpdate>::Declare("NativeViewPartialUpdate");JSClass<JSViewPartialUpdate>::StaticMethod("create", &JSViewPartialUpdate::Create, opt);JSClass<JSViewPartialUpdate>::Method("markNeedUpdate", &JSViewPartialUpdate::MarkNeedUpdate);
}void JSViewPartialUpdate::MarkNeedUpdate()
{needsUpdate_ = ViewPartialUpdateModel::GetInstance()->MarkNeedUpdate(viewNode_);
}
// 位于 frameworks/bridge/declarative_frontend/jsview/models/view_partial_update_model_impl.cpp
bool ViewPartialUpdateModelImpl::MarkNeedUpdate(const WeakPtr<AceType>& node)
{auto weakElement = AceType::DynamicCast<ComposedElement>(node);auto element = weakElement.Upgrade();if (element) {element->MarkDirty();}return true;
}

ComposedElementpipeline 记录组件信息的对象,weakElement.Upgrade()ComposedElement 放入 pipeline 中,最终通过图形渲染引擎(OpenGL ES、Skia)完成显示。详细代码参考frameworks/core/pipeline/base/composed_element.cpp

05

Android跨平台的实现

以上是一个hap包通过ArkUI完成渲染的大致过程,回到跨平台ArkUI-X,相同的ArkTS代码是如何运行在Android设备上的呢?

打开Android项目,看到assets下存放着ArkCompiler编译产物,和上一节中对.hap包解压后得到的文件一模一样。这是在编译环节中,编译脚本copy一份modules.abc字节码和resource到Android工程下,作为Android应用资源,打包时将以assets形式打入apk。

src/main/assets/arkui-x├── entry|   ├── ets|   |   ├── modules.abc|   |   └── sourceMaps.map|   ├── resouces.index|   ├── resouces|   └── module.json└── systemres

如何在Android上执行modules.abc字节码呢?打开libs,发现ArkUI相关的so动态库和jar包。

libs├── armabi-v7a|   ├── libarkui_android.so|   └── libhilog.so└── arkui_android_adapter.jar

其中libarkui_android.soarkui_ace_enginearkui_napifoundation/appframeworkarkui_for_android... 所编译出的动态库,是运行和界面渲染的必要环境。另一个arkui_android_adapter.jar的功能是:Android Application需要继承arkui_android_adapter.jar包所提供的StageApplicationStageApplication用于初始化资源路径以及加载配置信息。Activity需要继承arkui_android_adapter.jar包所提供的StageActivityStageActivity主要功能是将Android中Activity的生命周期与Harmony中Ability的生命周期进行映射。除此之外,arkui_android_adapter.jar适配了系统平台能力,如粘贴板、软键盘、字体、存储、日志。这里有个疑问:ArkUI-X是如何实现与Android系统之间的交互呢?ArkTSJava没有相互调用的能力,为了实现ArkTSJava交互,需要ArkTSC++交互,C++再与Java交互,调用链为ArkTS  -> NAPI -> C++ -> JNI -> Java,反之亦然,看起来十分复杂。ArkUI-X提供一套桥接能力,对于开发者来说,并不用关心这些封装逻辑,实际开发过程中,就像是ArkTSJava直接交互。

下面通过粘贴板的例子,探究它的具体实现过程。我们给系统粘贴板设置数据——'明天星期六',使用ArkTS实现如下,看看最终是如何调到Android Framework 给粘贴板设置数据的api:ClipboardManager#setPrimaryClip()

import pasteboard from '@ohos.pasteboard';Button('拷贝到粘贴板').onClick(() => {let pasteData: pasteboard.PasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, '明天星期六')let systemPasteboard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard()systemPasteboard.setData(pasteData)})

这段代码对接ArkUI的调用链和上一节中渲染UI类似,就不再赘述了。粘贴板相关api 在 arkui_ace_engine中定义成抽象接口,如下:

// 位于 arkui_ace_engine/frameworks/core/common/clipboard/clipboard.h
namespace OHOS::Ace {class Clipboard : public AceType {DECLARE_ACE_TYPE(Clipboard, AceType);public:~Clipboard() override = default;virtual void SetData(const std::string& data, CopyOptions copyOption = CopyOptions::InApp, bool isDragData = false) = 0;}
}

ArkUI-X 分平台对接口进行不同实现,Android的实现在arkui_for_android仓库中,其定义和实现如下,可见粘贴板设置数据api SetData()最终到ClipboardJni::SetData(data)

// 位于 arkui_for_android/capability/java/jni/clipboard/clipboard_impl.h
#include "core/common/clipboard/clipboard.h"namespace OHOS::Ace::Platform {class ClipboardImpl final : public Clipboard {public:explicit ClipboardImpl(const RefPtr<TaskExecutor>& taskExecutor) : Clipboard(taskExecutor) {}~ClipboardImpl() override = default;void SetData(const std::string& data, CopyOptions copyOption = CopyOptions::InApp, bool isDragData = false) override;}
}
// 位于 arkui_for_android/capability/java/jni/clipboard/clipboard_impl.cpp
#include "adapter/android/capability/java/jni/clipboard/clipboard_impl.h"
#include "adapter/android/capability/java/jni/clipboard/clipboard_jni.h"namespace OHOS::Ace::Platform {void ClipboardImpl::SetData(const std::string& data, CopyOptions copyOption, bool isDragData){// 对 SetData 实现,最终ClipboardJni::SetData(data)taskExecutor_->PostTask([data] { ClipboardJni::SetData(data); }, TaskExecutor::TaskType::PLATFORM, "ArkUI-XClipboardImplSetData");}
}

再通过JNI实现C++Java交互:

// 位于 arkui_for_android/capability/java/jni/clipboard/clipboard_jni.cpp
static const char CLIPBOARD_PLUGIN_CLASS_NAME[] = "ohos/ace/adapter/capability/clipboard/ClipboardPluginBase";
static const JNINativeMethod METHODS[] = {{ .name = "nativeInit", .signature = "()V", .fnPtr = reinterpret_cast<void*>(ClipboardJni::NativeInit) },
};
static const char METHOD_SET_DATA[] = "setData";
static const char SIGNATURE_SET_DATA[] = "(Ljava/lang/String;)V";// JNI_OnLoad
bool ClipboardJni::Register(std::shared_ptr<JNIEnv> env)
{// 动态注册 nativeInit 方法,java侧调用jclass clazz = env->FindClass(CLIPBOARD_PLUGIN_CLASS_NAME);bool ret = env->RegisterNatives(clazz, METHODS, ArraySize(METHODS)) == 0;return true;
}void ClipboardJni::NativeInit(JNIEnv* env, jobject object)
{jclass clazz = env->GetObjectClass(object);g_pluginMethods.setData = env->GetMethodID(clazz, METHOD_SET_DATA, SIGNATURE_SET_DATA);
}bool ClipboardJni::SetData(const std::string& data)
{auto env = JniEnvironment::GetInstance().GetJniEnv();jstring jData = env->NewStringUTF(data.c_str());// 反射调用 ClipboardPluginAosp.java setData方法env->CallVoidMethod(g_clipboardObj.get(), g_pluginMethods.setData, jData);if (jData != nullptr) {env->DeleteLocalRef(jData);}return true;
}

最终通过ClipboardManager#setData() ,将ArkTS中设置的内容,给到Android的系统粘贴板。

// 位于 arkui_for_android 仓库打出的 arkui_android_adapter.jar 包中
public class ClipboardPluginAosp extends ClipboardPluginBase {private final ClipboardManager clipManager;public ClipboardPluginAosp(Context context) {this.clipManager = (ClipboardManager context.getSystemService(Context.CLIPBOARD_SERVICE);nativeInit();}@Overridepublic void setData(String data) {if (clipManager != null) {ClipData clipData = ClipData.newPlainText(null, data);clipManager.setPrimaryClip(clipData);}}
}

iOS平台的实现和Android平台类似,原理都是相通的。

06

小结

通过这一章,我们学到了ArkUI-X的环境搭建、项目创建和打包流程,探索了ArkTS编写的项目,编译后字节码文件如何与ArkUI对接,了解了ArkUI-X在Android平台上的实现方案,以及ArkUI-X如何适配系统平台能力。ArkUI-X 属于后来者,设计之初应该借鉴过其它跨平台方案,汲取了优秀设计,才形成目前的形态。今后在跨平台的实现上,我们又多了一种选择。

参考
  • ArkUI-X仓库地址:https://gitee.com/arkui-x

  • ArkUI-arkui_ace_engine仓库地址:https://gitee.com/openharmony/arkui_ace_engine

  • 深入理解arkui_ace_engine:https://juejin.cn/post/7305235970286485515

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/29606.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【科一】综合素质

职业理念&职业道德 &#xff08;职业理念中的教育观&#xff09; 提速个性创两全 素质教育是 以提高国民素质为根本宗旨促进学生个性发展以培养学生的创新精神和实践能力为重点面向全体学生促进学生全面发展 学习过人 教育者为中心 转向学习者为中心教会学生知识 转向 教会…

一招解决Pytorch GPU版本安装慢的问题

Pytorch是一个流行的深度学习框架&#xff0c;广泛应用于计算机视觉、自然语言处理等领域。安装Pytorch GPU版本可以充分利用GPU的并行计算能力&#xff0c;加速模型的训练和推理过程。接下来&#xff0c;我们将详细介绍如何在Windows操作系统上安装Pytorch GPU版本。 查看是否…

静态时序分析:SDC约束命令set_ideal_network详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 set_ideal_network命令可以将当前设计中的一组端口或引脚标记为理想网络源&#xff08;或者说设置端口或引脚的ideal_network_source属性为true&#xff09;&…

优先队列priority_queue应用

不讲概念&#xff01;&#xff01;只说用法&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 优先队列 priority_queue 换种话来说就是堆&#xff0c;只可以从中取到最大或者最小的值&#xff0c;所以说&#xff0c;只维护堆顶。它使用less&#xff08;&#xff…

鸿蒙Android4个脚有脚线

效果 min:number122max:number150Row(){Stack(){// 底Text().border({width:2,color:$r(app.color.yellow)}).height(this.max).aspectRatio(1)// 长Text().backgroundColor($r(app.color.white)).height(this.max).width(this.min)// 宽Text().backgroundColor($r(app.color.w…

2025年总结zabbix手动部署过程!

1.下载软件包。 wget https://repo.zabbix.com/zabbix/6.0/ubuntu/pool/main/z/zabbix-release/zabbix-release_latest_6.0ubuntu22.04_all.deb dpkg -i zabbix-release_latest_6.0ubuntu22.04_all.deb apt update apt install zabbix-server-mysql zabbix-frontend-php zabbix…

3.3.2 用仿真图实现点灯效果

文章目录 文章介绍Keil生成.hex代码Proteus仿真图中导入.hex代码文件开始仿真 文章介绍 点灯之前需要准备好仿真图keil代码 仿真图参考前文&#xff1a;3.3.2 Proteus第一个仿真图 keil安装参考前文&#xff1a;3.1.2 Keil4安装教程 keil新建第一个项目参考前文&#xff1a;3.1…

TypeError: Cannot read properties of undefined (reading ‘xxx‘)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 &#x1f35a; 蓝桥云课签约作者、…

Spring 无法解决循环依赖的 5 种场景

一、构造器注入引发的循环依赖 1. 问题复现 Component public class ServiceA {private final ServiceB serviceB;Autowiredpublic ServiceA(ServiceB serviceB) { // 构造器注入this.serviceB serviceB;} }Component public class ServiceB {private final ServiceA servic…

Vue项目通过内嵌iframe访问另一个vue页面,获取token适配后端鉴权(以内嵌若依项目举例)

1. 改造子Vue项目进行适配(ruoyi举例) (1) 在路由文件添加需要被外链的vue页面配置 // 若依项目的话是 router/index.js文件 {path: /contrast,component: () > import(/views/contrast/index),hidden: true },(2) 开放白名单 // 若依项目的话是 permission.js 文件 cons…

案例1_2:点亮8个灯【改进版】

文章目录 文章介绍改进的原理图改进的代码效果图 文章介绍 改进的原理图 使用标号简化连线 改进的代码 #include <reg51.h> // 包含头文件void main() {// 让 LED1-LED4 低电平&#xff08;点亮&#xff09;// P0 1111 0000;P0 0xF0;while (1); // 让程序一直运行…

Bazel搭建CUDA工程入门

环境版本&#xff1a; 工程目录&#xff1a; 测试输出&#xff1a; WORKSPACE 参考仓库&#xff1a;CUDA rules for Bazel 及 examples load("bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")http_archive(name "rules_cuda…

深入理解 C 语言函数的定义

在 C 语言的编程世界里&#xff0c;函数是构建复杂程序的基石。理解函数的定义与运用&#xff0c;对于编写高效、可维护的代码至关重要。​ 函数定义的基本概念​ 函数是一组执行特定任务的代码块。它将一个复杂的问题分解为一个个小的、可管理的部分&#xff0c;提高了代码的…

从毕达哥拉斯定理到向量距离和夹角的计算

1 毕达哥拉斯定理和余弦定理 1.1 毕达哥拉斯定理&#xff08;勾股定理&#xff09; 对于 毕达哥拉斯定理&#xff08;勾股定理&#xff09; 大家应该都比较熟悉&#xff0c;在一个直角三角形中&#xff0c;两条 直角边的平方之和 等于 斜边的平方 例如一个直角三角形两个直角…

结合rpart包的决策树介绍

决策树与CART算法 决策树是一种基于树状结构的监督学习算法。它通过从根节点开始递归地对特征进行划分&#xff0c;构建出一棵树来进行决策。决策树的构建过程需要解决的重要问题有三个&#xff1a;如何选择自变量、如何选择分割点、确定停止划分的条件。解决这些问题是希望随…

Manus AI : Agent 元年开启.pdf

Manus AI : Agent 元年开启.pdf 是由华泰证券出品的一份调研报告&#xff0c;共计23页。报告详细介绍了Manus AI 及 Agent&#xff0c;主要包括Manus AI 的功能、优势、技术能力&#xff0c;Agent 的概念、架构、应用场景&#xff0c;以及 AI Agent 的类型和相关案例&#xff0…

Centos的ElasticSearch安装教程

由于我们是用于校园学习&#xff0c;所以最好是关闭防火墙 systemctl stop firewalld systemctl disable firewalld 个人喜欢安装在opt临时目录&#xff0c;大家可以随意 在opt目录下创建一个es-standonely-docker目录 mkdir es-standonely-docker 进入目录编辑yml文件 se…

Geo3D建筑材质切换+屋顶纹理

一、简介 基于Threejs开发封装建筑渲染管线&#xff0c;利用简单二维建筑矢量面轮廓程序化生成3D建筑&#xff0c;支持材质一键切换&#xff0c;支持多样化建筑墙面材质和屋顶材质&#xff0c;支持建筑透明&#xff0c;支持地形高程适配&#xff0c;支持按空间范围裁剪挖洞等。…

【移动WEB开发】流式布局

目录 1. 移动端基础 1.1 浏览器现状 1.2 手机屏幕现状 1.3 常见移动端屏幕尺寸 1.4 移动端调试方法 2. 视口 3. 二倍图 3.1 物理像素&物理像素比 3.2 多倍图 3.3 背景缩放 3.4 多倍图切图cutterman 4. 移动端开发选择 4.1 主流方案 4.2 单独制作 4.3 响应式…

江科大51单片机笔记【9】DS1302时钟可调时钟(下)

在写代码前&#xff0c;记得把上一节的跳线帽给插回去&#xff0c;不然LCD无法显示 一.DS1302时钟 1.编写DS1302.c文件 &#xff08;1&#xff09;重新对端口定义名字 sbit DS1302_SCLKP3^6; sbit DS1302_IOP3^4; sbit DS1302_CEP3^5;&#xff08;2&#xff09;初始化 因为…