更多内容请访问：https://harmonyos.51cto.com，与华为官方共同打造的鸿蒙技术社区简介1.本文目的1.本文文章是读书笔记，学习笔记。包含书中内容的对比总结、重点提炼、知识补充、思维导图。在JSUI开发的学习过程中，我们会重点关注与JavaUI开发的区别。2、鉴于官方文档中关于JSUI的讲解非常零散，没有重点，需要大家在北方学习HCIA的路上借助书籍和视频。在不久的将来，你将通过三本书学习JSUI开发，跟老祖宗一起学，一起做。做笔记，总结三本书对这块知识的讲解，最后分析官方的JSUI示例工程。书是《鸿蒙应用程序开发-董昱》、《鸿蒙操作系统应用开发实践-中科院》、《鸿蒙操作系统开发入门经典-徐文礼》2.学习心得《鸿蒙应用程序开发-董昱》1.代码很规范！不是直接取自官方文档的示例代码，非常小心。该文件的位置位于示例代码块上方！！！！无需担心应在何处键入代码。3.JSUI官方文档中的知识很散乱，没有重点。董宇老师的讲解很系统。4.董宇老师对参数的解释很好。5.方法和概念的说明到位6.最后也是最关键的一点！冬雨老师的《鸿蒙应用程序开发》有免费配套课程！！！！鸿蒙App开发视频教程7.学习官方JS开发文档。下面两个文件比较好。HarmonyOS官方文档-JSAPI参考HarmonyOS官方文档-开发-UI-JSUI框架一、JavaScriptUI设计5.0概述JavaUI和JSUI的区别JavaUI开发Android（基于事件的编程范式）JSUI开发Web前端(declarativeProgrammingParadigm)接触JSUI更倾向于界面开发。在复杂的业务逻辑方面，需要Java来帮忙。轻量级智能穿戴设备上的JSUI会更轻一些，并不是所有的JSUI特性都可以使用。HML与HTML的区别HML：鸿蒙标记语言，表达用户界面结构HTML：HypertextMarkupLanguage，描述网页文档文件类型HTML和HML的用法和相似性类变化前：Ability现在：AceAbility主要管理JS目录下的文件。关于:common.images文件夹的疑惑，其实只是形式上的一点变化，并不会影响到。2.实例和页面实例（JavaScript实例）：一组与功能相关的用户界面和功能默认实例名称分别为defaultinstance和Ability，每个独立的instance由一个独立的Ability管理，默认实例由MainAbility实例和Page默认管理在例子，可以创建多个用户界面，每个用户界面调用一个页面（Page）实例，页面，Ability可视化关系图，JSUI的页面（Page）和JavaUI的接口（AbilitySlice），具体逻辑类似implementationandinterfaceUI用于承载单个页面，它是应用程序显示、操作和跳转的最小单位实例配置位置：config.json属性：name：实例名称，defaultdefaultpages：声明实例包含的页面Page属性是一个页面路径数组。页面路径是以实例目录为根目录的路径，不带后缀。window:声明虚拟像素相关的选项designWidth:虚拟宽度（此时px像素也是虚拟的）autoDesignWidth:是否启用（fasle且如果没有设置虚拟宽度，则px为实际物理宽度）代码：(2)概念补充关于视觉中的基本概念补充应用设备的虚拟尺寸（区别于屏幕硬件本身的像素单位）。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。字体像素单位：fp字体像素（fontpixel）大小默认与vp相同，即默认1fp=1vp。如果用户在设置中选择了较大的字体，则字体的实际显示尺寸会在vp的基础上乘以缩放系数，即1fp=1vp*scale。补充HarmonyOS官方文档-NativeAPI-JSAPI-语法-CSS语法参考逻辑像素px（文档中有注明）：1、默认卡片逻辑宽度为150px，实际显示时页面布局会缩放为150px屏幕的实际宽度，比如100px在宽度为300的卡片上，实际渲染为200个物理像素（从150px到300个物理像素，所有尺寸都放大了2倍）。2.当autoDesignWidth额外设置为true时，逻辑像素px会根据屏幕密度缩放。比如100px在屏幕密度为3的设备上实际渲染为300个物理像素，当app需要适配多设备时推荐使用此方式。5.1.2新建JS实例新建JSUIPA有两种方式，同时创建实例解决疑惑：LauncherAbility只新建一个实例。Ability和instance的规范类似于Java中Ability和AbilitySlice的规范。setUIContent()Js通过setInstanceName()注：1.默认情况下，MainAbility加载默认实例，不需要通过setInstanceName()传入default的实例名称字符串。2、setInstanceName(Stringname)的参数“name”指的是实例名，对应config.json文件中module.js.name的值。5.1.3第一页介绍JS开发目录，重点介绍i18n目录的由来、结构和使用。其他内容参见HarmonyOS官方文档-开发-UI-JSUI框架-初步体验JSFA应用-JSFA概述5.1.4页面跳转（一）概念页面栈：在JSUI中，支持页面的层级结构，即上层页面覆盖下层页面，形成栈结构。页面路由：页面的跳转关系称为页面路由，由JSUI的router模块管理。需要在js文件的exportdefault代码块之前importimportrouterfrom'@system.router'；(2)路由器模块ctrl+鼠标鼠标左键点击路由器进入后，总结翻译英文注释的方法方便记忆（老师在书上也解释了参数，很好）push(obj:RouterOptions:jump(overwrite)replace(obj:RouterOptions):jump(destroy)back(obj?:BackRouterOptions):returnclear():clear(coveredpages)getLength():栈中的页数getState():获取当前页面的状态信息，返回IRouterState对象，该对象包括索引、名称、路径。index:integer,表示当前页面在页面栈中的位置，从下往上从1开始计数name:string,表示当前页面的文件名path:string,表示当前页面的路径/***@SyscapSysCap.ACE.UIEngine*/exportdefaultclassRouter{/***NavigatstoaspecifiedpageintheapplicationbasedonthepageURLandparameters.*根据页面URL和参数导航到应用程序中的指定页面。*@paramobj*/staticpush(obj:RouterOptions):void;/***用应用程序中的另一个页面替换当前页面。替换后当前页面被销毁。*用应用程序中的另一个页面替换当前页面。*用应用程序中的另一个页面替换当前页面。*用应用程序中的另一个页面替换当前页面。替换后，当前页面将被销毁。*@paramobj*/staticreplace(obj:RouterOptions):void;/***返回上一页或指定页面。*返回上一页或指定页面。*@paramobj*/staticback(obj?:BackRouterOptions):void;/***清除所有历史页面，只保留当前页面在栈顶。*清除所有历史页面，只保留当前页面在栈顶栈的页数。**/staticclear():void;/***获取当前栈的页数。*获取当前栈的页数。*@returnsNumberofpagesinthestack.Themaximumvalueis32.*/staticgetLength():string;/***获取当前页面状态信息。*获取当前页面状态信息。**@returnsPagestate.*/staticgetState():RouterState;}入栈出栈对应方法push：将新页面放入栈中back：将当前页面弹出栈replace：弹出当前页面出栈并替换新页面入栈clear:把当前页面in后面的所有页面都出栈(3)实现index页面跳转到secpage页面index.js实现跳转代码//index.js//导入路由模块importrouterfrom'@system.router';exportdefault{data:{harmony:null},onInit(){this.harmony="董宇老师YYDS"},//跳转到secpage方法toSecPage(){//Push方法入栈router.push({//指定跳转位置uri:'pages/index/secpages/secpages',//传输数据params:{harmony:this.harmony}});}}经过一些基本设置后，动画就会呈现出来！(4)使用传过来的数据，并从SecPage返回索引，从secpage.js中的索引中接收数据，通过console.info(message)方法输出HiLog形式的字符串变量//secpage.jsimportrouterfrom'@system.router';exportdefault{data:{title:'跳转成功'},onInit(){//输出Harmony字符串console.info(this.harmony);},back(){router.back();}}5.1.5对于页面生命周期功能，书上没有官方文档详细解释，图解也不是那么容易看懂，所以我们采用补充的方式HarmonyOS官方文档-JSAPIReference-手机、平板、智能屏和智能穿戴开发-框架说明-生命周期（一）页面生命周期（总结+补充）页面生命周期（书中只提到从初始化到销毁的前5个生命周期）（2)页面A的生命周期接口调用顺序打开页面A：onInit()->onReady()->onShow()打开页面B页面A：onHide()从B页面返回A页面：onShow()退出A页面：onBackPress()->onHide()->onDestroy()隐藏页面后台运行：onInactive()->onHide()恢复页面从后台运行到前台：onShow()->onActive()注：调用生命周期函数，可以通过consolele.info()打印，通过onBackPress()方法监听系统返回事件。在一个完整的页面生命周期中，至少会调用一次，onInit()、onReady()、onDestroy()只能调用一次（三）JavaUI和JSUI中页面能力比较（补充）相关官方文档JSUIHarmonyOS官方文档-JSAPI参考-手机、平板、智慧屏、智能穿戴开发-框架说明-生命周期JavaUIHarmonyOS官方文档-开发-能力框架-页面能力-页面能力生命周期组件单元Page的是JavaUI中的AbilitySlice（AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI是应用程序显示、运行和跳转的最小单位）JSUI是JavaScript实例（见5.1.1）生命组件单元的cycle和PageAbility生命周期组件单元的生命周期取决于Page的生命周期cycle组件单元的生命周期类似于Page的相应回调，但是组件单元也具有独立于页面的生命周期变化。比如在同一个Page的AbilitySlices之间导航时，此时Page的生命周期状态是不会发生变化的。GraphicalJavaUIJsUI5.1.6applicationobject(applicationlifecycle)(1)applicationlifecycle(4)需要注意的是，在任何页面中，都可以通过this.$app代码获取当前应用对象，以及应用对象的生命周期应用本身Cycle，开发者可以在应用对象中实现JavaScript全局变量。数据库的管理可以在onCreate()和onDestroy()这两个方法中实现，例如：在前一个方法中进行一些初始化操作（网络连接，查看账户），在后一个方法中检查数据库是否关闭，如果没有，则立即关闭。(2)共享应用对象的变量（全局变量）应用对象是一个单实例，所有页面都可以调用应用对象中定义的变量。在app.js中添加一个变量jumpCount记录用户页面跳转次数，然后创建这个变量的Get/Set方法//app.jsexportdefault{data:{jumpCount:null},//获取页面跳转次数getJumpCount(){returnthis.jumpCount;},//设置页面跳转次数setJumcount(){this.jumpCount=count;},//页面跳转次数+1increaseJumpCount(){this.jumpCount++;},onCreate(){this.jumpCount=0;//初始化页面跳转次数为0console.info('AceApplicationonCreate');},onDestroy(){console.info('AceApplicationonDestroy');}};对于index.js并相应地设置secpage.js。最后的日志。更多信息请访问：Harmonyos技术社区https://harmonyos.51cto.com与华为官方共建
