使用uniapp开发Harmony Next应用的教程 原创

一、准备工作

1. 在华为开发者工具页面，下载最新的开发环境。https://developer.huawei.com/consumer/cn/download/

2. 下载最新的HBuilderX

二、创建项目

1. 在uniapp中创建一个默认模板项目

2. 运行编译项目

3. 点击之后会提示需要安装鸿蒙插件，已安装的可忽略。

三、启动模拟器

1. 打开deveco，点击设备管理器

2. 新建模拟器

3. 下载需要的模拟器版本，此处以5.0.3为例

4. 点击下载按钮，开始下载安装

5. 等待安装完成，安装完成会有一个删除的标识，点击下一个，创建模拟器

6. 修改一下名称，点击完成，如果需要更改内存，存储空间可自行调整

7. 点击启动模拟器

8. 启动完成，显示如下

四、创建包名

1. 登录https://developer.huawei.com/consumer/cn/service/josp/agc/index.html

详见：https://developer.huawei.com/consumer/cn/doc/app/agc-help-createharmonyapp-0000001945392297

需要创建一个包名，才可以将uniapp项目运行到模拟器中

2. 找到appid，填写信息如下

3. 下一步，填写所属项目，因为是演示项目，开放能力都没有勾选。直接确认

4. 此时获得一个包名

5. 填写到如下文件中

五、启动项目

1. 回到uniapp，将项目运行到鸿蒙。此时可以看到有鸿蒙设备。

2. 点击运行，日志打印如下。

3. 修改一下pages/index/index中的代码，更改title，

源码如下

<template>

<view class="content">

 <image class="logo" src="/static/logo.png"></image>

 <view class="text-area">

  <text class="title">{{title}}</text>

 </view>

</view>

</template>

<script>

export default {

 data() {

  return {

   title: 'bingyishow.top'

  }

 },

 onLoad() {

 },

 methods: {

 }

}

</script>

<style>

.content {

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: center;

}

.logo {

 height: 200rpx;

 width: 200rpx;

 margin-top: 200rpx;

 margin-left: auto;

 margin-right: auto;

 margin-bottom: 50rpx;

}

.text-area {

 display: flex;

 justify-content: center;

}

.title {

 font-size: 36rpx;

 color: #8f8f94;

}

</style>  

最终运行效果如下所示。