鸿蒙“小程序”工作原理研究笔记

最新推荐文章于 2024-09-18 16:44:24 发布
最新推荐文章于 2024-09-18 16:44:24 发布
阅读量5k 收藏 2
点赞数 4
分类专栏： 1.技术类 文章标签： 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/absurd/article/details/108714118
版权

1. 介绍

自从微信小程序出现以来，各种“小程序”如雨后春笋一般出现。事实证明小程序这种开发方式非常好，鸿蒙 JS UI 框架采用类似的方式也是在意料之中的。

一个小程序（在鸿蒙 OS 中，也就是 Ability）由多个页面组成，每个页面由三部分组成：

  • .hml 用来描述界面的元素

  • .css 用来描述界面的风格

  • .js 用来编写处理事件逻辑

我们来看个例子：

index.hml

<div class="container">
    <text>{{count}}</text>
    <input if="{{count < 10}}"type="button" value="Inc" οnclick="inc"/>
    <input if="{{count > 0}}" type="button" value="Dec" onclick="dec"/>
</div>

index.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}

index.js

export default {
    data: {
        count: 5
    },

    inc() {
        this.count++;
    },

    dec() {
        this.count--;
    }
}

2. 工作原理

要理解它的工作原理，先研究一下编译之后的代码是非常重要的。上面的三个文件，编译之后会生成一个文件，其位置在：./entry/build/intermediates/res/debug/lite/assets/js/default/pages/index/index.js

index.hml 变成了创建函数：

module.exports = function (vm) {
  var _vm = vm || this; return _c('div',
    {
      'staticClass': [
        "container"
      ]
    },
    [_c('text',
      {
        'attrs': {
          'value': function () {
            return _vm.count
          }
        }
      }),
    _i((function () {
      return _vm.count < 10
    }),
      function () {
        return _c('input',
          {
            'attrs': {
              'type': "button", 'value': "Inc"
            }, 'on': {
              'click': _vm.inc
            }
          })
      }), _i((function () {
        return _vm.count > 0
      }), function () {
        return _c('input',
          {
            'attrs': {
              'type': "button", 'value': "Dec"
            }, 'on': {
              'click': _vm.dec
            }
          })
      })
    ])
}

index.css 变成了 JSON 文件。

{
  "classSelectors": {
    "container": {
      "flexDirection": "column",
      "justifyContent": "center",
      "alignItems": "center",
      "left": 0,
      "top": 0,
      "width": 454,
      "height": 454
    }
  }
}

这种处理方式很妙，把 JS 不擅长处理的 XML/CSS 转换成了 JS 代码和 JSON 对象，这个转换由工具完成，避免了运行时的开销。

在没有研究编译之后的代码时，我尝试在 ace/graphic 两个包中寻找解析 HML 的代码，让我惊讶的是没有找到相关代码。看了这些生成的代码之后才恍然大悟。

2.1 控件的创建

在 C++的代码中，创建控件的过程如下：

    1. 调用 JS 的 _c 函数时，进入 C++的函数 RenderModule::CreateElement
    1. RenderModule::CreateElement 的实现如下：

把 控件的 tag 转换成控件的 ID

uint16_t componentNameId = KeyParser::ParseKeyId(componentName, tagNameLength);

调用 ComponentFactory::CreateComponent 创建控件

Component *component = ComponentFactory::CreateComponent(componentNameId, options, children);

调用控件的 Render 创建真正的控件和子控件。

bool renderResult = component->Render();

2.2 页面的 Render 过程

那么第一个_c 函数是在哪里调用的呢？答案很明显，进入一个页面的时候，会调用 RenderPage 渲染页面：

void StateMachine::RenderPage()
{
    START_TRACING(RENDER);
    nativeElement_ = appContext_->Render(viewModel_);
    // append scroll layer to the outermost view
    scrollLayer_ = new ScrollLayer();
    if (scrollLayer_ != nullptr) {
        scrollLayer_->AppendScrollLayer(nativeElement_);
    }
    Component::HandlerAnimations();
    // trigger an async full GC after completing the heavy work, which will
    // be executed after the whole page showing process
    JsAsyncWork::DispatchAsyncWork(ForceGC, nullptr);
    STOP_TRACING();
}

这里会调用 JS 的 render 函数：

jerry_value_t JsAppContext::Render(jerry_value_t viewModel) const
{
    if (jerry_value_is_error(viewModel)) {
        HILOG_ERROR(HILOG_MODULE_ACE, "Failed to render app cause by render error.");
        return UNDEFINED;
    }

    if (jerry_value_is_undefined(viewModel)) {
        HILOG_ERROR(HILOG_MODULE_ACE, "Nothing to render as it is undefined.");
        return UNDEFINED;
    }

    jerry_value_t renderFunction = jerryx_get_property_str(viewModel, ATTR_RENDER);
    if (jerry_value_is_undefined(renderFunction)) {
        ACE_ERROR_CODE_PRINT(EXCE_ACE_ROUTER_REPLACE_FAILED, EXCE_ACE_PAGE_NO_RENDER_FUNC);
        return UNDEFINED;
    }
    jerry_value_t nativeElement = CallJSFunction(renderFunction, viewModel, nullptr, 0);
    if (jerry_value_is_undefined(nativeElement)) {
        ACE_ERROR_CODE_PRINT(EXCE_ACE_ROUTER_REPLACE_FAILED, EXCE_ACE_PAGE_RENDER_FAILED);
    }
    jerry_release_value(renderFunction);
    return nativeElement;
}

这里的 renderFunction 又是哪个函数呢？这需要看看 ViewModel 的构造函数：

export function ViewModel(options) {
  startTracing(PHASE_FWK_EVAL);
  if (!(this instanceof ViewModel)) {
    return new ViewModel(options);
  }

  const vm = (this._vm = this);

  if (Object.prototype.toString.call(options) === '[object Object]') {
    Object.keys(options).forEach(key => {
      const value = options[key];
      if (key === 'render') {
        vm.$render = value;
      } else if (key === 'data') {
        initState(vm, value);
      } else if (key === 'styleSheet') {
        initStyleSheet(value);
      } else if (typeof value === 'function') {
        vm[key] = value.bind(vm);
      } else {
        // do nothing
      }
    });
  }

  stopTracing();
}

这里的$render 是由 options 提供的，而 options 又是从哪里来的呢？再来看看编译后的代码：

/***/ (function(module, exports, __webpack_require__) {

var $app_template$ = __webpack_require__(4)
var $app_style$ = __webpack_require__(5)
var $app_script$ = __webpack_require__(6)
var options=$app_script$
 if ($app_script$.__esModule) {

      options = $app_script$.default;
 }
options.styleSheet=$app_style$
options.render=$app_template$;
module.exports=new ViewModel(options);

把 options.render 打印出来，可以看到

function (vm) { var _vm = vm || this; return _c('div', {'staticClass' : ["container"]} , [_c('text', {'attrs' : {'value' : function () {return _vm.count}}} ),_i((fun
ction () {return _vm.count<10}),function(){return _c('input', {'attrs' : {'type' : "button",'value' : "Inc"},'on' : {'click' : _vm.inc}} )}),_i((function () {return
_vm.count>0}),function(){return _c('input', {'attrs' : {'type' : "button",'value' : "Dec"},'on' : {'click' : _vm.dec}} )})] ) }

正是前面那个创建控件的函数。

2.3 数据变化更新

从前面的代码，很容易理解初始渲染时数据的绑定过程。比如 text 的 value 属性从一个匿名函数获取，它包装了 xml 中些的表达式：

    <text>{{count}}</text>

_c('text',
      {
        'attrs': {
          'value': function () {
            return _vm.count
          }
        }
      }),

而运行时，数据变化时，需要监控匿名函数的值变化，变化时会调用下面这个函数，它负责更新控件的属性。

jerry_value_t WatcherCallbackFunc(const jerry_value_t func,
                                  const jerry_value_t context,
                                  const jerry_value_t *args,
                                  const jerry_length_t argsLength)
{
    if (argsLength != ARG_LENGTH_WATCHER_CALLBACK) {
        return UNDEFINED;
    }

    START_TRACING(WATCHER_CALLBACK_FUNC);
    jerry_value_t value = args[0];
    const uint8_t optionIndex = 2;
    jerry_value_t options = args[optionIndex];
    jerry_value_t nativeElement = jerryx_get_property_str(options, ARG_WATCH_EL);
    jerry_value_t attrKey = jerryx_get_property_str(options, ARG_WATCH_ATTR);

    Component *component = ComponentUtils::GetComponentFromBindingObject(nativeElement);
    if (component != nullptr) {
        uint16_t attrKeyStrLen = 0;
        char *attrKeyStr = MallocStringOf(attrKey, &attrKeyStrLen);
        if (attrKeyStr != nullptr) {
            uint16_t attrKeyId = KeyParser::ParseKeyId(attrKeyStr, attrKeyStrLen);
            bool updateResult = component->UpdateView(attrKeyId, value);
            if (updateResult) {
                component->Invalidate();
            }
            ace_free(attrKeyStr);
            attrKeyStr = nullptr;
        }
    }
    STOP_TRACING();
    ReleaseJerryValue(attrKey, nativeElement, VA_ARG_END_FLAG);
    return UNDEFINED;
}

jerry_value_t Component::ParseExpression(jerry_value_t attrKey, jerry_value_t attrValue)
{
    jerry_value_t options = jerry_create_object();
    JerrySetNamedProperty(options, ARG_WATCH_EL, nativeElement_);
    JerrySetNamedProperty(options, ARG_WATCH_ATTR, attrKey);
    jerry_value_t watcher = CallJSWatcher(attrValue, WatcherCallbackFunc, options);
    jerry_value_t propValue = UNDEFINED;
    if (IS_UNDEFINED(watcher) || jerry_value_is_error(watcher)) {
        HILOG_ERROR(HILOG_MODULE_ACE, "Failed to create Watcher instance.");
    } else {
        InsertWatcherCommon(watchersHead_, watcher);
        propValue = jerryx_get_property_str(watcher, "_lastValue");
    }
    jerry_release_value(options);
    return propValue;
}

在 initState 函数中，关注了 data 的变化：

function initState(vm, data) {
  startTracing(PHASE_INIT_STATE);

  startTracing(PHASE_INIT_DATA_GET_DATA);
  if (typeof data === 'function') {
    data = data.call(vm, vm);
  }
  stopTracing(); // PHASE_INIT_DATA_GET_DATA

  startTracing(PHASE_INIT_DATA_PROXY);
  Object.keys(data).forEach(key => proxy(vm, data, key));
  stopTracing(); // PHASE_INIT_DATA_PROXY

  startTracing(PHASE_INIT_DATA_OBSERVE);
  Subject.of(data);
  stopTracing(); // PHASE_INIT_DATA_OBSERVE

  stopTracing(); // PHASE_INIT_STATE
}

2.4 条件渲染

条件渲染由_i 函数处理，它有两个参数：

  • 第一个参数是一个函数，决定是否进行渲染。

  • 第二个参数是一个函数，决定如何进行渲染。

如：

<input if="{{count < 10}}"type="button" value="Inc" οnclick="inc"/>

编译成：

_i((function () {
      return _vm.count < 10
    }),
      function () {
        return _c('input',
          {
            'attrs': {
              'type': "button", 'value': "Inc"
            }, 'on': {
              'click': _vm.inc
            }
          })
      }),

C++中对应这个函数：

jerry_value_t RenderModule::ConditionalRender(const jerry_value_t func,
                                              const jerry_value_t context,
                                              const jerry_value_t *args,
                                              const jerry_length_t argsNum)
{
    if (argsNum != ARG_LENGTH_RENDER) {
        HILOG_ERROR(HILOG_MODULE_ACE, "Failed to ConditionalRender cause by invlaid paramters. Expect 2 but %d",
                    argsNum);
        return UNDEFINED;
    }

    return DescriptorUtils::CreateIfDescriptor(args[0], args[1]);
}

数据变化时，重新进行根据条件进行渲染，执行下面的函数：

JSValue DirectiveWatcherCallback::Handler(const JSValue func,
                                          const JSValue context,
                                          const JSValue args[],
                                          const JSSize argsSize)
{
    if (argsSize != CALLBACK_ARGS_LENGTH) {
        return JSUndefined::Create();
    }

    JSValue options = args[ARG_IDX_OPTIONS];

    JSValue parentElement = JSObject::Get(options, DescriptorUtils::WATCHER_OPTION_ELEMENT);
    JSValue descriptor = JSObject::Get(options, DescriptorUtils::WATCHER_OPTION_DESCRIPTOR);

    Component *component = ComponentUtils::GetComponentFromBindingObject(parentElement);
    if (component) {
        component->HandleChildrenChange(descriptor);
    }
    JSRelease(descriptor);
    JSRelease(parentElement);
    return JSUndefined::Create();
}

关注数据变化的回调函数。

void Component::AppendChildren(UIViewGroup *viewGroup)
{
    if (JSUndefined::Is(descriptors_)) {
        return;
    }

    children_ = JSArray::Create(0);
    uint16_t size = JSArray::Length(descriptors_);
    for (uint16_t index = 0; index < size; ++index) {
        JSValue descriptorOrElement = JSArray::Get(descriptors_, index);
        if (!JSUndefined::Is(descriptorOrElement)) {
            bool isDescriptor = AppendDescriptorOrElement(viewGroup, descriptorOrElement);
            if (isDescriptor) {
                CreateDirectiveWatcher(descriptorOrElement);
            }
        }
        JSRelease(descriptorOrElement);
    }
}

void Component::CreateDirectiveWatcher(jerry_value_t descriptor)
{
    JSValue watcher = DescriptorUtils::CreateDescriptorWatcher(nativeElement_, descriptor);
    if (!JSUndefined::Is(watcher)) {
        InsertWatcherCommon(watchersHead_, watcher);
    }
}

这个做法我觉得很有创意：

  • 不需要搞虚拟 DOM 进行比较。

  • 不需要重新建立整个 DOM。

可以避免低端嵌入式平台的性能问题。

李先静
关注
专栏目录
华为鸿蒙系统小窗口,mate30pro升鸿蒙后小窗应用调不出来
weixin_36028243的博客
05-27 4580
[问题反馈]mate30pro升鸿蒙后小窗应用调不出来15297电梯直达huafen004964406新学乍练发表于 2021-3-12 07:42:37来自：HUAWEI Mate 30 Pro 5G最新回复 2021-3-14 12:06:18本帖最后由 huafen004964406 于 2021-3-12 08:13 编辑Mate30pro升鸿蒙后多窗应用调不出来Screenshot_20...
鸿蒙跨屏协作实现原理,跨屏协作满足效率党 高效工作这几款手机必备
weixin_35732670的博客
05-29 3215
对于职场办公人士来说，多设备办公室是常态。您是否仍对设备之间的交互感到烦恼？为无法在多个设备之间进行协作感到困扰？下面让我推荐几款支持“多屏协作”功能的手机。01华为“多屏协同”功能解决用户的需求和痛点从Mate30系列开始，华为带来了新的交互体验“多屏协作”功能，实现了华为手机和华为笔记本电脑的协作操作，数据流同和多屏同步。“多屏协同”功能解决了用户的需求和痛点，将革命性的分布式技术应用于整个场...
小程序组件化开发
2303_76218115的博客
03-30 1468
随着小程序的普及，越来越多的开发者开始使用小程序进行开发，而小程序的组件化开发已经成为了一种标配的开发模式。本文将深入介绍小程序组件化开发的相关知识，包括组件的定义、生命周期、通信和使用等方面，帮助大家更好地理解和使用小程序的组件化开发模式。组件是小程序中的一个重要概念，它能够将页面分解成独立的、可复用的部分，以便于开发和维护,组件可以包含一些特定的功能和样式，同时也能够接受外部的数据和事件。在小程序中，组件是通过Component构造函数来定义的。propertiesdata和methods。
一文讲明白鸿蒙的工作原理
最新发布
2401_86740986的博客
09-18 1950
专注于自己应用级的开发。操作系统还有一个优点就是高内聚，低耦合，做过开发的都知道，高内聚，低耦合一直是我们追求的目标，模块仅负责自己的功能，降低模块之间的联系，这样会降低很多开发上的麻烦。**随时代变迁，操作系统的接口也会发生变化，**从手扶拖拉机到全自动驾驶汽车，我们操作方式产生的很大的区别，但是产品的功能却没有很大的改变，这是由于技术的提升，我们可以以更加符合人性化的操作方式来与人进行交互，系统是要紧跟时代的，这也正是大家对鸿蒙操作系统寄予厚望的原因之一，因为它瞄准的是下一个时代，万物互联的时代。
鸿蒙系统如何添加桌面小程序,从微信小程序到鸿蒙js开发【04】——list组件
weixin_35882650的博客
06-03 2479
1、可滚动区域在许多场景中，页面会有一块区域是可滚动的，比如这样一个简单的每日新闻模块：上面的新闻类型是一块可横向滚动的区域，下方新闻列表是一块可竖向滚动的区域。在微信小程序中，使用scroll-view组件即可实现。那么在鸿蒙js组件中，想要实现可滚动的区域，则是使用list组件。list仅支持竖向滚动，横向滚动要用tabs，将在下篇博客讲解。2、list + list-item这里以本地新闻模...
鸿蒙os开发小程序,9岁小学生展示鸿蒙OS开发：这操作太秀了
weixin_31639069的博客
06-01 290
华为的鸿蒙 OS 正在迅速成熟，这背后离不开无数开发者的支持。近日，鸿蒙 OS 技术社区就向大家介绍了一位特殊的鸿蒙开发者，今年只有 9 岁，还是个小学生 ……在鸿蒙社区，这位小开发者坐在镜头前，向大家演示了鸿蒙 OS 的代码操作，行云流水，非常老道。这位 9 岁的鸿蒙开发者名叫戈帅，7 岁起就系统地学习 C、HTML、CSS、Java 语言，以及 Arduino 物联网开发。9 岁开始跟进最新技...
支持鸿蒙原生操作系统的小程序容器框架
POHOU23的博客
12-13 336
作为数字世界的底座，操作系统是破局的关键。在全场景时代，无论是全新的智能终端形态，还是革命性的产品迭代，都离不开操作系统的加持。华为鸿蒙操作系统自发布以来，以其独特的分布式架构、微内核设计以及出色的性能表现，迅速引起了业界和消费者的广泛关注和期待。与此同时，华为在 2023 年开发者大会上推出了面向开发者的鸿蒙 NEXT，这是一款去掉了 Linux 内核和 AOSP 代码的纯血鸿蒙系统，仅支持鸿蒙内核和鸿蒙系统的应用，减少了 40%的冗余代码，使系统的流畅度、能效、纯净安全特性大为提升。
字节面试题java，微信小程序之自定义模态弹窗，Android黑科技保活实现原理揭秘
rdytfuygiohi的博客
04-05 996
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节祝大家都能得到自己心仪工作。本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录。
鸿蒙HarmonyOS实战-窗口管理_鸿蒙nativewindow 获取窗口
2401_84181108的博客
04-21 1078
窗口模块是在同一块物理屏幕上提供多个应用界面显示和交互的机制。对应用开发者而言，窗口模块是一个重要的工具，它允许他们创建具有界面的应用程序，并提供了界面显示和交互的能力。通过窗口模块，开发者可以方便地管理窗口的创建、展示和关闭，并可以对窗口进行调整和布局，以满足用户的需求。而对终端用户而言，窗口模块提供了一种控制应用界面的方式。用户可以通过窗口模块来切换和控制不同应用程序的窗口，使得他们能够同时在屏幕上显示多个应用界面，并能够在这些界面之间进行交互和操作。
鸿蒙开发学习笔记
微光无限的博客
11-29 523
鸿蒙开发学习笔记
【HarmonyOS】培训第一课笔记
weixin_59062819的博客
01-14 268
一，软件安装 华为操作系统DevEco Studio和SDK下载与升级 | HarmonyOS开发者华为鸿蒙DevEco Studio是面向全场景的一站式集成开发环境,，在鸿蒙官网下载或升级操作系统开发工具DevEco Studio最新版本，SDK配置和下载，2.1支持Mac、Windows操作系统。https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta 选择适合自己的版本进行安装，不要装错了。 二，前端知识补充
鸿蒙与微信小程序,从微信小程序到鸿蒙js开发【14】——自定义组件
weixin_42533751的博客
05-27 785
在项目开发中，有些业务需求是需要通过多个组件共同实现的。为了便于模块化管理，减少代码的冗余，我们可以使用自定义组件，将多个组件融合成为一个组件。这部分官方文档中个人感觉讲述的不够详细和连贯，在此做一个总结。1、新建组件在项目工程目录上右键, New, JS Component即可新建一个组件，目录自动生成在js文件夹中，与default平级。2、前端设计自定义组件的目录结构和页面一致，这里做一个购...
2024年HarmonyOS鸿蒙最全微信小程序详解_小程序 div view p，面试要怎么练
2401_84857523的博客
05-14 678
定义模板有两种方式：方式一：直接在index.wxml中定义，并在index.wxml中使用，这种方式只能在当前页面中使用定义模板：使用 name 属性，作为模板的名字。然后在内定义代码片段使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：-- 定义模板 -->-- 使用模板 -->方式二：使用外部.wxml文件模板。
鸿蒙应用开发初试
woyebuzhidao321的博客
03-20 2394
一、简介 鸿蒙 (HarmonyOS) 是一款由华为开发的，面向全场景的分布式操作系统。其开源项目为 OpenHarmony。 超级小程序 H5 -> 小程序 -> 超级小程序 可剪裁系统 128 KB – 128 MB – 4 GB 模改通讯协议 类似普通话，统一了方言。鸿蒙成为 IoT 互联互通的标准语言 发布会现场 二、储备知识 熟悉前端技术栈（HTML、CSS、JS） 类 Web 范式编程（鸿蒙开发不是浏览器环境） 例如：鸿蒙中的 div 是自己封装的，不是
鸿蒙与微信小程序,从微信小程序到鸿蒙js开发【01】-环境搭建&flex布局
weixin_39979167的博客
05-27 1280
1、mac os的鸿蒙环境搭建华为官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528官方文档已经说明的比较详细了，我是使用mac os的开发者，在创建一个js项目后，Gradle下载完成，报出了如下错误：看起来像是华为镜像仓中找不到包，...
鸿蒙系统怎么在桌面添加小程序,从微信小程序到鸿蒙js开发【07】——menu&toast&dialog...
weixin_39899244的博客
05-28 2557
目录：1、menu弹出菜单2、Toast提示框3、prompt模块的对话框dialog4、dialog对话框组件1、menu弹出菜单这是微信小程序没有的一个组件，提供了一个可唤起的轻量级弹出菜单。menu的子组件为option。登录注册在hml中写好菜单，但这时启动app是不会显示出来的，且不会占用任何页面空间。menu需要在方法中被唤起，因此需要设置id属性。这里通过点击“点击登录/注册“文本框...
小程序概念及其开发原理（上）
luoyingdegesheng的博客
05-24 293
本章主要介绍小程序的定义、组成要素、以及开发原理。理解小程序的概念和组成要素，以及知道小程序的开发原理将有助于更好地理解、开发和优化小程序。
HarmonyOS2.0 华为鸿蒙开发学习实战教程
Aa112233aA1的博客
07-20 1787
据统计，鸿蒙系统升级用户2周破1800万，1个月突破3000万。升级速度完全超出市场预期，很显然，华为严重低估了消费者的支持热情。随即，华为鸿蒙目标多次升级，从2亿到4亿，后年目标12.3亿。 而且，目前国内有很多家软硬件厂商已经加入了鸿蒙。格力董事长董明珠在近日接受外媒采访时表示：格力将引入鸿蒙操作系统。 对应用开发者而言，HarmonyOS采用了多种分布式技术，使得应用程序的开发实现与不同终端设备的形态差异无关，降低了开发难度和成本。这能够让开发者聚焦上层业务逻辑，更加便捷、高效地开发应用。 作为万物互
鸿蒙与微信小程序,鸿蒙远程交互应用 vs 微信小程序远程交互应用
weixin_39756895的博客
05-27 309
原标题：鸿蒙远程交互应用 vs 微信小程序远程交互应用鸿蒙的远程交互组件应用相对复杂，访问网络时，首先要配置网络权限，华为官方文档有问题，在此引用我老师配置的模板，见附件。 过程：导入鸿蒙的网络请求模块 fetch。发起对服务器的请求。(在这过程中需要用 JSON.parse 将括号中的数据转换成 json 数据格式，具体见代码中标注 )01js 业务逻辑层//导入鸿蒙的网络请求模块fetchim...
小程序直接生成鸿蒙App的方法
POHOU23的博客
05-10 1516
再来说说用户生态，目前支持鸿蒙的原生应用可以说少之又少，就一些鸿蒙官方去推动进行签约的服务商，这种其实只能做一个代表效果，并不能推动大量长尾的企业和开发者主动响应，因为开发成本是让这些企业望而却步的关键。另外，相较于很多开发者提到的鸿蒙 App 开发过程中开发工具集（Harmony Developer Tools）不好用的情况，FinClip 提供了开发工具 FinClip Studio，界面和操作办法与微信小程序的开发工具类似，自带调试和真机预览，无需学习简单易上手。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值