本文来自blog.alpaca.run

1.前言

其实鸿蒙2.0今年在9月份的时候已经发布，只不过那个时候只能开发手表和电视应用，还不支持手机。

那个时候在掘金也写过体验鸿蒙电视应用开发的文章，点击下面👇即可看到：

鸿蒙2.0发布，让我给大家整个活

而现在能给手机端开发了，于是去了华为HarmonyOS Developer网站，下载了最新的HUAWEI DevEco Studio

创建项目，就看到了可以选择手机端开发了👇👇

之前为了折腾下阿里云的serverless，就做了一个物联网小项目,还起了个Alpaca IOT的名字

简单来说就是给我家里的树莓派和工位上的树莓派接上dht11温度传感器

然后把采集到的温湿度数据上传到我自己写的阿里云serverless应用

之后撸一个前端页面，从我自己写的阿里云serverless应用里读取温湿度数据，显示下来。

然后把这个网页部署到服务器，就是下面的链接👇👇

Alpaca IOT

网站如图所示

所以我现在的工作，就是把我这个前端网页的业务，移植到鸿蒙app上

2.新建项目

选择手机开发项目，然后项目的目录就出来了。

当然了，第一件事并不是写代码，而是去弄一个运行鸿蒙系统的虚拟机（其实流程和Android Studio是一样的），这样我写的代码才有地方跑

然后砰的一下，一个运行鸿蒙os的虚拟手机就跑起来了。

其实这玩意并不是真的运行在我本地的鸿蒙虚拟机，而是一个远程桌面而已，所以待会写出来的代码，估计是跑在远程的华为机器，然后以远程桌面的形式返回回来

所以体验有点不好，因为远程传输的画面很糊，操作起来也卡（不是系统卡，而是远程桌面网不好的话有延时）

好了，既然虚拟机跑起来了，就直接执行项目代码吧，然后一个hello world出来了，说明运行成功。

由于我只是个卑微的前端菜🐔，而鸿蒙又支持js开发，所以我就用js开发了，然后顺便也对比下开发过程中和前端的区别，然后点进去源码的js文件夹，实现这个hello world的其实也是靠三座大山（hml、css、js）

他们的初始代码如下:

hml: 理解成变种的html语法，大体和html一样，不过会有一点区别

<!- index.hml -->
<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{title}}
    </text>
</div>

JavaScript: 标准ECMA,就是js运行时会和浏览器的有一点区别（比如一些api不一定能直接用）

// index.js
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

– css: 基本没发现和普通css有什么区别

/* index.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 100px;
}

看了下和小程序的模式类似，基本上也是h5+js+css,大体上和前端开发的区别不大，也是走的MVVM数据驱动视图那套模式，就是api和一些细节不一样，基本上可以说会Vue的就能上手。

所以一开始我不看文档，直接复制粘贴不加工，看看能不能“无痛移植”

结果发现不行，就我发现的，和前端网页相比，有以下区别

hml
1. 这里的布局只有flex和grid(默认flex)，所以默认的前端html传统文档流在这里会垮掉（比如div标签并不会换行，换行操作要靠设置flex相关属性）
2. 文字内容要用<text>标签包起来，不包的话文字不会显示出来
js
1. 如图，看来貌似这里的js运行时不支持async/await（有没有Promise没试过，看来貌似要地狱回调）
2. 看来一些api也不能直接用，比如fetch，后来看了下开发文档想要搞网络请求要从@system.fetch引,而且引过来的fetch只能靠回调拿数据
css
1. 大致相同，就我发现的可能这里的css规则会更严格，比如我想设置背景色我用background不行，必须要background-color

所以我后面把开发文档看了一遍，基本上和小程序一样，总体架子不变，只有少量的区别，要根据文档修修改改才能把前端业务移植过来。

3.开始移植

先给你看看我原来前端页面代码是怎样的（可能你们会觉得我这里的html语法怪异，因为我这个网页是基于ef.js弄得）

 <!DOCTYPE html>
<html>
    <header>
        <title>Alpaca IOT</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <style> body { background-color: black; color: white; } #app { height: 95vh; display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } #app .auther { position: fixed; bottom: 40px; font-size: 16px; cursor: pointer; } #app .auther a { text-decoration:none; color: white } #app .auther a:hover { text-decoration:solid; color: #f90; } #app .time { position: fixed; bottom: 15px; font-size: 16px; } #app .content{ width: 350px; text-align: center; padding: 5px; margin: 25px 20px; background: #f90; border-radius: 8px; color: black; } #app .title { font-size: 30px; margin-bottom: 10px; } #app .data-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } #app .data-box .text{ font-size: 24px; } #app .data-box .num{ font-size: 30px; } </style>
    </header>
    <body>
        <div id="app"></div>
        <script src="https://alpaca.cdn.bcebos.com/js/ef.js"></script>
        <script> const { t } = ef; // 创建ef对象 const app = new t` >div.content >div.title .家里实时温湿度 >div.data-box >div >span.text .温度： >span.num .{{home_temperature}} >span.symbol .°C >div >span.text .湿度： >span.num .{{home_humidity}} >span.symbol .% >div.content >div.title .工位实时温湿度 >div.data-box >div >span.text .温度： >span.num .{{comp_temperature}} >span.symbol .°C >div >span.text .湿度： >span.num .{{comp_humidity}} >span.symbol .% >div.auther >a #href = https://github.com/AlpacaBi #target="_blank" .@Alpaca Bi >div.time .最后更新时间： {{time}} ` // alicloud serverless 接口 const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData" // 从接口拿数据赋给ef对象的data层 const updateData = async() => { let res = await fetch(url) let resData = await res.json() app.$data = { home_temperature: resData.home.temperature, home_humidity: resData.home.humidity, comp_temperature: resData.comp.temperature, comp_humidity: resData.comp.humidity, time: (new Date()).toLocaleString() } } updateData() // 把ef对象挂载在dom树上 app.$mount({target: document.getElementById('app')}) // 每15秒更新一次数据 setInterval("updateData()", 60000); </script>
    </body>
</html>

后来磕磕碰碰，就只改了这3个文件，就好了，修改后的代码如下（你们可以看看和普通前端有什么区别）

index.hml

<!- index.hml -->
<div class="container">
    <div class="content">
        <div class="title">
            <text class="text">家里实时温湿度</text>
        </div>
        <div class="data-box">
            <div>
                <text class="text">温度:</text>
                <text class="num">{{home_temperature}}</text>
                <text class="symbol">°C</text>
            </div>
            <div>
                <text class="text">湿度:</text>
                <text class="num">{{home_humidity}}</text>
                <text class="symbol">%</text>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="title">
            <text class="text">工位实时温湿度</text>
        </div>
        <div class="data-box">
            <div>
                <text class="text">温度:</text>
                <text class="num">{{comp_temperature}}</text>
                <text class="symbol">°C</text>
            </div>
            <div>
                <text class="text">湿度:</text>
                <text class="num">{{comp_humidity}}</text>
                <text class="symbol">%</text>
            </div>
        </div>
    </div>
</div>

index.js

// index.js
import fetch from '@system.fetch';
export default {
    data: {
        home_temperature: 0,
        home_humidity: 0,
        comp_temperature: 0,
        comp_humidity: 0,
    },
    onInit() {
        let _this = this
        // 阿里云serverless接口
        const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData"
        // 每60秒向阿里云serverless读取数据并更新到前端页面
        setInterval(function() {
            fetch.fetch({
                url: url,
                success: function(response) {
                    const resData = JSON.parse(response.data)
                    _this.home_temperature = resData.home.temperature
                    _this.home_humidity = resData.home.humidity
                    _this.comp_temperature = resData.comp.temperature
                    _this.comp_humidity = resData.comp.humidity
                },
                fail: function(data, code) {
                    console.log('fail callback')
                },
            });
        }, 60 * 1000)
    }
}

index.css

/* index.css */
.container {
    height: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: black;
}

.container .content{
    width: 600px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    margin: 25px 20px;
    background-color: #f90;
    border-radius: 8px;
    color: black;
}

.container .content .title {
    width: 580px;
    margin-bottom: 20px;
}

.container .content .title .text {
    width: 580px;
    text-align: center;
    font-size: 60px;
}

.container .content .data-box {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .content .data-box .text{
    font-size: 48px;
}

.container .content .data-box .num{
    font-size: 60px;
}