HarmonyOSAPP开发-about feature(JS)体验分享 原创

鸿蒙时代
发布于 2021-7-7 16:23
浏览
1收藏

一、总述与效果

项目名称: about_js

项目语言: jS

体验模板: about(js)

工具:deveco studio

效果如下
HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区
二、开发步骤与核心代码

第一步 建立项目

新建一个java的应用项目

然后构建完成项目后在jltf_template下new->module
HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区

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

HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区
修改数据并选择phone;

HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区

第二步 修改模板

1.下图为项目基本结构,模板以js中的页面代码为主,java文件夹下只编写了最基本的项目运行认可代码;
HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区

页面参数基本都在i18n文件夹下,修改参数即可渲染的页面;
HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区
注意:该项目实现调转部分布局代码样式设定为display:none,很容易被忽略,需要进行修改才能显示出来,而且跳转的页面为全部白色,因为文字样式和背景都是白色需要修改;
HarmonyOSAPP开发-about feature(JS)体验分享-鸿蒙开发者社区
第三步

登录你的账号然后启动模拟器即可实现效果

部分代码(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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
HarmonyOSAPP开发-about feature(JS).zip 863.15K 44次下载
3
收藏 1
回复
举报
回复
    相关推荐