本文来自blog.alpaca.run

1.前言

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

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

鸿蒙2.0发布，让我给大家整个活在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

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

创建项目，就看到了可以选择手机端开发了?? 在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

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

简单来说就是给我家里的树莓派和工位上的树莓派接上dht11温度传感器在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

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

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

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

Alpaca IOT

网站如图所示在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

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

2.新建项目

选择手机开发项目，然后项目的目录就出来了。在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

当然了，第一件事并不是写代码，而是去弄一个运行鸿蒙系统的虚拟机（其实流程和Android Studio是一样的），这样我写的代码才有地方跑在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

然后砰的一下，一个运行鸿蒙os的虚拟手机就跑起来了。在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

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

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

好了，既然虚拟机跑起来了，就直接执行项目代码吧，然后一个hello world出来了，说明运行成功。在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

由于我只是个卑微的前端菜?，而鸿蒙又支持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>标签包起来，不包的话文字不会显示出来

在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

js
1. 如图，看来貌似这里的js运行时不支持async/await（有没有Promise没试过，看来貌似要地狱回调）
2. 看来一些api也不能直接用，比如fetch，后来看了下开发文档想要搞网络请求要从@system.fetch引,而且引过来的fetch只能靠回调拿数据

在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP

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;
}

然后我的鸿蒙物联网APP Alpaca IOT就这样跑起来啦！！！在鸿蒙2.0beta手机版发布的第二天，我写了一个鸿蒙的物联网应用手机APP