用js来开发鸿蒙app新手教程 鸿蒙开发 js


用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
2019年8月9日,创意配图:华为鸿蒙 。
鸿蒙操作系统是一款分布式的操作系统,是国产开发,可以运行andriod的应用,而且开发语言支持java及js,太厉害了,做前端的朋友可以直接用js来开发鸿蒙app了,今天我们来演示一下如何用js来开发鸿蒙app应用 。
首先下载鸿蒙的开发工具ide deveco-studio,下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio#download
安装鸿蒙app开发工具ide deveco-studio下载完后,我们安装,安装后我们打开
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
首先弹出一个定制化的信息,我们选择中国,然后又弹出隐私条款确认页面,我们选择agree同意
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
好了,终于进入了我们的sdk安装界面
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
我们直接默认,点击next,他好下载sdk,大概239M的大小,然后进入sdk 协议书,我们同意
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
点击next
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
好了,sdk正在下载中,我们喝点水,刷一会抖音 。
等了5分钟,重要下载好了
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
点击finish,终于进入了鸿蒙app的项目开发界面
创建一个鸿蒙app项目
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
点击第一个create harmoney-os project
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
我们可以看到,鸿蒙系统支持手机、平板、汽车、电视、穿戴设备、手表、智能视觉设备等,非常强大,而且支持js及java两种语言开发,我们今天就演示一下js来开发吧,我们选择第一个phone和第一个模板,然后点击next,填写项目名称及包名路径sdk等 。
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
最后点击finish
好了,进入了我们deveco-studio的开发界面了
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
看看,是不是跟微信小程序的目录结构很像 。我们看看index.html
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
在看看js
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
最后看看css
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
看看app.js,这个是app启动的时候触发一次
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
好了,开发好了,我们怎么调试预览运行呢,
运行调试鸿蒙app应用deveco-studio提供了远端真机运行调试的机制,我们点击菜单tools,选择hvd manger
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
弹出一个远程设备列表,不过要登录的
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
我们登录后完成认证,我们看到的界面是这样,点击phone,选择第一个p40,然后点击action 运行按钮
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
远程真机每次调试只有1个小时,一个小时候自动释放远程机器,远程真机启动后我们选择运行吧
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
点击菜单栏上的运行按钮,ok我们看到机器运行的效果了 。是不是很方便 。
用js来开发鸿蒙app新手教程 鸿蒙开发 js

文章插图
总结【用js来开发鸿蒙app新手教程 鸿蒙开发 js】鸿蒙系统的开发体验总体来说还是很流畅的,支持远程真机直接调试运行,非常给力,支持js直接编写开发鸿蒙应用 。之前做react native、uni-app的应该上手很快了 。