无忧网站建设哪家好,陕西省住建厅官网,网站盈利方法,博客网站做啥好1 预览日志的方式debug
这种方式只能进行基本数据类型的打印#xff0c;适合简单调试 原始类型#xff0c;也就是非字符串需要String() 或者 .toString() 对象类型#xff0c;需要JSON.stringify转换 预览器-没事#xff0c;模拟器-打印必须加前缀 否则找不到xh Entry
…1 预览日志的方式debug这种方式只能进行基本数据类型的打印适合简单调试原始类型也就是非字符串需要String() 或者 .toString()对象类型需要JSON.stringify转换预览器-没事模拟器-打印必须加前缀 否则找不到xhEntry Component struct Index { State num:number 111 State animal:{name: string,age:number}[] [ {name:狗, age: 10}, {name:猫, age: 11}, ] build() { Button(打印调试).onClick(() { // 细节1仅支持打印字符串 // 细节2所以遇到数值型就得转换 String()、toString() // 细节3所有遇到对象也的转换为字符串打印 或者 json数据格式 // 细节4预览器-没事模拟器-打印必须加前缀 否则找不到 // 致命一击看的是预览器的打印 测试的是模拟器 // console.log(this.num) console.log(qf , String(this.num)) console.log(qf , (this.num).toString()) // console.log(this.animal) console.log(qf , JSON.stringify(this.animal)) }) } }2 断点调试以模拟器为例a. 点击编辑配置Entry Component struct Index { onTest() { let sum 0 for (let i1; i10; i) { sumi } console.log(sum.toString()) } build() { Column() { Button(start12).onClick(this.onTest) } } } b. 选择对应的entry安装方式一先卸载应用/服务后再重新安装该方式会清除设备上的所有应用/服务缓存数据默认安装方式。安装方式二采用覆盖安装方式不卸载应用/服务该方式会保留应用/服务的缓存数据采用默认安装即可c. 多模块调试支持如果一个工程中同一个设备存在多个模块如Phone设备存在entry和feature模块且存在模块间的调用时在调试阶段需要同时安装多个模块的hap包到设备中。此时需要在Deploy Multi Hap中选择多个模块启动调试时DevEco Studio会将所有的模块都安装到设备上。DevEco Studio V3.1 Release开始支持d. 点击应用后再点击确定完成配置e. 开始调试注意提前打开模拟器代码修改后需要重新点击进行调试点击小绿logo进行断电调试f. 相关功能键使用按钮名称功能快捷键Resume Program当程序执行到断点时停止执行单击此按钮程序继续执行。F9macOS为OptionCommandRStep Over在单步调试时直接前进到下一行如果在函数中存在子函数时不会进入子函数内单步执行而是将整个子函数当作一步执行。F8macOS为F8Step Into在单步调试时遇到子函数后进入子函数并继续单步执行。F7macOS为F7Force Step Into在单步调试时强制进入方法。AltShiftF7macOS为OptionShiftF7Step Out在单步调试执行到子函数内时单击Step Out会执行完子函数剩余部分并跳出返回到上一层函数。ShiftF8macOS为ShiftF8Stop停止调试任务。CtrlF2macOS为CommandF2Run To Cursor断点执行到鼠标停留处。AltF9macOS为OptionF91、点击右上角entry位置 配置多模块 忽略2、点击代码断点3、点击右上角小虫子 debug调试3 this指向原生简单概括 调用当前方法的对象 也就是谁调用的打印的就是谁固定公式普通函数 window 对象函数 对象本身 事件函数 事件源 定时器函数 window 箭头函数 父function中的this 父没有function就是window 自定义 call/apply/bind 构造函数 this 实例化对象 公共空间/原型对象上方法中的thiscodebutton1/button script const fn1 function() { console.log(普通函数 window: , this) } fn1() const obj1 { a:1, b:2, c: function() {}, d() { console.log(对象函数 对象本身, this) } } obj1.d() document.querySelector(button).onclick function() { console.log(事件函数, this) } setTimeout(function() { // TODO: 切记别写箭头 写了就是父级this指向 console.log(定时器函数 window , this) }, 0) class Animal { a 1 b 2 eat() { console.log(构造函数/类中的 自身, this) } } const dog new Animal() // {a:1,b:2} dog.eat() /script鸿蒙this 自身/组件实例Entry Component struct Index { // 需 求验证鸿蒙中的this是谁确保写项目别出问题 // 明确1 鸿蒙声明响应式数据参考了class语法 // 明确2 加State修饰符才有影响是 》 State 当数据改变会重新同步到视图 // 1 定义数据 组件大括号里面声明 {} 修饰符 数据名:类型 数据 // 2 获取数据 this.数据名 // 3 更新数据 this.数据名 数据 // State 响应式数据名:类型 数据 // State 状态:类型 数据 // 声明/定义 响应式数据 // 声明/定义 状态 State num:number 1 aaa 1111 bbbb 2222 cccc 3333 dddd function() {} other() {} build() { Column() { Text(String(this.num)) Button(测试响应式效果) .onClick(() { console.log(hello) this.num console.log(内存数据,this.num) // 组件自身、组件实例 里面存放了 自身数据 }) Button(打印this).onClick(() { console.log(this是谁, this) // 留心对象看不到具体数据咱们可以吧对象转换为字符串 JSON数据格式 console.log(this是谁, JSON.stringify(this)) // console.log(this是谁, this.fn) console.log(this是谁, this.other) }) } } }this使用细节箭头函数调用或者箭头函数声明否则this会出现undefined情况推荐声明统一正常写调用加箭头const obj1 { a:1, b:2, c: function() {}, d() { console.log(1, this) setTimeout(() { console.log(2, this) }, 0) setTimeout(function() { console.log(3, this) }, 0) } } obj1.d()Entry Component struct Index { // es6 类class语法 属性名 数据 只不过赋值是一个函数 // onTest1 () { // // } // es6 类class语法 原型的写法 // onTest2() { onTest2 () { // 父级环境中的this 因为父级是组件实例 console.log(hello, this) } build() { Column() { // 调用数据 this.状态名 // 调用函数 this.函数名() this.函数名 // - 区别1有小括号执行了 // - 去背2如果打印他们两 有小括号因为执行了所以打印的结果 没写return undefined、 没有小括号打印的是函数本身 // Button(this调用函数的细节).onClick(() { // console.log(【不加】小括号调用, this.onTest2) // 函数本身 // console.log(【 加】小括号调用, this.onTest2()) // 执行打印返回结果 // }) // Button(this调用函数的细节).onClick(this.onTest2()) Button(this调用函数的细节).onClick(this.onTest2) // 发现undefined // Button(this调用函数的细节).onClick(() { // this.onTest2() // }) } } }欢迎加入课程班级考取鸿蒙认证https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type1?ha_sourcehmosclassha_sourceId89000248