WesLuo

WesLuo 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

WesLuo 发布了文章 · 9月28日

鸿蒙OS应用开发:双向数据绑定

原文链接:https://mp.weixin.qq.com/s/6v...

西江月·太极未分混沌

[元] 王惟一

太极未分混沌,两仪已非其中。

一阳才动破鸿蒙,造化从兹运用。

水火升沉南北,木金间隔西东。

略移斗柄指坤宫,尽把五行错综。

自Angular.js面世后,给前端界带来MVVM(Model-View-ViewModel)的分层架构思想,这也对几乎所有的主流前端框架影响颇深,Angular.js也带来另一个流行概念:双向数据绑定,这个主要体现在表单控件与其他控件的内容联动上,即使除了Vue以外的其他流行框架(React、Augular2.0 以后)都不再有双向数据绑定的语法糖,但在实际项目中,所有的前端开发人员都会去实现这一特性。

鸿蒙OS的JS应用框架延用的是一种类小程序的Web开发方式,同React和微信小程序一样,以单向数据流的形式连通JS脚本变量与标记语言(html、wxml、hml)实现的界面,因此自主实现双向数据绑定也就成了绕不开的话题

今天就在鸿蒙OS应用开发中实现双向数据绑定,顺便填平一些坑,先上核心代码。

index.hml代码如下:

<div class="container">
 <text class="title">
 {{title}}
 </text>
 <!-- 坑点1:官方文档给出的事件属性都没有on前缀,实际使用自己要加上:onclick、onchange等 -->
 <!-- 坑点2:穿戴设备不支持input单行文本;只有TV项目支持;-->
 <input type="text" onchange="chageModel"
 value="{{title}}"
 style="width:300px;height:50px;color:blue;background-color:#fff"/>
 <!-- input控件属性:type="text" 指定为单行文本控件 -->
 <!-- input控件属性:value="{{title}}" 文本框值绑定js脚本变量title -->
 <!-- input控件属性:onchange="chageModel" 文本框内容改变触发自定义函数chageModel -->
 <!-- input控件属性: 行内样式属性与CSS基本相同 -->
</div>

index.js代码如下:

export default {
 data: {
 title: "", //js脚本变量title
 },
 onInit() {
 this.title = "鸿蒙OS双向数据绑定";
 },
 chageModel(val_obj){
 //obj是事件对象,官方文档有坑
 console.info("info信息:"+JSON.stringify(val_obj));
 console.log("log信息:"+JSON.stringify(val_obj));
 //坑点3:console.log和console.info都不能打印对象,要通过JSON.stringify转化;
 //坑点4:valobj的取值属性是text;
 this.title = val_obj.text;
 //UI框架是单向数据流,要事件驱动完成双向数据绑定
 }
}

实现的代码非常简单,主要填了4个坑:

  1. 官方文档给出的事件属性都没有on前缀,实际使用自己要加上:onclick、onchange等 
  2. 穿戴设备不支持input单行文本,这个官方文档没有提到;
  3. console.log和console.info都不能打印对象,要通过JSON.stringify转化;
  4. onchange事件对象参数valobj的取值属性是text ,官网给出的对象形式是{ value:inputValue },这个要通过打印对象才能判断出来

这些坑都不是很大,有开发经验的同学基本都能很快填平,也可以阅读参考官方给出的案例showcase。

附上文档链接:

input组件参考文档:

https://developer.harmonyos.c...

官方showcase代码:

https://openharmony.gitee.com...

附上console.log和console.info打印控制台截图:

查看原文

赞 1 收藏 0 评论 0

WesLuo 发布了文章 · 9月26日

鸿蒙OS 2.0应用开发初潮

原文链接:https://mp.weixin.qq.com/s/FkQ6oCoSuStBCqYL0crhWg

盘古一笑鸿蒙开,神马负图从天来

八卦旋转六十四,黄锺是为元气胎

 —宋代 林光朝 


2020年9月10日华为开源了面向小型嵌入式设备的鸿蒙OS2.0,本人也连夜浅读了一下公开的代码仓库,看到文档中写到开发需要用到开发板,就以为面向应用层面的工具不会那么快推出的。

在9月11日写完推文后,搜索到一篇博文,从而跟着线索找到了华为官方关于鸿蒙OS应用开发的相关文档,虎躯为之一震,发现鸿蒙OS应用开发的各个方面已经相当齐全,已经有了较完善的开发指南和开发工具HUAWEI DevEco Studio,我发现自己对鸿蒙OS的期望值还是过低了。

HUAWEI DevEco Studio(以下简称DevEco Studio)是基于IntelliJ IDEA Community开源版本打造,面向华为终端全场景多设备的一站式集成开发环境(IDE)。

DevEco Studio还具有如下特点

1.多设备统一开发环境,包括智慧屏、智能穿戴,轻量级智能穿戴设备。

2.支持多语言的代码开发和调试:包括Java、XML(Extensible Markup Language)、C/C++ 、 JS(JavaScript)、CSS(Cascading Style Sheets)和HML(HarmonyOS Markup Language)。

3.支持 FA(Feature Ability)和 PA(Particle Ability)快速开发:通过工程向导快速创建FA/PA工程模板,一键式打包成HAP(HarmonyOS Ability Package)。

4.支持多设备模拟器:提供多设备的模拟器资源,包括智慧屏、智能穿戴等设备的模拟器,方便开发者高效调试。

也就是说DevEco Studio是类似于Android Studio和XCode开发工具,提供给多个主流技术领域(Java、C/C++、JS)的开发者去使用,能开发多种设备的应用APP,还提供了较多较为完善的设备模拟器。

压住内心狂喜的我在快速浏览完所有入门文档后已然面泛潮红,身体里好像有什么东西呼之欲出!

HarmonyOS 开发者文档地址:

https://developer.harmonyos.c...

DevEco Studio下载地址:

https://developer.harmonyos.c...

DevEco Studio安装指南:

https://developer.harmonyos.c...

开发工具安装步骤这里就不再重复,文档中已经写得非常全面了,大家仔细阅读即可,但是还是就着在安装过程中遇到的问题做些提示,以便大家能顺利入门:

提示1

•文档中很多文字介绍的安装方式都是在“如果网络不能直接访问Internet”的前提下进行的,这个要仔细阅读文档;

提示2

•DevEco Studio安装后会自行下载SDK,但下载后默认存放的地方是C盘的用户目录,可以把SDK拷贝出来后通过Configure->Settings,打开配置界面后,可以参考下图1、图2 进行操作

图1

图2

提示3

创建项目,Device选择的是Wearable, Teamplate选择的是JS,如图3,但官方文档选择Java

图3

提示4

创建项目后,第一次需要用到Gradle下载gradle-5.4.1-all.zip,这个我也卡了相当久,因为家里宽带是移动的,后来实在忍不了开了电信手机号的热点,下载编译梭梭就上来了(论网络的重要性),当然如果有Android开发经验的同学设置一下代理估计就可以了。

提示5

当看到Run控制台上编译完成,显示绿色对勾后,即可运行项目了,但是需要模拟器,鸿蒙OS设备模拟器的使用是需要用到已经实名的开发者账号,如果嫌实名审核慢,可以申请加入其他开发者的团队账号中,具体运行项目如图4、图5、图6,最终效果图7、图8;

图4

图5

图6

图7

图8

以上是本人在初体验鸿蒙OS应用开发后,给出的一些提示,希望同学们少走弯路,安装细节还是要看文档,官方文档可读性超级好!!

鸿蒙OS应用开发总体给我感觉是极大限度的照顾开发者,最值得一提的就是这个模拟器,虽然需要开发者实名登录,但基本不像Android Studio和Xcode那样下载很大的模拟器到本地安装,快速便捷的同时还减少了开发者本地设备的资源开销;当然所有的技术刚开始都会有坑,但在这次体验过后,感觉到我的那个洞在惊呼声中开了又开,想象出了很多未来的可能性,下期带大家入门开发,敬请期待!!!

 部分素材来源网络,如有侵权请联系删除

查看原文

赞 1 收藏 0 评论 0

WesLuo 发布了文章 · 9月11日

鸿蒙OS 2.0 开源蹭热浅读

开篇

事情在未做之时并无形式,亦无规则,有人做了,就有了形式和规则,要把事儿做好,不能执著于已有的形式和规则,要放下成见,打破对形式的迷信,须从最初还没有这种形式之时重新思考,方能悟得真理!

2020年9月10日18时18分,华为正式开源鸿蒙 OS 2.0 版本:

开源项目:www.openatom.org/openharmony

代码仓库:openharmony.gitee.com/

我也像许许多多的技术爱好者那样睡不着,那就趁热,九浅一深地撸一下

01 开源时间线

9月10日教师节这天只是个开始,发布的是面向内存128KB-128MB 终端设备开源系统。2021年4月将发布面向内存128MB-4GB终端设备的开源系统,2021年10发布面向4GB以上所有设备。

从上图可以得出几个信息:

  1. 按设备内存容量从小到大逐步开源;
  2. 面向内存128KB-128MB 终端设备,即从9月10日18时18分开始,物联网厂商可以着手利用鸿蒙OS开发小型智能设备了;
  3. 2021年4月开源的系统将面向手机、平板等移动终端;
  4. 2021年10月以后开源的系统将面向PC、智慧屏、服务器。

也许,到这里也许有人就会问,手机内存4G够用?我手机运存都6G、8G了!!!

也许还有人会笑,还能做服务器?别傻好吗!!!

02 开源系统组成

从上图我们看到6个部分,其中4个为系统关键,分别是:

1.kernel_liteos_a(轻量级内核);

  1. communication_services_softbus_lite(IO及网络传输);
  2. ace_lite_jsfwk(应用界面开发);
  3. distributedschedule_services_samgr_lite(系统底层、驱动等);

不同技术的同学对号入座,关注以下自己所在技术领域的源码。

我是做应用层面的,以下不会过多关注底层的内容。

03 应用界面开发

轻量级JS核心开发框架,什么鬼,走React Native(RN)的老路子吗,怀疑是火狐OS的换壳?好技术值得借鉴,继续看官方简介!

JS应用开发框架,提供了一套跨平台的类web应用开发框架,通过Toolkit将开发者编写的HML、CSS和JS 文件编译打包成JS Bundle,然后再将JS Bundle解析运行成C++ native UI的View 组件进行渲染。通过支持三方开发者使用声明式的API进行应用开发,以数据驱动视图变化,避免了大量的视图操作,大大降低了应用开发难度,提升开发者开发体验。

读完后我看到的是感动,只能说鸿蒙OS满载诚意而来:

  1. 极低的开发门槛HML(Harmony Mark Language),其实是类似Html的Web端开发语言,其他CSS和JS就不用多说了;
  2. 再看JS Bundle,这个不再是像RN那样调用Android的组件,而是解析成超高性能的C++ native UI的View 组件进行渲染,意味着鸿蒙OS没有Java虚拟机;
  3. 当然了要深度定制UI组件,优化UI性能,最好要精通C++的哦;

至此,我相信将来鸿蒙OS真的可以跟苹果IOS钢上一脚,甚至超越,因为对开发者极度友好,泱泱中华不缺前端工程师、架构师,能快速构建应用生态;再者是系统刨去Java虚拟机后系统性能极佳,不再耗费1到2G去跑虚拟机后,撑死了只要4G运存,搭载鸿蒙OS的手机真的能腾云十万八千里!!!

附上一张JS应用框架模块架构图:

04 分布式通信子系统

来看看鸿蒙OS一上来就主打的分布式通信子系统:

  1. 服务发布:服务发布后周边的设备可以发现并使用服务;
  2. 数据传输:根据服务的名称和设备ID建立一个会话,就可以实现服务间的传输功能;
  3. 安全:提供通信数据的加密能力;
  4. 速度:分布式文件系统比业界做的最好的 Samba 系统最低速度快四倍。

猜想:安装了鸿蒙系统的多台服务器间自带心跳检测,提供天然的分布式服务,带有SessionID的会话控制让业务可控性更高,能解决现有分布式服务架构的一些难点及痛点,可以直接进行主从服务器快速切换,也服务器的扩展、扩容提供相当便捷的方案,甚至可以媲美大数据架构Hadoop的HDFS。

05 最后

鸿蒙是天地之初的一团元气,是神话的起源,是生灵存活的根本,更是孕育出璀璨智慧文明的教育者,鸿蒙2.0选择教师节发布表明了决心,表明了要突破美国技术封锁的坚定态度,更是大国技术担当应有的姿态!

鸿蒙,未来可期!!!

结语:写完后,热泪盈眶,文章仅仅是本人浅读后的一些观点和猜想,如有不对,请及时指正,大神勿喷;本文素材部分来源网络,如有侵权,请联系整改。

查看原文

赞 2 收藏 0 评论 0

WesLuo 关注了用户 · 9月11日

y_ck @user_ngjv5fmp

Hi there,I'm yck 👋

目前任职于酷家乐业务架构组,有需要的内推的可以发邮件至 zx597813039@gmail.com。

关注 283

WesLuo 关注了用户 · 9月11日

敖丙 @aobing

关注 3795

WesLuo 关注了专栏 · 9月11日

力扣加加

努力做西湖区最好的算法题解

关注 3239

WesLuo 关注了用户 · 9月11日

沉默王二 @itwanger

《Web全栈开发进阶之路》作者
公众号:沉默王二
微信:qing_geee
专注于有趣的Java技术,有益的程序人生

关注 1620

WesLuo 关注了用户 · 9月11日

铂赛东 @bosaidong_5c495684bcf4b

开源作者&内容创作者,专注于架构,开源,微服务,分布式等领域的技术研究和原创分享

欢迎关注公众号:「元人部落」,你能第一时间获取到我的原创内容

关注 2416

WesLuo 关注了用户 · 9月11日

xiangzhihong @xiangzhihong

著有《React Native移动开发实战》、《Kotlin入门与实战》和《Weex跨平台开发实战》,即将出版《React Native移动开发进阶》,正努力完成《Flutter跨平台开发实战》

关注 4798

WesLuo 关注了专栏 · 9月11日

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 24976

认证与成就

  • 获得 4 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 9月11日
个人主页被 148 人浏览