鸿蒙开发者社区

第十四节上架发布应用开发完成后，提交Appgallery进行审核发布。本贴不详细介绍具体的操作，仅介绍一下本人提交多个APP后的经验，希望能帮到大家。1.先在appgallery新建项目—应用，每个项目下可以有多个应用。并获得应用的包名和appid。项目名称与应用名称可以不一样。开发者可自行分类管理。2.首先需要申请证书，证书需要两个，一个是扩展名为p7b的，对应应用；另一个扩展名为cer的对应开发者。Cer证书要选发布证书，每个开发...

第十三节倒计时与提示这个应用已经上架，现在版本为V1.9.5，跟本贴有一些不一样的地方。有兴趣的朋友可以下载体验。希望能在评论区看到您的建议。用户点击进入题目页后，需要增加一个倒计时，给用户一个准备过程，以提高做题速度。倒计时固定为3秒，思路仍然是一个自定义对话框。关于自定义对话框已在上一节说过了，这里只写倒计时部分。对话框中增加一个定时器，每0.1秒触发一次回调函数onCountDown。初始时计时值为3，每次回...

第十二节自动评分和结果显示用户点击“交卷”，应用开始评判。即将用户输入的答案，与自动生成的答案进行比较，同时计算正确率。以加减法为例，代码如下：lenthis.arrDataAdd.length;for(leti0;i<len;i++){if(this.arrDataAdd[i].RltNumber(this.textInput[i])){this.rltCorrect[i]true;correctCount++;}else{this.rltCorrect[i]false;}}correctRatecorrectCountlen;correctRateMath.floor(correctRate100);this.ScorecorrectRa...

第十一节题目的显示生成题目后，需要将题目显示在屏幕上。根据屏幕尺寸（手机平板）不同，显示的题目数量也不同。采用Grid组件盛放题目，每个题目使用Builder装饰的自定义组件实现。以加减法为例：生成的题目已存储于DataAdd数组中，采用ForEach遍历，代码如下：ForEach(this.arrDataAdd,(item:DataAdd,index:number){GridItem(){this.ComAdd(index)}},(item:DataAdd,index:number)index.toString())ForEach接口基于数组类型数...

第十节自动生成题目及答案本应用题目类型包括加减法、乘除法、方程等，题目生成基于随机数，但也有其他问题需要解决。以加减法为例，主要思路如下：1.限定加减法的数值范围，包括10以内、20以内、50以内、100以内：这通过限定生成的随机数的范围实现。2.限制加法题目两个加数不能相同：通过判断两个数是否相同，相同则重新生成一个数直到不同为止。3.随机的使题目为加法或减法：通过比较两个数的大小实现，如果第一个数大于第二...

第九节主页的菜单主页菜单显示了多个不同题目类型的选项，点击后可进入不同的题目类型。考虑到可以随时增加题目类型，并减少页面跳转时传递的信息量。设计了一个公用的类，用于封装题目类型的相关信息：exportdefaultclassEquationType{publicTypeName:string'';publicTypeTitle:string'';publicMemo:string'';constructor(name:string,type:string,Memo:string){this.TypeNamename;this.TypeTitletype;this.MemoMemo;}}TypeNam...

第八节自适应拉伸3本节讲述右侧数字按钮部分的一多适配设计。数字按钮是用来输入答案的。为什么要设计数字按钮，而不是用数字键盘呢？实际上最早的版本就是用的系统输入法，但是，在多个题目之间切换的时候，输入法一直在弹出、退出，非常影响使用。如果将输入法窗口固定不动，又会严重影响可使区域的面积。并且，系统输入法的数字键盘，不包括本应用的控制键（上一题、下一题等），更加影响了体验。因此，我设计了专用的数字键...

第七节自适应拉伸2这个应用已经上架，且已经更新过了，跟本贴有一些不一样的地方。有兴趣的朋友可以下载体验。希望能在评论区看到您的建议。题目页的主要区域，也就是下部区域，使用Row组件实现。Row组件内分为左右两部分，这里的设计思路是高度占满上级组件，宽度按比例分割。Row()主要区域{Flex({direction:FlexDirection.Column,wrap:FlexWrap.NoWrap})题目区和下部按钮{..}.width('75%').height('100%')Column(){…}.width(...

第六节自适应拉伸1上一节将题目页面做了分割设计，页面分为上下两部分，上部高度固定，下部自适应拉伸。使用Flex组件实现，Flex组件的接口direction属性设为direction:FlexDirection.Column，实现纵向排列，宽度和高度占满屏幕。上部组件的高度设为固定值，设置下部组件的.flexGrow属性即可实现Flex({direction:FlexDirection.Column}){Row()头部自适应延申.height('38vp').width('100%')Row()主要区域.width('100%').flexGrow(...

第五节题目页面题目页面比主页要复杂，包括信息显示、题目显示、操作按钮等，实现“一次开发，多端部署”的思路是，页面中需要有固定尺寸的组件，以及根据屏幕尺寸方向自动伸缩的组件，这里的尺寸包括宽度高度。同时，在内容上，因为屏幕尺寸方向不同，也要考虑到换行显示的问题。结合本APP，信息显示（页面标题、做题计数、做题计时、操作按钮、数字按钮等）其尺寸固定不变，题目区域的尺寸要根据设备类型和屏幕方向自适应伸缩...

第四节页面路由页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。页面跳转页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。以本APP为例，需要从首页跳转到题目页面。在首页中点击不同的菜单时，跳转到同一个题目页面，同时传递用户点击的菜单信...

第三节适配设备旋转用户旋转设备后，屏幕显示也应同时变化以适应宽度高度的不同。设计思路是监视组件尺寸，在尺寸变化时，刷新显示。上一节说到了主要是Grid组件内Item的排列变化。代码如下StateOrientV:booleantrue;Build(){Flex({direction:FlexDirection.Column}){代码略Grid(){代码略}.columnsTemplate(this.OrientV'1fr1fr':'1fr1fr1fr1fr')监视设备方向调整列数.rowsGap(15).columnsGap(15)行列间距.width('100%').flexGr...

第二节页面设计“丁斗口算”APP同时适配手机、折叠屏（包括折叠态和展开态）、平板的不同尺寸屏幕，同时适配竖屏和横屏。采用HarmonyOS一次开发，多端部署技术，仅用一套代码实现。APP在不同设备不同方向的展示效果如下：手机竖屏手机横屏折叠屏展开态横向折叠屏展开态竖屏平板横向平板竖向APP的首页相对简单，只有几个菜单选项。需要解决的问题有两个，第一个是适配屏幕尺寸，自适应拉伸菜单宽度。第二个是监测设备方向，竖向...

​“丁斗口算”是HarmonyOSNext下的一个用于练习口算的应用，已经上架应用市场，包括加减法、乘除法、解方程的计算练习。基于自适应布局和响应式布局，实现一次开发，多端部署的页面。同时适配手机、折叠屏（包括折叠态和展开态）、平板的不同尺寸屏幕，同时适配竖屏和横屏。欢迎朋友们下载体验。本文记录了从环境搭建、代码编写、调试以及应用上架的过程，并总结了一些经验。第一节开发环境的搭建开发工具使用DevEcoStudio，并...