一、技术相关
卡片语言: Js
体验模板: ptbangding
工具:deveco studio
二、效果如下
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/255217c868a7f50c09a50013bffc9c6f6a7aad.png?x-oss-process=image/resize,w_325,h_674)
部分代码如下图
Hml
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/23069926192cc5fcc4a201316e63b2e5c21805.png?x-oss-process=image/resize,w_1427,h_937)
Css
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/b867d0894858aafb1a879539770d0675d1d278.png?x-oss-process=image/resize,w_1879,h_958)
Js
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/58f06e228e90074cc17358af7a24bfa6d59e9d.png?x-oss-process=image/resize,w_893,h_136)
上面图片中的方法表示将传进来的数进行开方,并保留两位小数。
二、遇到的问题及总结讨论
Hml写的重复的代码太多了,有什么办法可以简写吗?
布局为竖的时候换行就成横的了。
三、体验开发过程
第一步
新建一个js的应用项目
选择一个js的helloworld模板
然后构建完成项目后在js下default-pages的html和css中编写
部分代码如下图
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/e152ce1658bc019b43d1697e615853f899ca8b.png?x-oss-process=image/resize,w_1160,h_674)
运行完之后第一个效果页面基本完成了
第二步
在“Project”窗口,打开“entry > src > main > js > default”,右键点击“pages.index”文件夹,选择“New > JS Page”,命名为“details”,单击回车键。创建完成后,可以看到“pages.index”文件夹下的文件目录结构如下图
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/42157fe27670f1b46eb49506660bcd9df623fe.png?x-oss-process=image/resize,w_414,h_483)
然后在datails的hml和css中写入代码,即可完成第二个页面。
部分代码如下图
![](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202108/560c7e071964d19c03f2299e65cf593bb897e3.png?x-oss-process=image/resize,w_728,h_364)
第三步
打开第一个页面的“index.js”文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。
代码如下图
完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/ptbangding
附件: