HarmonyOS应用开发_鸿蒙osapp开发方案

<div class="nav">
<div class="{{current==0?'active':''}}" @click="clickItem(0)">
<text>基本信息</text>
</div>
<div class="{{current==1?'active':''}}" @click="clickItem(1)">
<text>项目经验</text>
</div>
<div class="{{current==2?'active':''}}" @click="clickItem(2)">
<text>自我评价</text>
</div>
</div>
 
// data中定义当前页面所需要的一些模型数据
data: {
current: 1, // 用于保存当前导航选中项的下标
},
/** 定义一个方法，方法名clickItem，用于处理导航项的点击事件
* 该方法将会传入一个参数，在此需要声明一个形参接收该参数，执行代码 * */
clickItem(i){
this.current = i
},

<div class="movie-item" for="{{movies}}">
<text>电影ID：{{ $item.id }}</text>
<text>电影名称：{{ $item.name }}</text>
<text>电影主演：{{ $item.actors }}</text>
<text>电影评分：{{ $item.score }}</text>
</div>
 
data:{
movies: [
{id:1, name:'哥，你好', score:9.5, actors:'马丽'},
{id:2, name:'妈妈', score:9.3, actors:'吴彦姝'},
{id:3, name:'独行月球', score:9.1, actors:'沈腾、马丽'},
{id:4, name:'明日战记', score:9.0, actors:'古天乐、刘青云'},
]
}

二、`src/main/config.json`基础配置

"module": {
    ......
    ......
    "js": [
      {
        "pages": [                        
          "pages/index/index",
          "pages/databind/databind"
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]
}

`pages`用于定义项目所有的页面。一个页面对应一个路由路径。

如果新建了一个新的页面，需要在该配置项中添加一个路径做对应，才可以被鸿蒙当做是一个页面来看待。

`window`配置项用于定义窗口的参数标准。

1、列表渲染

<!-- xxx.hml -->
<div class="array-container" style="flex-direction: column;margin: 200px;">
    <!-- div列表渲染 -->
    
    <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
    <div for="{{array}}" tid="id" onclick="changeText">
        <text>{{$idx}}.{{$item.name}}</text>
    </div>
    
    <!-- 自定义元素变量名称 -->
    <div for="{{value in array}}" tid="id" onclick="changeText">    
        <text>{{$idx}}.{{value.name}}</text>
    </div>
    
    <!-- 自定义元素变量、索引名称 -->
    <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
        <text>{{index}}.{{value.name}}</text>
    </div>
    
</div>

2、发送`http`请求

import http from '@ohos.net.http';
let httpRequest = http.createHttp();
let url = '请求路径'
let option = {设置请求参数，消息头，请求参数，超时时间等}
 
httpRequest.request(url, option, (err, data)=>{
    如果err==false        请求成功
    如果err返回了错误消息   则请求失败
})

如果希望通过这段API发送http请求，还需要在config.json中声明权限，并声明允许明文传输。（默认http模块仅仅支持https请求）

1. 声明允许明文传输：支持http请求：
"deviceConfig": {
       "default": {
         "network": {
           "cleartextTraffic": true
         }
       }
     },
2. 声明网络权限：
   "js": [
       {
           "pages": [
               "pages/index2/index"
           ],
           "name": "default",
           "window": {
               "designWidth": 720,
               "autoDesignWidth": true
           }
       }
   ],
   "reqPermissions": [{
       "name": "ohos.permission.INTERNET"
   }]
结果:
httpObj.request('http://bais.com.cn:8001/banner', (err, data)=>{
   console.info('-------------1----------------'+err)
   console.info('-------------2----------------'+JSON.stringify(data))
   this.banner = JSON.parse(data.result)
   })
//data.result返回的是字符串，而不是`js`对象，所以需要手动转换一下：`JSON.parse(data.result)`
 

项目请看网址: