背景 ?着 OpenHarmony ?件??大??果公布，我?的??成?被告知?得了二等?，在?心之余也想?我??段????的?????下??大家分享，?我?看到??通知的?候已?是 9 月中旬的?候，此?已?是作品可以提交的??了，?考了一些其他作品??，基于 Canvas ??的?件目前??有，那我?就?始???一?基于 Canvas 和通用?件一起??的?件，在?之前由于??有??? OpenHarmony ?用，我???成?都?有相?的??，大家?零?始在摸索，我?首先分工合作，有的成???去下? IDE 和????，有的成????究和??官方文?。 配置 在??完官方文?之后，我?成?分?在自己本地??和??上做了以下的?境配置： 下??安?好 DevEco Studio 2.1 Release 及以上版本 ?取 OpenHarmony SDK 包?解? 配置 OpenHarmony SDK 在 DevEco 主界面，点?工具?中的 File > Settings > Appearance & Behavior > System Settings > HarmonyOS SDK 界面，点? HarmonyOS SDK Location 加? SDK ： 然后一直点? Next 和 Finish 完成?境配置。 安??外包，?入 OpenHarmony-SDK-2.0-Canary/js/2.2.0.0/build-tools/ace-loader 目?，然后在?目?下?行命令行工具，分??行如下命令，直至安?完成 npm cache clean -f npm install 下? OpenHarmonyJSDemos ?目工程，?工程?入 DevEco Studio 申??配置??，注意 OpenHarmony ? HarmonyOS 的??不通用，所以需要?外?行申? ?行???建，生成一? HAP ?用安?包，生成 HAP ?用安?包，安?到 OpenHarmony ??板 安??行后，在??板?幕上点??用???可打??用，?可在??上?看?用示例?行效果，以及?行相??? 除了使用?机??，我??可以使用?程??和本地的 Previewer ??，?然非常相?方便，但??表?肯定和?机是有稍微差?的 前言 在?? Canvas ?用之前，我???一些商量和??，首先是希望能借助?一次??提升? OpenHarmony 的理解，方便后???的支持，其次我???成?也是希望能拿到比?好的名次和??，我?注意到比?的?分由?委打分，?分? 100 分，?里?根据作品的?意性、?用性、用???、代??范等四??度点?打分， Canvas 的?用首先??成本?比普通?用?度稍微大点，?且不好??，在?意性和?用性上我???不大，因?大部分前端??者接?到的 Canvas ?用都是游?相?的，所以??路注定是?相???的，用???也是一??大的?点，我??机???? Canvas 的表?也不是?好，比原生一些?件的??差?多，?于??成?的代??量是有信心的，但是代??范的?分比重却是最少的，所以在立?的?候我?有比?大的分?。 ???度 ?明 分? ?意性 作品的?新程度 30% ?用性 作品在?用?景中的???用程度 30% 用??? 用???价?，用?能??松使用?件，??得良好??感 25% 代??范 代?的?量，美?度，是否符合?范 15% ?? 正因?由上面??的疑?，我?先制定了三???和一?目?： 使用基??件和容器?件等??通用?件 - OpenHarmonyGallery 使用?布?件?? Canvas 游? - OpenHarmonyFlappyBird 使用基??件，容器?件和?布?件?? Canvas 渲染引擎 - OpenHarmonySheet 渲染引擎是我?最?目?，?然?度偏大，但我???成??定分?三步????目?，首先至少先??使用基??件和容器?件，然后再??使用?布?件，最后?合?些????一?渲染引擎。 初?? 我?首先??了一?通用的?廊?件?作??手?目，?主要使用了四?基??件和容器?件： 我?放置一?按???? showGallery 方法，?方法控制 panel ?出式?件的?示和?藏，?里的 div 和 button ??就是 hml ?置的?件，?我?平常? html ?相似，?支持我?大部分的常??性如 id ， class 和 type 等，方便我?用??置?件基本??和外?特征?示。 < div class =" btn-div " > < button type =" capsule " value =" Click Here " onclick =" showGallery " > </ button > </ div > 然后我? panel ?件中放置可?更的?廊?容展示?口，?? mode 和 src ?成可?置的?量，???廊?件就能根据模式??廊?件?示不同的形?，根据?入的?片地址?示不同的?片?容，?里的?法?微信小程序?和 Vue ?架相似，都可以使用 Mustache ?法?控制?性?。 < panel id =" gallery " class =" gallery " type =" foldable " mode =" {{modeFlag}}} " onsizechange =" changeMode " > < div class =" panel-div " onclick =" closeGallery " > < image class =" panel-image " onclick =" closeGallery " src =" {{galleryUrl}}} " > </ image > < button class =" panel-circle " onclick =" closeGallery " type =" circle " icon =" /common/images/close.svg " > </ button > </ div > </ panel > ??完??和布局之后，我?就可以在同?目?下 index.js 中?充?廊?件的??，由于支持 ES6 ?法，我??的也?舒服?高效，?里的 data 是?廊?件的?据模型，?型可以是?象或者函?，如果?型是函?，返回?必?是?象，注意?性名不能以 $ 或 _ ??，不要使用保留字，我?在?里? modeFlag 和 galleryUrl ?置默??。 export default { data : { modeFlag : "full" , galleryUrl : "https://pic1.zhimg.com/v2-3be05963f5f3753a8cb75b6692154d4a_1440w.jpg?source=172ae18b" , } , } ; 而?示和?藏??比???，只需要?取 panel 的?点，然后?? show 或者 hide 方法?可，?然除了?方法，我??可以使用 渲染?性 ???： for 根据?置的?据列表，展??前元素 if 根据?置的 boolean ?，添加或移除?前元素 show 根据?置的 boolean ?，?示或?藏?前元素 showGallery ( e ) { this . $element ( 'gallery' ) . show ( ) } , closeGallery ( e ) { if ( e . target . type === 'image' ) return this . $element ( 'gallery' ) . close ( ) } , 我??可以在同?目?下在 index.css ?充?件的?式，可以?我?的?廊呈?更好的效果，?里???式?支持??的旋?、平移、?放和??效果，均可在 style 或 css 中?置。 . panel-div { width : 100 % ; height : 100 % ; flex-direction : column; align-items : center; justify-content : center; } 整???的效果如下?所示，效果??粗暴，?完了?? DEMO 之后，我???成?? OpenHarmony 的基??件?用有了最基本的了解： ?? ?然上面我?掌握了最基?的?件使用，但我??是?使用到 Canvas ?布?件，所以我?????官方文?，?? OpenHarmony 是提供了?全的?布接口： 我?使用?典 FlappyBird 游?作?我??布?件的第一次??。 收集素材 首先我?先准?好游?的?片和??素材： 素材 背景 小? 地面 水管 然后我?准?好?布，?置好高度和?度，????布按下的方法 ontouchend 。 < div class =" container " > < canvas ref =" canvas " style =" width: 280px; height: 512px; " ontouchend =" moveUp " > </ canvas > </ div > ?据初始化 准?好?布之后，我?就需要初始化游?的初始?据，核心的主要涉及??： el ?布元素 gap 管道?距 score 得分 bX 小? X ?坐? bY 小? Y ?坐? gravity 重力指? pipe 管道?据 birdHeight 小?高度 birdWidth 小??度 pipeNorthHeight 上?管道高度 pipeNorthWidth 下?管道高度 cvsHeight ?布高度 cvsWidth ?布?度 fgHeight 地面高度 fgWidth 地面?度 ????游?之前，我?不但需要掌握基?的?件，?需要了解一部分生命周期， OpenHarmony 有??生命周期，分?是?用生命周期和?面生命周期，我??里第一次?用到生命周期 onShow ，?是在?面打?的?候??，?且?用?于前台???，我?需要?在?始的?候?我?初始化一些???据，?取?布的?点，保存?布的上下文作用域 ctx ，?空管道?据和??游???制。 onShow ( ) { this . el = this . $refs . canvas ; this . ctx = this . el . getContext ( '2d' ) ; this . pipe [ 0 ] = { x : this . cvsWidth , y : 0 , } ; requestAnimationFrame ( this . draw ) ; } , ?里的 this.draw 方法是整?游?的核心??，涉及小?的?行??，???迹，?界?理和得分?算。 首先我???布的左上角 X 和 Y ?的起始位置?始?制游?的背景。 const ctx = this . ctx ; ctx . drawImage ( this . bg , 0 , 0 ) ; 然后我??制小??行?程中出?在天空和地面的管道，?里需要?算天空的管道位置，上管道的位置需要用??管道??的?距加上下管道的高度的出?的，?位置?算出?后，只需要配合定?器或者 requestAnimationFrame ???更新管道和?的位置就能?用?感知游????面的效果，?里我使用了 requestAnimationFrame ?求??????更好，但是?? API Version 6 才?始支持，?且不需要??入，所以?者需要留意?的 SDK 是否是比?新的版本。 for ( let i = 0 ; i < this . pipe . length ; i ++ ) { this . constant = this . pipeNorthHeight + this . gap ; ctx . drawImage ( this . pipeNorth , this . pipe [ i ] . x , this . pipe [ i ] . y ) ; ctx . drawImage ( this . pipeSouth , this . pipe [ i ] . x , this . pipe [ i ] . y + this . constant ) ; this . pipe [ i ] . x -- ; } ?撞?? ?里我?使用一??件判??做?界?理??撞??，也就是小?如果?到地面，?到天空的管道或者地面的管道就?使所有??停止，?游??束，如果游??束??算成?，?且使用 OpenHarmony ?置的??提醒玩家是否需要重新?始新的游?。 if ( ( this . bX + this . birdWidth >= this . pipe [ i ] . x && this . bX <= this . pipe [ i ] . x + this . pipeNorthWidth && ( this . bY <= this . pipe [ i ] . y + this . pipeNorthHeight || this . bY + this . birdHeight >= this . pipe [ i ] . y + this . constant ) ) || this . bY + this . birdHeight >= this . cvsHeight - this . fgHeight ) { prompt . showDialog ( { buttons : [ { text : "重?一次" } ] , success : ( data ) => this . restart ( ) , } ) ; clearInterval ( this . interval ) ; } ??理完?界，我??需要?理?小?一直?下去的?候，要不??建新的管道，回收?管道算得分，????也相?之??，本?上也算是一??撞??，?管道位置?更到?面左? X ?? 5 的位置，?小?已?安全通?，?成功得分，?最新的管道?更到?面右? X ?? 125 的位置，?小??要??的下一?管道，?提前?建好下一?新的管道，如果小???的距?比??，我??需要考??化管道??，不能???无限制的增?下去，我??可以?化，所以??管道已?完全消失在?面中的?候，我?可以考?把?管道的?据???中?除。 if ( this . pipe [ i ] . x == 125 ) { this . pipe . push ( { x : this . cvsWidth , y : Math . floor ( Math . random ( ) * this . pipeNorthHeight ) - this . pipeNorthHeight , } ) ; } if ( this . pipe [ i ] . x == 5 ) { this . score ++ ; } 上面所有的?些??本?都是?制管道的??，我?配合偏移量和重力因素，??易的就能?制出小?的?行?迹，我??里??便把得分?制到?幕的左下角，以便??展示玩家得分。 ctx . drawImage ( this . fg , 0 , this . cvsHeight - this . fgHeight ) ; ctx . drawImage ( this . bird , this . bX , this . bY ) ; this . bY += this . gravity ; ctx . fillStyle = "#000" ; ctx . font = "20px Verdana" ; ctx . fillText ( "Score : " + this . score , 10 , this . cvsHeight - 20 ) ; 操作和?分 而我?玩家??整?游?只需要一?操作，就是用手指点??幕，?量?小?安全??管道之?，所以我?需要???幕的点?事件，本?也就是?布的点?事件，?用?点?一下的?候，我?就?小?往上方移?一点距?。 moveUp ( ) { this . bY -= 25 ; } , 而重置游??初始化的???相似，只要把玩家得分，?的位置和管道的?据全部恢?到默????可： restart ( ) { this . pipe = [ ] ; this . pipe [ 0 ] = { x : this . cvsWidth , y : 0 , } ; this . constant = 0 ; this . score = 0 ; this . bY = 150 ; } , 封??件 由于比?要求我?是??一?通用?件，所以在案例 2 中我?希望更?一步，??把??把??游?封?成一?通用的?件，??官方文?????起????，?情在 自定??件 ，所?自定??件就是是用?根据??需求，?已有的?件?合，封?成的新?件，可以在工程中多次?用，?而提高代?的可?性。?上所述，我?只需要使用 <element> ?件把我??才??的?件引入到宿主?面?可。 < element name =" Flappy " src =" ./flappy//pages//index/index.hml " > </ element > < div class =" container " > < Flappy > </ Flappy > </ div > ??挑? 有了前面??案例的?累，我???? OpenHarmony ??有了更??的??，就要?入最后激?人心的??挑?了，我?要完整的移植一? Canvas 引擎，我?一?始考?的是??一?游?引擎，但考?到比?剩余???不足?，?且游?引擎的?用性和?意性不利于展?，所以??我????合考量，我?最??定??一?文?表格渲染引擎。 思考 可能有人疑??什????移植一?文?渲染引擎，?里想起外?知乎有??似的??， 中?要用多久才能??出?似 Excel，且功能涵盖 Excel 95% 功能的替代?件？ ，??路?崎????，引用最高?一些大 V 的回答?： 微??子哥 ：做不出?的，那?多?西，要把需求文??好都得好?年。 微?的 Belleve：各位程序?可以??先??下 recalc（根据公式更新?元格??），就知道?度了，文??目作???最??的 C++ ?目?非浪得?名。 微?的妖怪弟弟 ：作? Excel 的工程?，哥??的答一?，不能，因?我?隔壁?已????了，?年大?覆盖了 40%上下?。 IBM 的 Caspar Cui ：如果是??常用的 Excel 功能的?， WPS 已?是?好的替代品了。而且微?和金山也有交叉授?。但是?要提到 95%功能的 Excel 已?做到了??事?。。。?是有点小? Excel 了。就一??助文?量，WPS 也得多努力。 中科大的 Sixue ：假如微??抽，把 Excel 源?弄?了，不可恢?了。那就是世界末日，大家一起完蛋。??微?把 Excel ??原班人??回?，??的反聘，英年早逝的?活，然后重新??一? Excel。他也??法保?把 Excel 的功能恢?到 95%，?法保? 95%的 Excel 文件正常打?。 Bbcallen ：不可能的，微?自己都做不到。 不管任何人???，??路我?也必?走，就如?蒙?生背后的意?，我???去迎接??挑?，?里面的每一?坎每一?坑都?得留下一?中?人的脚印。 ?技?和目?角度理性去看，我?更????的不是已?固化了市?和用???的本地?人文?而是在??同文?，本地文?只需考??人，不需要考?多人?同?景，只需要考???，不需要考?在??景，只需要考?客?端?景，不需要考?服?器?景等... 在?文?的宿主?境是??器，本地文?背后是系?，??任何在?文?背后都?有像谷歌文?基于谷歌??器的支持，?有微? Office 基于微? Windows 系?的支持，事?上基于?一切我?也??醒??到，做到 95% 是??的。要知道谷歌?了????器前后投入了十?年上千人上百?，微? Windows 系?就更不用?了，在??我?可能?有不了??的技?背景，但我?仍在努力?小差距?强追?。 ??方案 在????方案之前， 我?先??表格渲染有多?? ，表格的渲染一般??有????方案： DOM 渲染。 Canvas 渲染。 ?界比?出名的 handsontable ?源?就是基于 DOM ??渲染，同等渲染?果，需要? DOM ?点?行精心的????造，但?而易?十万、百万?元格的 DOM 渲染??生?大的性能??。因此，如今?多在?表格??都是基于 Canvas 和?加 DOM ???的，但使用 Canvas ??需要考?可??域、??操作、?布???系，也有 Canvas 自身面?的一些性能??，包括 Canvas 如何?行直出等，???的要求?高，但?了更好的用???，更?向于 Canvas 渲染的??方案。 由于大部分前端?目渲染?是使用?架根据排版模型???逐?渲染的，整?渲染?也是?排版模型?一一??。因此，整?渲染的?点也非常多。?目?大?，性能?受到?大的影?。 ?了提升渲染性能，提供更??的????? DOM 更?成 Canvas 渲染，方便??者?建重前端大型在?文??目， 在??外???似引擎的公司??只有?家 ，如：??文?，金山文?和谷歌文?等。 ?? ↑ DOM 容器?件?入?等 ↑ Canvas 高亮??等 ↑ Canvas ?容字?背景色等 底? 我?通?分?收集??元素，再?行逐??渲染的方式，?少 Canvas ??引擎切???机的次?，降低性能?耗，?化渲染耗?，整?核心引擎代?控制在 1500 行左右，??充演示代? 500 行，方便大家理解??和?行二次??。 ?里移植的引擎主要?考了一?商??目和一??源?目： X Spreadsheet@MyLiang Tencent Doc@AlloyTeam ?布初始化 我??造一? table ?，在初始化的?候?建?布，??置好高度和?度，?放入 DOM 中，?把常用的???到原型?上?暴露到全局 window ?量上。 class Table { constructor ( container , width , height ) { const target = document . createElement ( "canvas" ) ; document . querySelector ( container ) . appendChild ( target ) ; this . $target = target ; this . $draw = Canvas2d . create ( target ) ; this . $width = width ; this . $height = height ; } } 我?就可以，?面中在 <div id="table"></div> 放置好表格元素，全局?境中直接?例化??布，?里?件通? id ?性??后，可以使用? id ?取?件?象??用相??件方法。 const table = new Table ( "#table" , 800 , 500 ) ; 左上?域 col 列 col 列 row 行 cell ?元格 cell ?元格 row 行 cell ?元格 cell ?元格 坐?系建立 有了?布，我?就要?始??渲染，我? table ?里面封? render 方法， render 方法主要?制四??域，也就是?似??上的 笛??直角坐?系 的四?想象，涉及格子?段，格子的信息，列?部（A-Z 列），行?部和???域。 2 - 左上?域 1 - 右上?域 3 -左下?域 4 - 右下?域 ?些 area 都是通? area.js 的 Area 初始化而? 2 ?域至 1 ?域就是 A-Z 列?部 2 ?域至 3 ?域就是行?部 4 ?域最常用，是可??的?元格 renderBody . call ( this , draw , area4 ) ; renderRowHeader . call ( this , draw , iarea3 ) ; renderColHeader . call ( this , draw , iarea1 ) ; renderFreezeLines . call ( this , draw , area4 . x , area4 . y ) ; 而??四??域大部分的核心思路本?都是?制格子，所有都共同用到 renderLinesAndCells 方法，里面分?有用于?制?域的??和格子信息的方法，里面的 renderCells ?遍??域然后?? renderCell ?制每一???的?元格，?里???理一些特殊的?元格，比如合?的?元格和?中的?元格，而 renderLines ??遍?每行每列去?制所有行列的?隔?。 function renderLinesAndCells ( ) { renderLines ( draw , area , lineStyle ) ; renderCells ( draw , type , area , cell , cellStyle , selection , selectionStyle , merges ) ; } ?元格渲染 ?制了表格的?元格之后，就需要往每??元格渲染?据和格式了，?里在 Table 原型?上??了一? cell 方法，?接受一?回?函??把?存到???性 $cell 上，? renderCell 函???的?候就??用??方法?把行列??入 $cell 方法中?取?元格的信息。 Table . prototype [ "cell" ] = function ( callback ) { this [ `$$cell` ] = callback ; return this ; } ; const sheet = [ [ "1" , "1" , "1" ] , [ "1" , "0" , "1" ] , [ "1" , "1" , "1" ] , ] ; table . cell ( ( ri , ci ) => sheet ?. [ ri ] ?. [ ci ] || "" ) . render ( ) ; 所以我?可以通?暴露的 $cell 方法控制每??元格的文字信息和?元格?式，?然?里支持?只?入?文本，也支持??入???据??????元格，?里的 style ?有默?的??自于 $cellStyle 。 bgcolor #ffffff align left valign middle textwrap true underline false color #0a0a0a bold false italic false rotate 0 fontSize 9 fontName Source Sans Pro ?些?式本?是使用 Canvas 提供的接口 draw.attr() ?展示的。 const c = cell ( ri , ci ) ; let text = c . text || "" ; let style = c . style ; cellRender ( draw , text , cellRect , style ) ; 有上面最基?的方法，我?已??有表格?据展示的功能，此?我?可以暴露更?富的接口?第三方使用，比如常用的合??元格，我??用 merges 方法告知 table ?，我?在 X ? G9 至 H11 到 Y ? B9 至 D11 的范?里面的?元格是被合?的??， Table . create ( "#table" , 800 , 500 ) . merges ( [ "G9:H11" , "B9:D11" ] ) ; 那此? renderCells 就????域的格子做特殊的?理，把?渲染成合??元格的??。 eachRanges ( merges , ( it ) => { if ( it . intersects ( area ) ) { renderCell ( draw , it . startRow , it . startCol , cell , area . rect ( it ) , cellStyle ) ; } } ) ; ?据可?? 除了?元格合?，常用的?有?布的事件?理，因??才所有的方法都只是表格只?看??，表格??被用?所??，所以就得??用?点?和?入的事件，所以我?在表格渲染的?候?定了 click ， mousedown ， mousemove 和 mouseup 事件等，我?可以通???用?点?行?，在??的?元格的?布的上方，? DOM 元素 Z ??示?入?，?用?提供?入修改?元格功能。 bind ( $target , "click" , ( evt ) => { } ) ; bind ( $target , "mousedown" , ( evt ) => { } ) ; 所以在 DOM ?点中我?除了放 <canvas> 元素，?可以安排上 <textarea> 元素，?里可以留意到我????式中有 areaTop 和 areaLeft ?控制我??入?的具?位置，??位置?取也是非常容易，我?只需要拿到点?事件?象 evt.offsetX 和 evt.offsetY ，然后根据坐?的位置算出是否在四?象限?域里面?返回所在的行列信息，?合行列的信息就可以准?算出?入?的偏移? areaTop 和 areaLeft ，然后再??入?切??可?示的??，用?就可以在表格的???元格上看到?入?。 < div if = "{{isShowArea}}" style = "width: 100px; height: 25px; top: {{areaTop}}px; left: {{areaLeft}}px" > < textarea if = "{{isShowArea}}" focus = "{{isFocus}}" value = "{{content}}" selectchange = "change" onchange = "change" > < / textarea > < / div > 有了?入?我?就可以??用?的?入操作，我?把?入事件?定在 textarea ?件上，??件?到事件???件?，??行 JS 中??的事件回?函?，???面 UI ??和?面 JS ???的交互，事件回?函?中通???可以携??外的信息，如?件上的?据?象 dataset 事件特有的回???，??件??事件后，事件回?函?默??收到一?事件?象，通??事件?象可以?取相?的信息，我?通?事件?象得到用??入的?，??用 cell 方法重新更新表格里面???元格的?，?然??情?有?候比???，比如用?是修改?元格文字的?色，所以?里?判??据格式。 textarea . addEventListener ( "input" , ( e ) => { let input = e . target . value ; table . cell ( ( ri , ci ) => { if ( ri === row && ci === col ) { return ( window . data [ ri ] [ ci ] = typeof value === "string" || typeof value === "number" ? input : { ... value , text : input } ) ; } return window . data [ ri ] [ ci ] ; } ) ; } ) ; 下?是我??机的??效果，可以看到我?引入了?置? @system.prompt ，点???的?元格???示??的行列信息，方便我?????，我?使用手机的?置?入法?入?容??，?入??准??取到信息?更新到表格上，而使用 IDE ?置的 Previewer ???无效，猜?是 PC 端??的?入事件?有被??。 工具??? 有了最基本的?看和??表格的功能，下一步我?就可以考???工具?了，工具?的??，一般?提供?置行列高度，文本加粗，居中，斜?，下??和背景色等?置，其?就是上面?元格 style 方法配合行列位置或者范?信息的再封?各?接口??。 我??里介???常用的， colHeader 可以?置?的列表行?和其高度，如果?不???行??，他也?有默?的高度。 table . colHeader ( { height : 50 , rows : 2 } ) . render ( ) ; 某些情?，我?在??表格的?候，我?可能需要固定某些行和某些列的?元格?提高表格??性，此? .freeze 就可以派上用?，以下?置?????? C6 以?的列。 table . freeze ( "C6" ) . render ( ) ; scrollRows 一般配合???域使用，????域以外的??可以做??操作。 table . scrollRows ( 2 ) . scrollCols ( 1 ) . render ( ) ; 我?可以使用以下方法更新?元格第二行第二列的?据? 8848 ，?色??色： table . cell ( ( ri , ci ) => { if ( ri === 2 && ci === 2 ) { return { text : "8848" , style : { color : "red" , } , } ; } return this . sheet ?. [ ri ] ?. [ ci ] || "" ; } ) . render ( ) ; 由于可?置?元格的形式太多了，?里不一一展?，具?可以?考以下接口，支持各??富的多?的改?，可以看出?其??我??置 CSS ?式是?相似的： { cell : { text , style : { border , fontSize , fontName , bold , italic , color , bgcolor , align , valign , underline , strike , rotate , textwrap , padding , } , type : text | button | link | checkbox | radio | list | progress | image | imageButton | date , } } 我??上面常?的接口做了一些演示，?行 OpenHarmonySheet ， ?按 任一?元格?出 ??? ?点??????可?看常用接口的?行?果，此演示?供?考，更多??使用?景??考文???: 生命周期和事件 在完成上面上述的功能之后，我?就需要考?暴露生命周期和事件?封?成一?通用?件?接入方使用。 @sheet-show 表格?示 @sheet-hide 表格?藏 @click-cell-start ?元格点?前 @click-cell-end ?元格点?后 @click-cell-longpress ?按表格 @change 修改?元格?据 由于 OpenHarmony ?自定??件提供了一系列生命周期回?方法，便于??者管理自定??件的?部??。生命周期主要包括： onInit ， onAttached ， onDetached ， onLayoutReady ， onDestroy ， onPageShow 和 onPageHide 。我?的表格?件可以利用各?生命周期回?的?机暴露自身的生命周期。 this . $emit ( "eventName" , data ) ; ?里 name ?性指自定??件名?，?件名??大小?不敏感，默?使用小?。 src ?性指自定??件 hml 文件路?，如果?有?置 name ?性，?默?使用 hml 文件名作??件名。而自定??件中?定子?件事件使用 onXXX 或 @XXX ?法，子?件中通? this.$emit ??事件??行??，通??定的自定?事件向上????，父?件?行 bindParentVmMethod 方法?接收子?件??的??。 < element name =" Sheet " src =" ../../components/index.hml " > </ element > < Sheet sheet =" {{sheet}} " @sheet-show =" sheetShow " @sheet-hide =" sheetHide " @click-cell-start =" clickCellStart " @click-cell-end =" clickCellEnd " @click-cell-longpress =" clickCellLongpress " @change =" change " > </ Sheet > 我?把上面?些通通打包，?完善了介?文?和接入文?上?到 Gitee - OpenHarmonySheet ??中，就完成了我?的表格引擎?件。 回?整??程?然有?度有挑?，但我????是的群策群力解?了，在整?比??程中我???也??了?多?于?蒙的?西，在以前一直?有??机?去了解，借着?次比?的机?能重新???蒙，也??了一些志同道合的??者，?且做????，作品在??前要?准一?方向，最好是???域自己熟悉的，?且?其他??作品是不重合的，???自己的作品是??，??人的作品是友好，?比?也是尊重的，在把握好方向之后就要制定每一?小??和最?的目?，做好前中后期的具???，步子不能跨地太大，不能好高??，要脚踏?地的去完成每一?小??，???程?于??和自己都是??的，?然我?不一定能到??点，但回?看我?每一?脚印都是自己努力的回?，??成?之?要??，有??性地完成好每一?任?，????，互相?忙，共同?步，正如?蒙所??的一?，一?完善的系?需要千万??者?心?力一起去?建和打磨，希望能有越?越多好的 OpenHarmony ?源?目，不??步，无以至千里，不?小流，无以成江海，一起去打造?于我?的生?。 最后衷心希望 OpenHarmony 能?展的越?越强大，越?越?利，??路?然??，但?得，??破浪?有?，直?云帆??海！
