微信公众网站怎么做的,深圳注册贸易公司网上注册流程,产品素材网站,专业别墅装修设计公司创建ArkTS工程 若首次打开DevEco Studio#xff0c;请点击Create Project创建工程。如果已经打开了一个工程#xff0c;请在菜单栏选择File New Create Project来创建一个新工程。 选择Application应用开发#xff08;本文以应用开发为例#xff0c;Atomic Serv…创建ArkTS工程 若首次打开DevEco Studio请点击Create Project创建工程。如果已经打开了一个工程请在菜单栏选择File New Create Project来创建一个新工程。 选择Application应用开发本文以应用开发为例Atomic Service对应为元服务开发选择模板“Empty Ability”点击Next进行下一步配置。 进入配置工程界面Compile SDK选择“3.1.0(API 9) ”Model 选择“Stage”其他参数保持默认设置即可。 说明 支持使用ArkTS低代码开发方式。 低代码开发方式具有丰富的UI界面编辑功能通过可视化界面开发方式快速构建布局可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 如需使用低代码开发方式请打开上图中的Enable Super Visual开关。 点击Finish工具会自动生成示例代码和相关资源等待工程创建完成。
ArkTS工程目录结构Stage模型 AppScope app.json5应用的全局配置信息。 entryHarmonyOS工程模块编译构建生成一个HAP包。 src main ets用于存放ArkTS源码。src main ets entryability应用/服务的入口。src main ets pages应用/服务包含的页面。src main resources用于存放应用/服务所用到的资源文件如图形、多媒体、字符串、布局文件等。关于资源文件详见资源分类与访问。src main module.json5Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明详见module.json5配置文件。build-profile.json5当前的模块信息、编译信息配置项包括buildOption、targets配置等。其中targets中可配置当前运行环境默认为HarmonyOS。hvigorfile.ts模块级编译构建任务脚本开发者可以自定义相关任务和代码实现。 oh_modules用于存放三方库依赖信息。关于原npm工程适配ohpm操作请参考历史工程迁移。 build-profile.json5应用级配置信息包括签名、产品配置等。 hvigorfile.ts应用级编译构建任务脚本。
构建第一个页面 使用文本组件。 工程同步完成后在“Project”窗口点击“entry src main ets pages”打开“Index.ets”文件可以看到页面由Text组件组成。“Index.ets”文件的示例如下
// Index.ets
Entry
Component
struct Index {
State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width(100%)}.height(100%)
}
}添加按钮。 在默认页面基础上我们添加一个Button组件作为按钮响应用户点击从而实现跳转到另一个页面。“Index.ets”文件的示例如下 // Index.ets
Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)}.width(100%)}.height(100%)}
}在编辑窗口右上角的侧边工具栏点击Previewer打开预览器。第一个页面效果如下图所示
构建第二个页面 创建第二个页面。 新建第二个页面文件。在“Project”窗口打开“entry src main ets ”右键点击“pages”文件夹选择“New ArkTS File”命名为“Second”点击“Finish”。可以看到文件目录结构如下 说明 开发者也可以在右键点击“pages”文件夹时选择“New Page”则无需手动配置相关页面路由。 配置第二个页面的路由。在“Project”窗口打开“entry src main resources base profile”在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下 { src: [ pages/Index, pages/Second ]}添加文本及按钮。 参照第一个页面在第二个页面添加Text组件、Button组件等并设置其样式。“Second.ets”文件的示例如下
// Second.ets
Entry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)}.width(100%)}.height(100%)}
} 实现页面间的跳转 页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面从而实现跳转。使用页面路由请导入router模块。 第一个页面跳转到第二个页面。 在第一个页面中跳转按钮绑定onClick事件点击按钮时跳转到第二页。“Index.ets”文件的示例如下 // Index.ets
// 导入页面路由模块
import router from ohos.router;Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)// 跳转按钮绑定onClick事件点击时跳转到第二页.onClick(() {console.info(Succeeded in clicking the Next button.)// 跳转到第二页router.pushUrl({ url: pages/Second }).then(() {console.info(Succeeded in jumping to the second page.)}).catch((err) {console.error(Failed to jump to the second page.Code is ${err.code}, message is ${err.message})})})}.width(100%)}.height(100%)}
}第二个页面返回到第一个页面。 在第二个页面中返回按钮绑定onClick事件点击按钮时返回到第一页。“Second.ets”文件的示例如下
// Second.ets
// 导入页面路由模块
import router from ohos.router;Entry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)// 返回按钮绑定onClick事件点击按钮时返回到第一页.onClick(() {console.info(Succeeded in clicking the Back button.)try {// 返回第一页router.back()console.info(Succeeded in returning to the first page.)} catch (err) {console.error(Failed to return to the first page.Code is ${err.code}, message is ${err.message})}})}.width(100%)}.height(100%)}
}打开“Index.ets”文件点击预览器中的按钮进行刷新。效果如下图所示
使用真机运行应用 运行HarmonyOS应用可以使用远程模拟器和物理真机设备区别在于使用远程模拟器运行应用不需要对应用进行签名。接下来将以物理真机设备为例介绍HarmonyOS应用的运行方法关于模拟器的使用请参考使用Remote Emulator运行应用/服务。 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求可查看使用本地真机运行应用/服务。 点击File Project Structure… Project SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”点击界面提示的“Sign In”使用华为帐号登录。等待自动签名完成后点击“OK”即可。如下图所示 在编辑窗口右上角的工具栏点击按钮运行。效果如下图所示
恭喜您已经使用ArkTS语言开发Stage模型完成了第一个HarmonyOS应用快来探索更多的HarmonyOS功能吧。
