企业官网建设流程全解析

外贸企业网站源码下载,wordpress 越来越慢,e龙岩官网登录,胡先煦回复秦海璐网页链接https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5 路由简介#xff1a; 普通用户#xff1a;网址 开发人员#xff1a;域名 》延伸知识点 域名价格 65左右、域名后缀 com商业/cn中国/net网络供应商/edu教育/org非营利性/it意大利…https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5路由简介普通用户网址 开发人员域名 》延伸知识点 域名价格 65左右、域名后缀 com商业/cn中国/net网络供应商/edu教育/org非营利性/it意大利 鸿蒙里面路由路由/网址/域名组成协议://域名:端口/路径?参数名数据...参数名数据 http://baidu.com:80/login?参数名数据...参数名数据路径作用显示不同的页面布局结构不一样、数据都不同参数作用显示不同的数据布局结构一样、数据不同留 心路径后面一般是参数有n种方式一般分为两种 传参1协议://域名:端口/路径?参数名值....参数名值 【query传参/get方式传参】 传参2协议://域名:端口/路径/参数1/.../参数n 【params传参】 ​ http://baidu.com/user/12 /user/:id 定义路由的去规定了 http://baidu.com/user?id11.1 路由配置resource/base/profile/main_pages.json{ src: [ pages/Index, pages/Cart, pages/Detail ] }细节1路由配置在json文件中 所以必须写 双引号数组的最后一个不能写逗号细节2咱们后面写代码目录统一小写组件名大写1.2 页面跳转页面栈的最大容量为32个页面。如果超过这个限制可以调用router.clear()方法清空历史页面栈释放内存空间。Router模块提供了两种跳转模式分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页router.pushUrl()目标页不会替换当前页而是压入页面栈。这样可以保留当前页的状态并且可以通过返回键或者调用router.back()方法返回到当前页// 引入路由模块 import router from ohos.router ​ Entry Component struct LearnRouter1 { State message: string Hello World ​ build() { Row() { Column() { Button(跳转到页面2).onClick(() { router.pushUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: pages/LearnRouter2 }) }) } .width(100%) } .height(100%) } }router.replaceUrl()目标页会替换当前页并销毁当前页。这样可以释放当前页的资源并且无法返回到当前页。// 引入路由模块 import router from ohos.router ​ Entry Component struct LearnRouter1 { State message: string Hello World ​ build() { Row() { Column() { Button(替换到页面2).onClick(() { router.replaceUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: pages/LearnRouter2 }) }) } .width(100%) } .height(100%) } }1.3 路由传参使用params对象传参// 引入路由模块 import router from ohos.router ​ Entry Component struct LearnRouter1 { State message: string Hello World ​ build() { Row() { Column() { Button(替换到页面2).onClick(() { /** * pushUrl接收第二个参数 * 跳转模式 */ router.pushUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: pages/LearnRouter2, // 使用params对象传参 params: { name: 张三, age: 20 } // 标准实例模式 // }, router.RouterMode.Standard) // 单例模式 }, router.RouterMode.Single) }) } .width(100%) } .height(100%) } }接收参数import router from ohos.router ​ Entry Component struct LearnRouter2 { State message: string Hello World ​ build() { Row() { Column() { Button(获取参数).onClick(() { const params router.getParams() console.log(JSON.stringify(params)) }) } .width(100%) } .height(100%) } } ​ ​ ​ ​ import router from ohos.router ​ interface RouterParams { content: string } ​ Entry Component struct Other { // created onLoad aboutToAppear // mounted onReady ​ aboutToAppear() { const parmas router.getParams() as RouterParams console.log(JSON.stringify(parmas)) console.log(parmas.content) } ​ build() { Column() { ​ Text(hello2) Button(返回).onClick((event: ClickEvent) { router.showAlertBeforeBackPage({ message: 您还没有完成支付确定要返回吗 // 设置询问框的内容 }); ​ router.back() }) ​ Button(获取参数).onClick((event: ClickEvent) { const parmas router.getParams() console.log(JSON.stringify(parmas)) }) } } } ​1.4 页面返回前增加一个询问框系统默认询问框import router from ohos.router ​ Entry Component struct LearnRouter2 { State message: string Hello World ​ build() { Row() { Column() { Button(获取参数).onClick(() { const params router.getParams() console.log(JSON.stringify(params)) }) Button(返回上一页).onClick(() { /** * 使用showAlertBeforeBackPage * 在跳转前弹框提示 */ router.showAlertBeforeBackPage({ message: 您还没有完成支付确定要返回吗 // 设置询问框的内容 }); // 返回上一页在返回之前会拦截弹框提示 router.back() }) } .width(100%) } .height(100%) } }自定义询问框import router from ohos.router import promptAction from ohos.promptAction ​ Entry Component struct LearnRouter2 { State message: string Hello World ​ build() { Row() { Column() { Button(获取参数).onClick(() { const params router.getParams() console.log(JSON.stringify(params)) }) Button(返回上一页).onClick(async () { // 创建并显示对话框对话框响应后同步返回结果。 const result await promptAction.showDialog({ // 内容 message: 您还没有完成支付确定要返回吗, // 按钮 buttons: [ { text: 取消, color: #FF0000 }, { text: 确认, color: #0099FF } ] }) if (result.index 0) { // 用户点击了“取消”按钮 console.info(User canceled the operation.); } else if (result.index 1) { // 用户点击了“确认”按钮 console.info(User confirmed the operation.); // 调用router.back()方法返回上一个页面 router.back(); } }) } .width(100%) } .height(100%) } }1.5 实例模式需要页面栈只有一份 就单实例 否则默认需要返回pushUrl 否则 replaceUrlStandard标准实例模式也是默认情况下的实例模式。每次调用该方法都会新建一个目标页并压入栈顶Single单实例模式。即如果目标页的url在页面栈中已经存在同url页面则离栈顶最近的同url页面会被移动到栈顶并重新加载如果目标页的url在页面栈中不存在同url页面则按照标准模式跳转。// 引入路由模块 import router from ohos.router ​ Entry Component struct LearnRouter1 { State message: string Hello World ​ build() { Row() { Column() { Button(替换到页面2).onClick(() { /** * pushUrl接收第二个参数 * 跳转模式 */ router.pushUrl({ // /** * 目标url 和 src/main/resources/base/profile/main_pages.json * 目录地址一致 */ url: pages/LearnRouter2 // 标准实例模式 // }, router.RouterMode.Standard) // 单例模式 }, router.RouterMode.Single, (err) { // 跳转后的回调 ​ if (err) { // 跳转失败 console.log(err,错误信息) return } ​ console.log(跳转成功) }) }) } .width(100%) } .height(100%) } }1.6 Navigator路由容器组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-navigator-V5可以简单理解为传统的声明式导航 而router则是编程式导航路由容器组件提供路由跳转能力。Navigator({target:路由跳转的页面,type:NavigationType})target 跳转的路由页面type NavigationType.Push 添加路由历史 NavigationType.Back 回退 NavigationType.Replace 替换跳转路由历史普通跳转在这里Navigator是一个容器可以在里面放入对应的所有内容Entry Component struct Index { build() { Column(){ Navigator({target:pages/page1,type:NavigationType.Push}){ Row(){ Button(按钮1); Text(文本内容1) } } Navigator({target:pages/page2,type:NavigationType.Push}){ Row(){ Button(按钮1); Text(文本内容1) } } } } }传参传参使用params(参数)Entry Component struct Index { msg:string你好; build() { Column(){ Navigator({target:pages/page1,type:NavigationType.Push}){ Text(文本内容) }.params({msg:this.msg}) ​ } } }我们仍可以使用router.getParams()获取到传递来的参数import { router } from kit.ArkUI interface IMsg{ msg:string } Entry Component struct Page1{ build() { Row(){ Text((router.getParams() as IMsg).msg) Navigator({ target: pages/Index, type: NavigationType.Back }) { Image($rawfile(img_30.JPG)).width(100%).height(100%) // 图片存放在media文件夹下 } } } }激活模式 了解import { router } from kit.ArkUI; interface IData{ bool:boolean; } Entry Component struct Index { State nav1Bool:booleanfalse; State nav1Boo2:booleanfalse; ​ build() { Column(){ Navigator({target:pages/page1,type:NavigationType.Push}){ Text(文本内容) }.active(this.nav1Bool) ​ Button(按钮).onClick((){ this.nav1Booltrue; }) } } onPageShow(): void { const data:IDatarouter.getParams() as IData; if(data) this.nav1Booldata.bool || false; } ​ }Entry Component struct Page1{ build() { Navigator({ target: pages/Index, type: NavigationType.Back }) { Image($rawfile(img_30.JPG)).width(100%).height(100%) // 图片存放在media文件夹下 }.params({bool:false}) } }1.7 知识点小结路由简介路由就是用来跳转页面的 从而展示不同的.ets组件在ets同级resources/base/profile/main_pages.json跳转模式、路由传参、返回询问可pushUrl/replaceUrl({ url params: {} })实例模式路由模式标准的 standardSingle 单实例明确要页面站只有一个 Single 明确要返回的pushUrlNavigator组件声明式导航 Navigator({ target,type }){ 文本 } .params()欢迎加入课程班级考取鸿蒙认证https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type1?ha_sourcehmosclassha_sourceId89000248