HarmonyOS程序开发_harmonyos vue

通过华为的官方文档进行学习：https://developer.harmonyos.com/cn/documentation/

笔记：

1. 安装好以后的环境配置直接根据页面的提示进行就行，不需要按照官网说的处理什么什么代理，安装好SDK后就能正常使用，nodejs有版本限制，推荐按照提示下载一个nodejs，如果以前已经下载过也没事，可共存
2. .hml和.html文件的区别：
   基本相似，只是标签的使用上不太一样，.hml文件中不能在body区域空白处直接写文字展示在界面上，需要使用text标签包括起来，并且text标签也提供了一些更强大的属性，在span基础上增加了更多属性
3. 鸿蒙里将vue一个组件中的html、css、js分成了三个文件，用pages->page创建页面就会自动帮我们创建这三个文件，让我们的专注力更集中，页面更清晰
4. app.js与main.js是一样的，里面存储的是全局变量，可以在单独的页面中拿取到，通过 this.$ app.$ def.变量名拿到，将公共的全局变量就放这里面
5. app根据这块儿的pages的顺序来决定展示的页面，第一个pages就是第一个页面
   
6. 在DevEco Studio 中使用预览功能：只能在hml文件中才能点击Previewer预览界面，并且开启config.json中的autoDesignWidth实现屏幕宽度自适应

移动端和客户端的数据传输

这儿要用到前后端分离框架的思想，在这篇文章中有大致说明：

以登录请求为案例，写了一下主要核心代码：
前端发送登录请求：

后端接收数据设置状态码返回（操作数据库的以省略）：

package com.iss.harmony.api.controller;

import com.iss.harmony.api.model.User;
import org.springframework.web.bind.annotation.*;

import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController   //等同于Controller+ResponseBody
@RequestMapping("/api")
public class APIController
{
    //@GetMapping("/test")
    @RequestMapping("/test")
    public List<String> text()
    {
        String[] array={"zz","zhouzuo"};
        return Arrays.asList(array);
    }

    @PostMapping("/login")
    public Map<String,Object> login(@RequestBody User user)
    {
        System.out.println("get params : "+user);
        //query database
        //get User from database;

        user=new User(1,
                    "zz",
                    "avatar .jpg",
                    "ZZ20220805",
                    "神里绫华",
                    "像这样悠闲安稳的时光，如果再多一点就好了......我真贪心啊。",
                    "123456",
                    "13971397xxx",
                    "13971397xxx@qq.com",
                    "未绑定",
                    "121727838x",
                    "未绑定");

        Map<String,Object> map=new HashMap<>();
        Map<String,Object> data=new HashMap<>();
        data.put("user",user);
        //此处的token应该是通过加密技术获得的，不是自己手动写的，已省略
        data.put("token","NICAICHEBCYRVBAH");    //data中同时封装token和数据

        map.put("code",20000);
        map.put("msg","Login Success");
        map.put("data",data);
        return map;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

最后数据的传输

1. 先要打开natapp，本地是用远程模拟器来用的，模拟器是外网上的，外网访问我们的localhost必须要把本地自己的电脑ip映射出去
   保持natapp不关闭

2. 修改访问地址
   

3. 发送网络请求需要开启一些权限，细节需要查看官网API，在config.json中写一段代码
   配置网络权限ohos.permission.INTERNET

"reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
1
2
3
4
5

配置请求协议为http

 "deviceConfig": {
    "default": {
    "network": {
      "cleartextTraffic": true
    }
  }},
1
2
3
4
5
6