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