基于HarmonyOS 的ArkUI编写的社区类app(一)----隐私服务条款界面

一、闲扯淡

因为目前华为推出的HarmonyOS比较火，很多人都说HarmonyOS是套了Android的壳，没啥技术含量。我不同意这种说法，HarmonyOS 提出了很多的创新点是Android所没有的，分布式软总线、设备迁移、原子服务等都是很具创新性的思想。我相信未来的Harmony一定会与Android和IOS会三分天下的。废话就不说了，本系列的博客主要目标是学习HarmonyOS的ArkUI 开发，我自己买了一门ArkUI的课，所以我在学习的过程中呢也分享我的课上所学（因为上班没时间专门去研究官网，其实就是懒），代码我会提交到gitee,只需要下载一次，后面博客更新时，直接通过git pull下就可以了。

二、效果展示

由于是模拟器，所以会比较卡，还有就是开发的时候尽量用最新的IDE,否则可能会出现一些小BUG,如图，只是先做了隐私相关和服务条款
，登录界面也只做了一部分，因为太多的话写的博客太长，所以先做这么多其他的下一个博客加上。

三、实现思路及代码说明

本博客就是讲社区类app开发相关的页面开发知识，再多一句嘴，为啥要学ArkUI，因为华为已经不维护Java UI框架了，因为Java UI框架太重，做设备间迁移时不太方便，若是用js,一切都会变得简单。
首先，环境安装和hello world 新建项目就不啰嗦了，官网和其他博客多的是，咱们就直接开始。

上图是目录结构，咱们可以看下界面是咋写的。
上图是导航栏组件，是不是很眼熟，和开发Html5是不是一样的操作，等你上手时会发现，简直一摸一样。图中的img文件夹用于存放图片，导航栏的"<"按钮就是一张图片，.hml文件是写界面的，.css文件是给界面添加样式的，让界面更美观。.js文件是给界面提供数据和交互的，比如增加个点击事件啥的。
（1）导航组件
导航组件是一个通用的组件，可以在各个页面使用。所以需要定制一下标题。

import router from '@system.router';/*页面跳转*/

export default {
    data: {
        title: ''//给界面导航标题传值的
    },
props:['title'],
    back(){ /*点击back按钮返回上一个界面*/
        router.back()
    },
}

以上代码是nav.js中的代码，定义了导航的标题，这里是默认为空是因为咱们到了其他页面就可以传标题进来，从而显示指定页面的标题，比如隐私界面复用了导航，就会给导航传一个隐私界面的标题

（2）组件复用

privacy.hml

<element src="../nav/nav.hml">element>

<div class="container">
  <nav title="{{title}}">nav>

privacy.js

export default {
    data: {
        title: '隐私'
    }
}

比如隐私界面复用导航，就可以利用element标签，通过相对路径的办法引入导航组件，然后在自己的js（privacy.js）文件中传标题的值，在自己的hml(privacy.hml)文件中义“title="{{title}}”方式引入，同理服务条款也是一样的操作。

（3）隐私界面

<element src="../nav/nav.hml">element>
<div class="container">
  <nav title="{{title}}">nav>
    <list-item>
    <textarea extend="true" disabled="true" style="background-color: transparent;">
     
    textarea>
    list-item>
div>

隐私条款需要用textarea来放，记得要设置extend=“true”，这样文字才会展开显示，不然只会显示部分，还有disabled="true"这个属性要设置为true，因为textarea是一个可以和用户交户的控件，不禁用的话用户会修改隐私条款。list-item控件的存在是为了让隐私条款滚动更丝滑，让其有回弹效果，服务条款页面和这个一样

（4）页面跳转
login.hml

<div class="container">
    <text style="color: #c2c2c2;">
       我同意
    text>
    <text onclick="navToAgreement" >
       《App服务条款》
    text>
    <text style="color: #c2c2c2;">
        和
    text>
    <text onclick="navToPrivacy">
        《App隐私协议》
    text>
div>

login.js

import router from '@system.router';

export default {
    data: {
        title: 'World'
    },
    navToPrivacy(){
        router.push({
            uri: "pages/privacy/privacy"/*跳转到隐私页面*/
        })
    },
    navToAgreement(){
        router.push({
            uri: "pages/agreement/agreement"/*跳转到服务条款页面*/
        })
    }
}

定义两个函数，当点击“服务条款”或者“隐私条款”，通过onClick调用跳转函数，再通过router的push（）方法去跳转，uri后的内容可以去config.json中找。

config.json

  "js": [
      {
        "pages": [
          "pages/login/login",
          "pages/privacy/privacy",
          "pages/index/index",
          "pages/nav/nav",
          "pages/agreement/agreement"
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]

config.json中配置着页面的信息，和android的Androidmainfest.xml文件差不多，需要注意的是pages[]数组中哪个页面配置在最前面，进入app时就显示哪个页面。具体的可以参考源码，欢迎一起交流～～～，如果觉得文章有帮助可以下载源码时给个star

四、源码地址

源码放到了gitee，欢迎star,建议大家拿到源码后自己手动写一遍，这样印象会更深，学习嘛，不寒碜，多动手。
源码地址