[文章]#HarmonyOS征文#HarmonyOSAPP开发-about feature（JS）体验分享

一、总述与效果
项目名称:  about_js
项目语言:  jS
体验模板： about(js)
工具：deveco studio
效果如下

二、开发步骤与核心代码
第一步 建立项目
新建一个java的应用项目
然后构建完成项目后在jltf_template下new->module


选择About Ability(js)模板,点击下一步

修改数据并选择phone；


第二步 修改模板
1.下图为项目基本结构，模板以js中的页面代码为主，java文件夹下只编写了最基本的项目运行认可代码；

页面参数基本都在i18n文件夹下，修改参数即可渲染的页面；

注意：该项目实现调转部分布局代码样式设定为display：none，很容易被忽略，需要进行修改才能显示出来，而且跳转的页面为全部白色，因为文字样式和背景都是白色需要修改；

第三步
登录你的账号然后启动模拟器即可实现效果
部分代码（index.html-修改后）

<div class="container">     <div class="upperPart">         <div class="appBar">             <div class="back">                 <image src="/common/back.png" class="left_arrow" on:click="backClick()"></image>             </div>             <text class="title">{{ $t('string.title') }}</text>         </div>         <div class="aboutPageUpperPart">             <image src="/common/jltf.png" class="appIcon"></image>             <text class="aboutPageTitlePrimary">{{ $t('string.aboutPage_title_primary') }}</text>             <text class="aboutPageTitleSecondary">{{ $t('string.aboutPage_title_secondary') }}</text>         </div>     </div>     <div class="lowerPart">         <div class="aboutPageLowerPart">             <div class="list-wrapper">                 <div class="item-wrapper">                     <div class="item-left-part-wrapper">                         <text class="doubleLineList_text_primary">{{ $t('string.official_website') }}</text>                         <text class="doubleLineList_text_secondary">{{ $t('string.url') }}</text>                     </div>                     <div class="item-right-part-wrapper">                         <image class="item-right-arrow" src="{{ item_right_arrow }}"></image>                     </div>                 </div>                 <div class="item-wrapper">                     <div class="item-left-part-wrapper">                         <text class="doubleLineList_text_primary">{{ $t('string.developer') }}</text>                         <text class="doubleLineList_text_secondary">{{ $t('string.developer_url') }}</text>                     </div>                     <div class="item-right-part-wrapper">                         <image class="item-right-arrow" src="{{ item_right_arrow }}"></image>                     </div>                 </div>                 <div class="item-wrapper">                     <div class="item-left-part-wrapper">                         <text class="doubleLineList_text_primary">{{ $t('string.wechat') }}</text>                         <text class="doubleLineList_text_secondary">{{ $t('string.wechat_url') }}</text>                     </div>                     <div class="item-right-part-wrapper">                         <image class="item-right-arrow" src="{{ item_right_arrow }}"></image>                     </div>                 </div>                 <div class="item-wrapper">                     <div class="item-left-part-wrapper">                         <text class="doubleLineList_text_primary">{{ $t('string.share') }}</text>                         <text class="doubleLineList_text_secondary">{{ $t('string.share_url') }}</text>                     </div>                     <div class="item-right-part-wrapper">                         <image class="item-right-arrow" src="{{ item_right_arrow }}"></image>                     </div>                 </div>             </div>         </div>         <div class="aboutPageBottomPart" style="align-items : center; justify-content : center;">                 <text id="openSourceNoticeText" on:click="userProtocol">{{ $t('string.user_protocol') }}</text>                 <text id="protocolPrivacyText" on:click="privacyProtocol">{{ $t('string.privacy_statement') }}</text>             <text class="footnotes">{{ $t('string.copyright_text') }}</text>             <text class="footnotes">{{ $t('string.technicalSupport_text') }}</text>         </div>     </div> </div>

完整代码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/aboutFeature_JS
附件：