鸿蒙与微信小程序,从微信小程序到鸿蒙js开发【01】-环境搭建&flex布局

d19702a13950cdb0486feed7111bb80c.png

1、mac os的鸿蒙环境搭建

华为官方文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528

官方文档已经说明的比较详细了,我是使用mac os的开发者,在创建一个js项目后,Gradle下载完成,报出了如下错误:

d82a9dba3c896e15b817ec9a8900d69d.png

看起来像是华为镜像仓中找不到包,百度必应都没搜到这种错误,但我感觉还是Gradle的问题。

点击DevEco Studio -> Preference -> Build... -> Gradle -> Gradle user home,IDE自带的目录是带".m2"的目录,在mac系统中这一类目录是有权限的。虽然在该目录中也已有gradle-6.3下载完成,但程序无访问权限。需要重新创建一个文件夹作为Gradle user home,然后重新Build,静等Gradle重新下载完毕。

12f8b2a7e003cb1fbf01496037bda835.png

24f31421da1dbb6072731ef625db796d.png

build完成后,在Tools -> HVD Manager中选择P40,再点击run,第一个工程就启动成功了。

4baef6591d45eafdc78fcc1aa3096a65.png

2、鸿蒙js工程目录结构

在熟悉的微信小程序中,应用的全局配置在项目根目录的app.json中,包括页面的注册,window显示的内容等。页面则在pages目录中,每个页面由wxml, wxss, js, json四个文件组成。

ca8fc8c32b7eaa37c8687cb7f4d07257.png

现在来看看鸿蒙js工程的目录结构,全局配置文件为/entry/src/main/config.json。对页面的配置在module.js.pages中,且也是将应用启动的首页放在第一个。js页面在/entry/src/main/js/default/pages目录中,右键目录 -> new -> JS Page后,IDE自动新建文件夹,文件夹中包括hml, css, js三个文件,且页面会自动在config.json中配置。

3621f264dc322e58d44256151b87774b.png

3、flex布局

flex布局是写前端页面时很常用的布局方式,在尝试写一个最简单的页面布局时,发现鸿蒙布局和微信小程序确有不同点。这是一个很简单的小程序布局,三个view标签不加任何布局方式,自动竖向排列,每个元素占一行。

504163cbed3527afb65b47fe71f697a3.png

鸿蒙中的容器标签为div,和html一致。必须用一个div作为整体页面的父级标签,由它包裹页面中的所有子标签元素。尝试和小程序一样的布局写法:

三个div的width都为100%,却展示出了以下样式:

2039c10450853ab390ee9246d45e044a.png

由此猜想hml的div标签并不是行级元素,故为父级div加上flex布局,这才正常了。

ae0f832f6c493aeee892210637eac32a.png

©著作权归作者和HarmonyOS技术社区共同所有,如需转载,请注明出处,否则将追究法律责任。

【编辑推荐】

【责任编辑:jianghua TEL:(010)68476606】

点赞 0

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值