Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
f503b047
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
f503b047
编写于
8月 09, 2022
作者:
O
openharmony_ci
提交者:
Gitee
8月 09, 2022
浏览文件
操作
浏览文件
下载
差异文件
!7927 3.2Beta2分支:快速入门加粗样式+图片换行统一修改:需同步翻译
Merge pull request !7927 from 葛亚芳/cherry-pick-1660032544
上级
3b81471f
8da322cc
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
38 addition
and
1 deletion
+38
-1
zh-cn/application-dev/quick-start/start-with-ets-fa.md
zh-cn/application-dev/quick-start/start-with-ets-fa.md
+12
-0
zh-cn/application-dev/quick-start/start-with-ets-stage.md
zh-cn/application-dev/quick-start/start-with-ets-stage.md
+13
-1
zh-cn/application-dev/quick-start/start-with-js-fa.md
zh-cn/application-dev/quick-start/start-with-js-fa.md
+13
-0
未找到文件。
zh-cn/application-dev/quick-start/start-with-ets-fa.md
浏览文件 @
f503b047
...
...
@@ -10,9 +10,11 @@
## 创建eTS工程
1.
若首次打开
**DevEco Studio**
,请点击
**Create Project**
创建工程。如果已经打开了一个工程,请在菜单栏选择
**File**
>
**New**
>
**Create Project**
来创建一个新工程。选择
**OpenHarmony**
模板库,选择模板“
**Empty Ability**
”,点击
**Next**
进行下一步配置。
!
[
01
](
figures/01.png
)
2.
进入配置工程界面,
**Compile SDK**
选择“
**8**
”(
**Complie SDK**
选择“
**9**
”时注意同步选择
**Model**
为“
**FA**
”,此处以选择“
**8**
”为例),
**Language**
选择“
**eTS**
”,其他参数保持默认设置即可。
!
[
02
](
figures/02.png
)
> **说明:**
...
...
@@ -46,6 +48,7 @@
## 构建第一个页面
1.
使用文本组件。
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > ets > MainAbility > pages**
”,打开“
**index.ets**
”文件,可以看到页面由Text组件组成。“
**index.ets**
”文件的示例如下:
...
...
@@ -71,6 +74,7 @@
```
2.
添加按钮。
在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“
**index.ets**
”文件的示例如下:
...
...
@@ -109,12 +113,14 @@
```
3.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
!
[
zh-cn_image_0000001364254741
](
figures/zh-cn_image_0000001364254741.png
)
## 构建第二个页面
1.
创建第二个页面。
-
新建第二个页面文件。在“
**Project**
”窗口,打开“
**entry > src > main > ets > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > eTS File**
”,命名为“
**second**
”,点击“
**Finish**
”。可以看到文件目录结构如下:
![zh-cn_image_0000001311334932](figures/zh-cn_image_0000001311334932.png)
...
...
@@ -139,6 +145,7 @@
```
2.
添加文本及按钮。
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“
**second.ets**
”文件的示例如下:
...
...
@@ -181,6 +188,7 @@
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“
**index.ets**
”文件的示例如下:
...
...
@@ -225,6 +233,7 @@
```
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“
**second.ets**
”文件的示例如下:
...
...
@@ -268,6 +277,7 @@
```
3.
打开index.ets文件,点击预览器中的!
[
zh-cn_image_0000001311175120
](
figures/zh-cn_image_0000001311175120.png
)
按钮进行刷新。效果如下图所示:
!
[
zh-cn_image_0000001364173989
](
figures/zh-cn_image_0000001364173989.png
)
...
...
@@ -276,9 +286,11 @@
1.
将搭载OpenHarmony标准系统的开发板与电脑连接。
2.
点击
**File**
>
**Project Structure...**
>
**Project**
>
**SigningConfigs**
界面勾选“
**Automatically generate signing**
”,等待自动签名完成即可,点击“
**OK**
”。如下图所示:
!
[
06
](
figures/06.png
)
3.
在编辑窗口右上角的工具栏,点击!
[
zh-cn_image_0000001311494580
](
figures/zh-cn_image_0000001311494580.png
)
按钮运行。效果如下图所示:
!
[
zh-cn_image_0000001363934577
](
figures/zh-cn_image_0000001363934577.png
)
恭喜您已经使用eTS语言开发(FA模型)完成了第一个OpenHarmony应用,快来
[
探索更多的OpenHarmony功能
](
../application-dev-guide.md
)
吧。
zh-cn/application-dev/quick-start/start-with-ets-stage.md
浏览文件 @
f503b047
...
...
@@ -10,9 +10,11 @@
## 创建eTS工程
1.
若首次打开
**DevEco Studio**
,请点击
**Create Project**
创建工程。如果已经打开了一个工程,请在菜单栏选择
**File**
>
**New**
>
**Create Project**
来创建一个新工程。选择
**OpenHarmony**
模板库,选择模板“
**Empty Ability**
”,点击
**Next**
进行下一步配置。
!
[
01
](
figures/01.png
)
2.
进入配置工程界面,
**Compile SDK**
选择“
**9**
”,
**Model**
选择“
**Stage**
”,
**Language**
选择“
**eTS**
”,其他参数保持默认设置即可。
!
[
07
](
figures/07.png
)
> **说明:**
...
...
@@ -51,6 +53,7 @@
## 构建第一个页面
1.
使用文本组件。
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > ets > MainAbility > pages**
”,打开“
**index.ets**
”文件,可以看到页面由Text组件组成。“
**index.ets**
”文件的示例如下:
...
...
@@ -76,6 +79,7 @@
```
2.
添加按钮。
在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“
**index.ets**
”文件的示例如下:
...
...
@@ -114,19 +118,21 @@
```
3.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
!
[
zh-cn_image_0000001311334976
](
figures/zh-cn_image_0000001311334976.png
)
## 构建第二个页面
1.
创建第二个页面。
-
新建第二个页面文件。在“
**Project**
”窗口,打开“
**entry > src > main > ets**
”,右键点击“
**pages**
”文件夹,选择“
**New > eTS File**
”,命名为“
**second**
”,点击“
**Finish**
”。可以看到文件目录结构如下:
![09](figures/09.png)
> **说明:**
> 开发者也可以在右键点击“**pages**”文件夹时,选择“**New > Page**”,则无需手动配置相关页面路由。
-
配置第二个页面的路由。在“
**Project**
”窗口,打开“
**entry > src > main > resources > base > profile
**
”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。示例如下:
-
配置第二个页面的路由。在“
**Project**
”窗口,打开“
**entry > src > main > resources > base > profile**
”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。示例如下:
```
json
{
...
...
@@ -138,6 +144,7 @@
```
2.
添加文本及按钮。
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“
**second.ets**
”文件的示例如下:
...
...
@@ -180,6 +187,7 @@
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“
**index.ets**
”文件的示例如下:
...
...
@@ -224,6 +232,7 @@
```
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“
**second.ets**
”文件的示例如下:
...
...
@@ -267,6 +276,7 @@
```
3.
打开index.ets文件,点击预览器中的!
[
zh-cn_image_0000001311015192
](
figures/zh-cn_image_0000001311015192.png
)
按钮进行刷新。效果如下图所示:
!
[
zh-cn_image_0000001364254773
](
figures/zh-cn_image_0000001364254773.png
)
...
...
@@ -275,9 +285,11 @@
1.
将搭载OpenHarmony标准系统的开发板与电脑连接。
2.
点击
**File**
>
**Project Structure...**
>
**Project**
>
**SigningConfigs**
界面勾选“
**Automatically generate signing**
”,等待自动签名完成即可,点击“
**OK**
”。如下图所示:
!
[
06
](
figures/06.png
)
3.
在编辑窗口右上角的工具栏,点击!
[
zh-cn_image_0000001364054485
](
figures/zh-cn_image_0000001364054485.png
)
按钮运行。效果如下图所示:
!
[
zh-cn_image_0000001311334972
](
figures/zh-cn_image_0000001311334972.png
)
恭喜您已经使用eTS语言开发(Stage模型)完成了第一个OpenHarmony应用,快来
[
探索更多的OpenHarmony功能
](
../application-dev-guide.md
)
吧。
zh-cn/application-dev/quick-start/start-with-js-fa.md
浏览文件 @
f503b047
...
...
@@ -8,9 +8,11 @@
## 创建JS工程
1.
若首次打开
**DevEco Studio**
,请点击
**Create Project**
创建工程。如果已经打开了一个工程,请在菜单栏选择
**File**
>
**New**
>
**Create Project**
来创建一个新工程。选择
**OpenHarmony**
模板库,选择模板“
**Empty Ability**
”,点击
**Next**
进行下一步配置。
!
[
01
](
figures/01.png
)
2.
进入配置工程界面,
**Compile SDK**
选择“
**8**
”(
**Complie SDK**
选择“
**9**
”时注意同步选择
**Model**
为“
**FA**
”,此处以选择“
**8**
”为例),
**Language**
选择“
**JS**
”,其他参数保持默认设置即可。
!
[
04
](
figures/04.png
)
> **说明:**
...
...
@@ -45,6 +47,7 @@
## 构建第一个页面
1.
使用文本组件。
工程同步完成后,在“
**Project**
”窗口,点击“
**entry > src > main > js > MainAbility > pages> index**
”,打开“
**index.hml**
”文件,设置Text组件内容。“
**index.hml**
”文件的示例如下:
...
...
@@ -58,6 +61,7 @@
```
2.
添加按钮,并绑定onclick方法。
在默认页面基础上,我们添加一个button类型的input组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“
**index.hml**
”文件的示例代码如下:
...
...
@@ -74,6 +78,7 @@
```
3.
设置页面样式。
在“
**Project**
”窗口,点击“
**entry > src > main > js > MainAbility > pages> index**
”,打开“
**index.css**
”文件,可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“
**index.css**
”文件的示例如下:
...
...
@@ -109,17 +114,20 @@
```
4.
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
!
[
zh-cn_image_0000001311494592
](
figures/zh-cn_image_0000001311494592.png
)
## 构建第二个页面
1.
创建第二个页面。
在“
**Project**
”窗口,打开“
**entry > src > main > js > MainAbility**
”,右键点击“
**pages**
”文件夹,选择“
**New > Page**
”,命名为“
**second**
”,点击“
**Finish**
”,即完成第二个页面的创建。可以看到文件目录结构如下:
!
[
zh-cn_image_0000001311334944
](
figures/zh-cn_image_0000001311334944.png
)
2.
添加文本及按钮。
参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“
**second.hml**
”文件的示例如下:
...
...
@@ -174,6 +182,7 @@
页面间的导航可以通过
[
页面路由router
](
../ui/ui-js-building-ui-routes.md
)
来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1.
第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“
**index.js**
”示例如下:
...
...
@@ -191,6 +200,7 @@
```
2.
第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“
**second.js**
”示例如下:
...
...
@@ -206,6 +216,7 @@
```
3.
打开index文件夹下的任意一个文件,点击预览器中的!
[
zh-cn_image_0000001364174013
](
figures/zh-cn_image_0000001364174013.png
)
按钮进行刷新。效果如下图所示:
!
[
zh-cn_image_0000001311175132
](
figures/zh-cn_image_0000001311175132.png
)
...
...
@@ -214,9 +225,11 @@
1.
将搭载OpenHarmony标准系统的开发板与电脑连接。
2.
点击
**File**
>
**Project Structure...**
>
**Project**
>
**Signing Configs**
界面勾选“
**Automatically generate signing**
”,等待自动签名完成即可,点击“
**OK**
”。如下图所示:
!
[
06
](
figures/06.png
)
3.
在编辑窗口右上角的工具栏,点击!
[
zh-cn_image_0000001311494604
](
figures/zh-cn_image_0000001311494604.png
)
按钮运行。效果如下图所示:
!
[
zh-cn_image_0000001363934589
](
figures/zh-cn_image_0000001363934589.png
)
恭喜您已经使用JS语言开发(FA模型)完成了第一个OpenHarmony应用,快来
[
探索更多的OpenHarmony功能
](
../application-dev-guide.md
)
吧。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录