华为手表开发：WATCH 3 Pro（4）创建项目 + 首页新建按钮，修改初始文本

华为手表开发：WATCH 3 Pro（4）创建项目 + 首页新建按钮，修改初始文本

• 初
• 环境与设备

• 创建项目

• 创建项目入口
• 配置项目

• 认识目录结构

• 修改首页初始文本

• 文件名：index.hml

• 新建按钮 “ 按钮 ”

• index.hml

初

希望能写一些简单的教程和案例分享给需要的人

鸿蒙可穿戴开发

欢迎加入qq群交流：434606064

环境与设备

系统：window
设备：HUAWEI WATCH 3 Pro
开发工具：DevEco Studio 3.0.0.800

鸿蒙开发

创建项目

先打开 DevEco Studio 这个开发工具

创建项目入口

操作步骤：

1. File （鼠标指针悬停至该菜单）
2. New（鼠标指针悬停至该菜单）
3. Create Project（鼠标指针悬停至该菜单，并右键点击）

操作步骤如下图所示：

选择第一个空项目[如下图红色箭头指向所示]，再点击“Next”按钮，进入下一步

配置项目

详细说明：

1. Project name: 项目名称
2. Project type: 项目类型
3. Bundle name: 套件名称：这个要和 Appgallery Connect 中创建的项目名称保持一致，后面会记录
4. Save location:项目存储的位置
5. Compile SDK:SDK版本，手表开发选择目前是 api 6 （记录时间：2023-01-06）
6. Model:型号:一般来说默认就行
7. Language:开发语言：JS 或 JAVA ,其实是通用的，只是会生成的最初模板不同，在项目里面都是可以改的，如果是 H5、vue、uni 基础的就建议 JS 模板，如果是开发安卓app的，就推荐 JAVA模板
8. Compatible SDK:兼容的SDK
9. Device Type:设备类型，我们是开发手表的，选择wearable

Show in service center:服务中心

需要注意的地方：

Bundle name: 套件名称：这个要和 Appgallery Connect 中创建的项目名称保持一致，后面会记录

Compile SDK:SDK版本，手表开发选择目前是 api 6 （记录时间：2023-01-06）

Language:开发语言：JS 或 JAVA ,其实是通用的，只是会生成的最初模板不同，在项目里面都是可以改的，如果是
H5、vue、uni 基础的就建议 JS 模板，如果是开发安卓app的，就推荐 JAVA模板

Device Type:设备类型，我们是开发手表的，选择wearable

认识目录结构

entry:项目文件夹
js：前端文件夹
pages:页面文件夹
index:首页文件夹

index.css:首页样式
index.hml:首页
index.js:首页脚本

如下图所示

修改首页初始文本

我们打开 index.hml 首页
可以看到代码文本中并没有 “ 预览结果 ” 展示的 “ 你好世界 ” , 根据标签我们可以发现这里有两个引用的变量名 {{ $t(‘strings.hello’) }} {{ title }}
是因为这里用到了 i18n 多语言的方式来做的 app 页面实现多语言功能。

我们可以在文件夹 i18n 里面的 zh-CN 来看到这些字样（后面会有图片展示）

我平时喜欢直接用中文来代替，如果没有多语言的要求，我们可以直接写文字到页面上修改如下方代码展示

文件名：index.hml

<div class="container">
    <text class="title">
        你好，欢迎光临
    </text>
</div>

新建按钮 “ 按钮 ”

index.hml

在HTML文件“index.hml”，添加按钮，这里按钮用到是<input>标签

标签属性：

type=“button”【规定 input 元素的类型】

<div class="container">
    <text class="title">
        你好，欢迎光临
        <input else class="btn" type="button" value="按钮" onclick="onClickTest"></input>
    </text>
</div>