东莞网站seo推广优化,销售管理软件app,凡科h5尺寸,电商平台排名100强华为手表开发#xff1a;WATCH 3 Pro#xff08;7#xff09;获取电量信息初环境与设备文件夹#xff1a;文件新增第二页面showBatteryInfo.hmlshowBatteryInfo.js修改首页 - 新建按钮 “ 跳转 ”index.hmlindex.js 引用包#xff1a;system.router首页效果点击结果初…
华为手表开发WATCH 3 Pro7获取电量信息初环境与设备文件夹文件新增第二页面showBatteryInfo.hmlshowBatteryInfo.js修改首页 - 新建按钮 “ 跳转 ”index.hmlindex.js 引用包system.router首页效果点击结果初
希望能写一些简单的教程和案例分享给需要的人
鸿蒙可穿戴开发
环境与设备
系统window 设备HUAWEI WATCH 3 Pro 开发工具DevEco Studio 3.0.0.800
鸿蒙开发
文件夹
entry:项目文件夹 js前端文件夹 pages:页面文件夹 index:首页文件夹
文件
index.css:首页样式 index.hml:首页 index.js:首页脚本
新增第二页面
操作步骤
首先在pages鼠标右击
点击New----第二栏菜单点击Js Page
在文本框中输入页面名称showBatteryInfo名称可以自己拟定
点击弹框右下角Finsin按钮完成页面创建
如下图示例 需要引用包
import batteryInfo from ‘ohos.batteryInfo’;
代码如下
showBatteryInfo.hml
div classcontainertext classtitle电量 {{ batteryValue }}/text
/div
showBatteryInfo.js import batteryInfo from ohos.batteryInfo;export default {data: {batteryValue: 0},onInit() {this.batteryValue batteryInfo.batterySOC;console.info(dao_logger:: 电量信息为 this.batteryValue)}
} 修改首页 - 新建按钮 “ 跳转 ”
index.hml
在HTML文件“index.hml”添加按钮这里按钮用到是input标签
标签属性
type“button”【规定 input 元素的类型】
div classcontainertext classtitle你好我是首页/textinput else classbtn typebutton value跳转 onclickonClickTest/input
/divindex.js 引用包‘system.router’
onInit() : 进入页面初始化运行的方法
onClickTest () 按钮点击后触发的方法我们将跳转页面的代码写在这个位置就可以实现点击按钮进行跳转页面的动作 import router from system.router;export default {data: {title: },onInit() {this.title this.$t(strings.world);},onClickTest() {router.push({uri: pages/showBatteryInfo/showBatteryInfo,});}
}
首页效果
首页显示效果 点击结果
跳转后显示效果
