-
原生跳转拨打电话页面原创男孩收纳专栏 : 日常记录 2025-08-01 18:32发布于:山西 21开发步骤1.import需要的模块。2.调用hasVoiceCapability()接口获取当前设备呼叫能力,如果支持继续下一步;如果不支持则无法发起呼叫。3.跳转到拨号界面,并显示拨号的号码。 // import需要的模块import call from '@ohos.telephony.call';import observer from '@ohos.telephony.observer';// 调用查询能力接口let isSupport = call.hasVoiceCapability();if (!isSupport) { console.log("not support voice capability, return."); return;}// 如果设备支持呼叫能力,则继续跳转到拨号界面,并显示拨号的号码call.makeCall("13xxxx", (err)=> { if (!err) { console.log("make call success."); } else { console.log("make call fail, err is:" + JSON.stringify(err)); }});// 订阅通话业务状态变化(可选)observer.on("callStateChange", (data) => { console.log("call state change, data is:" + JSON.stringify(data));});
-
一丶使用DialogHelper三方组件进行全局或者当前页面loading加载1.首先在页面@state一个弹窗id(在本页使用或者在全局使用都会用到)@statedialogId:string = ''''2.在需要loading加载的地方进行DialogHelper调用this.dialogId = DialogHelper.showLoadingDialog({ autoCancel: false })3.loading弹窗取消DialogHelper.closeDialog(this.dialogId)注:如果在全局使用当前loading可以通过持久化的方式存储dialogId然后在取消的时候进行调用二丶自定义封装弹窗1.可以自定义封装一个LoadingProgress2.通过自定义方法动态绑定该弹窗的Visibility属性: (1) Visibility.Visible 显示(2) Visibility.None 移除布局不占位3.将该组件暴露出去,在使用的地方使用方法进行显隐控制注:这是一个大概的思路,希望可以帮助到大家
-
一丶可以使用官方文档的@ohos.net.http(数据请求)进行搭建1.导入模块import { http } from '@kit.NetworkKit';2.示例代码// 引入包名import { http } from '@kit.NetworkKit';import { BusinessError } from '@kit.BasicServicesKit';// 每一个httpRequest对应一个HTTP请求任务,不可复用。let httpRequest = http.createHttp();// 用于订阅HTTP响应头,此接口会比request请求先返回。可以根据业务需要订阅此消息。// 从API 8开始,使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+httpRequest.on('headersReceive', (header: Object) => { console.info('header: ' + JSON.stringify(header));});httpRequest.request(// 填写HTTP请求的URL地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定。 "EXAMPLE_URL", { method: http.RequestMethod.POST, // 可选,默认为http.RequestMethod.GET。 // 当使用POST请求时此字段用于传递请求体内容,具体格式与服务端协商确定。 extraData: 'data to send', expectDataType: http.HttpDataType.STRING, // 可选,指定返回数据的类型。 usingCache: true, // 可选,默认为true。 priority: 1, // 可选,默认为1。 // 开发者根据自身业务需要添加header字段。 header: { 'Accept' : 'application/json' }, readTimeout: 60000, // 可选,默认为60000ms。 connectTimeout: 60000, // 可选,默认为60000ms。 usingProtocol: http.HttpProtocol.HTTP1_1, // 可选,协议类型默认值由系统自动指定。 usingProxy: false, //可选,默认不使用网络代理,自API 10开始支持该属性。 caPath: '/path/to/cacert.pem', // 可选,默认使用系统预设CA证书,自API 10开始支持该属性。 clientCert: { // 可选,默认不使用客户端证书,自API 11开始支持该属性。 certPath: '/path/to/client.pem', // 默认不使用客户端证书,自API 11开始支持该属性。 keyPath: '/path/to/client.key', // 若证书包含Key信息,传入空字符串,自API 11开始支持该属性。 certType: http.CertType.PEM, // 可选,默认使用PEM,自API 11开始支持该属性。 keyPassword: "passwordToKey" // 可选,输入key文件的密码,自API 11开始支持该属性。 }, certificatePinning: [ // 可选,支持证书锁定配置信息的动态设置,自API 12开始支持该属性。 { publicKeyHash: 'Pin1', // 由应用传入的证书PIN码,自API 12开始支持该属性。 hashAlgorithm: 'SHA-256' // 加密算法,当前仅支持SHA-256,自API 12开始支持该属性。 }, { publicKeyHash: 'Pin2', // 由应用传入的证书PIN码,自API 12开始支持该属性。 hashAlgorithm: 'SHA-256' // 加密算法,当前仅支持SHA-256,自API 12开始支持该属性。 } ], multiFormDataList: [ // 可选,仅当Header中,'content-Type'为'multipart/form-data'时生效,自API 11开始支持该属性。 { name: "Part1", // 数据名,自API 11开始支持该属性。 contentType: 'text/plain', // 数据类型,自API 11开始支持该属性。 data: 'Example data', // 可选,数据内容,自API 11开始支持该属性。 remoteFileName: 'example.txt' // 可选,自API 11开始支持该属性。 }, { name: "Part2", // 数据名,自API 11开始支持该属性。 contentType: 'text/plain', // 数据类型,自API 11开始支持该属性。 // data/app/el2/100/base/com.example.myapplication/haps/entry/files/fileName.txt filePath: `${getContext(this).filesDir}/fileName.txt`, // 可选,传入文件路径,自API 11开始支持该属性。 remoteFileName: 'fileName.txt' // 可选,自API 11开始支持该属性。 } ] }, (err: BusinessError, data: http.HttpResponse) => { if (!err) { // data.result为HTTP响应内容,可根据业务需要进行解析。 console.info('Result:' + JSON.stringify(data.result)); console.info('code:' + JSON.stringify(data.responseCode)); console.info('type:' + JSON.stringify(data.resultType)); // data.header为HTTP响应头,可根据业务需要进行解析。 console.info('header:' + JSON.stringify(data.header)); console.info('cookies:' + JSON.stringify(data.cookies)); // 自API version 8开始支持cookie。 // 取消订阅HTTP响应头事件。 httpRequest.off('headersReceive'); // 当该请求使用完毕时,开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); } else { console.info('error:' + JSON.stringify(err)); // 取消订阅HTTP响应头事件。 httpRequest.off('headersReceive'); // 当该请求使用完毕时,开发者务必调用destroy方法主动销毁该JavaScript Object。 httpRequest.destroy(); } });二丶axios:Axios,是一个基于 promise 的网络请求库,本库基于Axios 原库v1.3.4版本进行适配,使其可以运行在 OpenHarmony。1.下载安装依赖ohpm install @ohos/axios2.进行权限设置ohos.permission.INTERNET3.接口与属性列表接口参数功能axios(config)config:请求配置发送请求axios.create(config)config:请求配置创建实例axios.request(config)config:请求配置发送请求axios.get(url[, config])url:请求地址config:请求配置发送get请求axios.delete(url[, config])url:请求地址config:请求配置发送delete请求axios.post(url[, data[, config]])url:请求地址data:发送请求体数据config:请求配置发送post请求axios.put(url[, data[, config]])url:请求地址data:发送请求体数据config:请求配置发送put请求属性列表属性描述axios.defaults['xxx']默认设置 。值为请求配置 config 中的配置项例如 axios.defaults.headers 获取头部信息axios.interceptors拦截器。参考 拦截器 的使用说明:由于ArkTS不再支持any类型,需指定参数的具体类型。 如:axios.get<T = any, R = AxiosResponse, D = any>(url)T: 是响应数据类型。当发送一个 POST 请求时,客户端可能会收到一个 JSON 对象。T 就是这个 JSON 对象的类型。默认情况下,T 是 any,这意味着可以接收任何类型的数据。R: 是响应体的类型。当服务器返回一个响应时,响应体通常是一个 JSON 对象。R 就是这个 JSON 对象的类型。默认情况下,R 是 AxiosResponse,这意味着响应体是一个 AxiosResponse 对象,它的 data 属性是 T 类型的D: 是请求参数的类型。当发送一个 GET 请求时,可能会在 URL 中添加一些查询参数。D 就是这些查询参数的类型。参数为空情况下,D 是 null类型。4.示例interface user { firstName: string, lastName: string } axios.post<string, AxiosResponse<string>, user>('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then((response: AxiosResponse<string>) => { console.info(JSON.stringify(response)); }) .catch((error) => { console.info(JSON.stringify(error)); });三丶@yunkss/ef_rcp三方库的组件efRcpClientApi
-
1.获取应用窗口 let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口2.注册监听函数,动态获取避让区域数据 windowClass.on('avoidAreaChange', (data) => { // 判断当前变化的避让区域类型是否为系统避让区域 if (data.type === window.AvoidAreaType.TYPE_SYSTEM) { // 获取系统避让区域的高度并存储 let topRectHeight = data.area.topRect.height; LogUtil.info('状态栏高度:',topRectHeight.toString()) AppStorage.setOrCreate(Keys.topRectHeight, topRectHeight); } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { // 获取导航条避让区域的高度并存储 let bottomRectHeight = data.area.bottomRect.height; LogUtil.info('导航栏高度:',bottomRectHeight.toString()) AppStorage.setOrCreate(Keys.bottomRectHeight, bottomRectHeight); }});
-
自定义组件生命周期onBackPress()当用户点击返回按钮时触发(仅router路由页面生效)。返回true表示页面自己处理返回逻辑,不进行页面路由;返回false表示使用默认的路由返回逻辑,不设置返回值按照false处理。1.在原生app内监听侧滑返回可以通过自定义时间戳 根据两次返回的时间间隔进行判断是否要退出应用 State backPressTime: number = 0 onBackPress():boolean{ if (this.backPressTime + 2000 > new Date().getTime()) { return false // 退出应用 } else { ToastUtil.showToast($r('app.string.tip_exit_app')) this.backPressTime = new Date().getTime() return true // 不退出应用 }}2.h5监听原生侧滑返回事件在h5嵌套的page页面 private webController: webview.WebviewController = new webview.WebviewController(); onBackPress(): boolean { if (this.controller?.accessBackward()) { this.controller?.backward(); return true; } return false;}
-
产品侧配置:进入产品详情 > "模型定义"确认已开启"动态注册"功能检查"产品密钥"是否与代码中productSecret一致模型定义里,没有找到"动态注册"开启的开关现在进入产品详情,模型定义可以没有看到开启"动态注册"功能的开关
-
业务背景:一次性加载过多列表项,占用过多内存,列表项布局过于复杂,频繁的UI重绘,低端手机出现滑动卡顿问题 1. 基本实现方案import { Scroll, LazyForEach } from '@ohos/arkui'; import { ViewBuilder, ViewProcessor } from '@ohos/arkui'; class MyDataSource implements IDataSource { private dataArray: string[] = []; // 你的数据源 private listeners: DataChangeListener[] = []; constructor(data: string[]) { this.dataArray = data; } totalCount(): number { return this.dataArray.length; } getData(index: number): string { return this.dataArray[index]; } registerDataChangeListener(listener: DataChangeListener): void { this.listeners.push(listener); } unregisterDataChangeListener(listener: DataChangeListener): void { const index = this.listeners.indexOf(listener); if (index >= 0) { this.listeners.splice(index, 1); } } // 数据更新时通知监听器 notifyDataChange(): void { this.listeners.forEach(listener => { listener.onDataReloaded(); }); } } @Entry @Component struct OptimizedList { private data: MyDataSource = new MyDataSource(/* 初始化你的数据 */); build() { Scroll() { LazyForEach(this.data, (item: string) => { ListItem() { Text(item) .fontSize(16) .margin({ top: 10, bottom: 10 }) } }, (item: string) => item) } .width('100%') .height('100%') } } 2. 进一步优化方案@Entry @Component struct FurtherOptimizedList { private data: MyDataSource = new MyDataSource(/* 初始化数据 */); @State cachedItems: Map<number, string> = new Map(); // 缓存已加载的项 build() { Scroll() { LazyForEach(this.data, (item: string, index: number) => { ListItem() { // 使用缓存避免重复计算 this.buildCachedItem(item, index) } .height(80) // 固定高度有助于性能 .backgroundColor(index % 2 === 0 ? '#F5F5F5' : '#FFFFFF') // 简单的交替背景色 }, (item: string) => item) } .width('100%') .height('100%') } @Builder buildCachedItem(item: string, index: number) { if (!this.cachedItems.has(index)) { // 复杂的列表项可以在这里构建并缓存 Column() { Text(item) .fontSize(16) .fontWeight(FontWeight.Bold) Text(`详情 ${index}`) .fontSize(12) .opacity(0.7) } .margin({ top: 10, bottom: 10 }) .onAppear(() => { this.cachedItems.set(index, item); }) } else { // 使用缓存项 Column() { Text(item) .fontSize(16) .fontWeight(FontWeight.Bold) Text(`详情 ${index}`) .fontSize(12) .opacity(0.7) } .margin({ top: 10, bottom: 10 }) } } }使用LazyForEach:只渲染可视区域内的列表项滚动时动态加载和卸载列表项固定高度:为ListItem设置固定高度可以避免动态计算布局缓存复杂列表项:对于复杂的列表项布局,使用缓存避免重复构建简化列表项布局:尽量减少列表项的嵌套层级避免在列表项中使用过于复杂的动画分页加载:对于超长列表,可以实现分页加载监听Scroll的滚动事件,接近底部时加载更多数据@Entry @Component struct PaginatedList { private data: MyDataSource = new MyDataSource(/* 初始数据 */); @State currentPage: number = 1; private isLoading: boolean = false; build() { Scroll() { LazyForEach(this.data, (item: string) => { ListItem() { Text(item) .fontSize(16) } }, (item: string) => item) } .width('100%') .height('100%') .onScrollEdge((edge: ScrollEdge) => { if (edge === ScrollEdge.Bottom && !this.isLoading) { this.loadMoreData(); } }) } loadMoreData() { this.isLoading = true; // 模拟异步加载数据 setTimeout(() => { const newData = /* 获取下一页数据 */; this.data.appendData(newData); this.currentPage++; this.isLoading = false; }, 1000); } }
-
问题背景针对App产品存在多个客户端版本的情况下,同时开发 多 个 App 时,由于业务目标、用户群体可能存在差异,且需兼顾协同效率与质量稳定性,容易暴露出比单一 App 开发更复杂的问题多产品App核心问题,本质是 “个性需求与共性能力的平衡失控”:资源分散导致效率低,协同缺失导致体验乱,版本混乱导致风险高。无 模块化架构设计,项目陷入 “开发慢、改不动、问题多” 的恶性循环。 安卓开发现状人力资源分配矛盾:若 多 个 App 并行开发,核心开发人员(如架构师、资深工程师)需同时跟进多个项目,精力被稀释,导致技术决策延迟、关键问题响应变慢。基层开发人员若按 “1 个 App 对应 1 个团队” 划分,会出现 “同一项基础功能(如图片上传、异常监控)3 个团队各做一套” 的情况,重复劳动率高达 40%-60%,直接拉长整体开发周期。技术栈与规范难统一若 多个 App 由不同团队开发,可能因 “团队习惯” 采用差异技术方案,导致后续跨 App 协作(如人员轮岗、问题排查)成本陡增即使预先制定规范,也可能因 “赶进度” 出现执行偏差(如命名规则、接口格式不统一),后期需额外投入人力做标准化整改共性能力重复开发,维护难度翻倍:多个 App 必然存在共性能力(如登录、支付、网络请求、数据埋点),若未提前抽象复用,会导致:同一功能出现 多套代码,修复一个共性 Bug(如登录接口超时逻辑)需在 3多个 App 中分别修改,漏改概率增加共性能力升级(如支付渠道新增)需 多个团队同步适配,协调成本随 App 数量呈指数级增长版本规划与测试压力陡增多 个 App 的版本迭代节奏可能不同(如 A App 需每月一更,B App 每两周一更,C App 紧急上线),测试资源(如测试设备、自动化脚本)需在 3 个项目间频繁切换,导致测试覆盖率下降,漏测风险升高。若 多 个 App 依赖同一基础组件(如自研的网络库),该组件升级后,需 多个 App 同步完成兼容性测试才能发布,任何一个 App 的测试延迟都会拖慢整体进度。线上问题连锁反应若共性能力(如埋点 SDK)存在隐藏 Bug,可能导致 多个 App 同时出现数据异常,线上故障排查时需 “多线并行定位”,定位时间比单一 App 问题长 2-3 倍。某一个 App 的紧急发布(如修复崩溃 Bug)可能因 “打包环境共享”“配置文件混淆” 影响其他 App 的发布包稳定性(如误打包旧版本代码)。业务与扩展性:差异需求失控多 个 App 的业务差异(如 A App 需社交功能,B App 需电商功能,C App 需工具功能)可能要求对共性能力做 “定制化修改”(如登录模块为 A App 新增 “第三方社交账号登录”,为 B App 新增 “手机号一键登录”),若修改未抽象成可配置逻辑,会导致共性模块逐渐 “臃肿”,最终失去复用价值 鸿蒙解决方案 整体架构设计思路: 备注:一个业务功能,即为一个工程(整个工程下的一个文件夹),编译出后是一个HAR/HSP类型的包。多个HAR/HSP组合打包出的包为HAP包。(HAR、HSP、HAP包区别参考:https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_35-0000002343405565) 在鸿蒙生态中,通过 ArkTS 语言和 ArkUI 框架的原生支持,可以高效实现 "一套工程、多 App 发布" 的架构。具体实现策略:功能模块包模块化设计:可插拔组件化开发。由组件复用提供基础能力,例如:一键加油、爱车服务、无感支付、在线订单、高德、在线商城等业务功能,每个都由HAR/HSP工程创建,实现业务功能与业务无关的网络库、埋点SDK、图片加载等,每个都由HAR/HSP工程创建,实现基础功能。由业务功能HAR/HSP包调用,为业务功能提供基础能力上述业务功能HAR/HSP包,基础功能HAR/HSP包,可自由组合,被HAP工程引入,由HAP工程打包出用户版、商户版、供应商版三个版本工程架构设计,组件复用,实现一套代码库支撑多 App用户版HAP工程打包:创建hapTasks类型的工程(运行出的包为HAP包),将多个需要的多个业务功能包( HAR/HSP工程(文件夹))引入,编码实现用户版的功能。商户版、供应商版也是如此。用户版打包:需为车主提供便捷的车辆养护、维修、紧急救援等服务,引入一键加油、爱车服务、无感支付HAR/HSP,实现相关业务逻辑后,打包成HAP包商户版打包:需帮助维修店/4S店高效管理客户和服务流程,引入在线订单、高德HAR/HSP,实现相关业务逻辑后,打包成HAP包供应商版打包:为配件供应商提供B2B销售渠道和管理工具,引入在线商城、充值相关渠道配置HAR/HSP,实现相关业务逻辑后,打包成HAP包如何打HAP包(多个app的差异化打包):。上述用户版、商户版、供应商版工程,每个工程需要配置:包名、签名、证书、打包输出的文件夹路径、相关资源(如主题资源、图片资源等)每个 HAP 的 module.json 中,bundleName、bundleType、versionCode、debug、minAPIVersion 保持一致;module 的 name 字段互不相同;minCompatibleVersionCode、targetAPIVersion 保持一致配置后,通过执行Hvigor命令,打包成HAP包(Hvigor脚本参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/packing-tool#多工程打包指令) 解决痛点模块化设计,代码复用率提升:基础组件统一维护,避免重复开发(复用率可达 70%-90%)。功能模块通过配置按需加载,无需为每个 App 单独编写代码,并且可以将可插拔的模块组合打包多个App。组件复用,开发效率提升:修改公共组件自动同步到所有 App,减少重复测试和发布流程。新增功能只需在对应模块开发,通过配置快速集成到需要的 App。维护成本降低:单一工程结构减少代码仓库管理复杂度,团队协作更高效。版本控制更简单,所有 App 基于同一代码基线演进。灵活扩展能力:新增 App 只需创建新的配置文件和专属资源,无需复制代码。功能模块可独立升级,不影响其他 App。 组件设计思路: 组件复用,设计思路:基础层组件:网络库、埋点SDK、图片加载等与业务无关联的,放入基础层,可供任何App提供底层能力业务层:支付模块、订单、商品详情等,与业务强关联,需要考虑多个App版本的不同差异化能力、公共能力,进一步抽出例如可选复用的业务功能,作为多个App集成的公共业务差异化的使用动态Feature包由多个App灵活调用,并且可设计多个Feature包,可插拔给多个App组合使用产品层:根据不同App版本,将公共资源统一管理、特定产品特定资源文件、代码中动态加载资源,封装在不同的App中每个App就固定使用这些资源、动态加载业务层的业务包,灵活配置不用App版本之间所需要的业务功能基础层、业务层功能维护: 每个基础能力、业务模块完全独立开发,无需关心是哪个App来调用,仅需关注本身能力、业务的迭代开发 基础组件案例案例1,验证码组件: import { inputMethod } from '@kit.IMEKit';import { emitter } from '@kit.BasicServicesKit';import { hilog } from '@kit.PerformanceAnalysisKit';@Extend(Text)function verifyCodeUnitStyle() { .fontSize($r("sys.float.ohos_id_text_size_body1")) .fontWeight(60) .textAlign(TextAlign.Center) .width($r("app.integer.verify_code_code_unit_with")) .height('100%') .margin({ left: $r("app.integer.verify_code_code_unit_margin"), right: $r("app.integer.verify_code_code_unit_margin") }) .border({ width: { bottom: $r("app.integer.verify_code_code_border_width") }, color: { bottom: Color.Grey }, style: { bottom: BorderStyle.Solid } })}@Componentstruct VerifyCodeComponentWithoutCursor { @State codeText: string = ""; private readonly verifyID: string = "verifyCodeComponent"; private inputController: inputMethod.InputMethodController = inputMethod.getController(); // 监听键盘弹出收起状态 @State isKeyboardShow: boolean = false; private verifyCodeLength: number = 6; private isListen: boolean = false; private textConfig: inputMethod.TextConfig = { inputAttribute: { textInputType: inputMethod.TextInputType.NUMBER, enterKeyType: inputMethod.EnterKeyType.GO }, }; private codeIndexArray: Array<number> = Array.from([0, 1, 2, 3, 4, 5]); // 注册路由返回函数,案例插件不触发 popRouter: () => void = () => { }; aboutToAppear(): void { // 注册返回监听,包括点击手机返回键返回与侧滑返回 this.listenBackPress(); } async attachAndListen(): Promise<void> { focusControl.requestFocus(this.verifyID); await this.inputController.attach(true, this.textConfig); logger.info("attached"); this.listen(); this.isKeyboardShow = true; } listenBackPress() { let innerEvent: emitter.InnerEvent = { eventId: 5 }; // 收到eventId为5的事件后执行回调函数 emitter.on(innerEvent, () => { if (this.isKeyboardShow) { // 退出文本编辑状态 this.inputController.hideTextInput(); this.isKeyboardShow = false; } else { this.popRouter(); } }); } aboutToDisappear(): void { this.off(); // 关闭事件监听 emitter.off(5); } /** * TODO 知识点:绑定输入法 */ async attach() { await this.inputController.attach(true, this.textConfig); logger.info("attached"); } /** * TODO:知识点:解绑 */ off(): void { this.inputController.off("insertText"); this.inputController.off("deleteLeft"); this.isListen = false; logger.info("detached"); // 退出文本编辑状态 this.inputController.hideTextInput(); this.isKeyboardShow = false; } /** * TODO 知识点:订阅输入法代插入、向左删除事件,从而获得键盘输入内容 */ listen() { if (this.isListen) { return; } this.inputController.on("insertText", (text: string) => { if (this.codeText.length >= this.verifyCodeLength || isNaN(Number(text)) || text === ' ') { return; } this.codeText += text; if (this.codeText.length === this.verifyCodeLength) { logger.info("VerifyCode: %{public}s", this.codeText); } logger.info("VerifyCode [insert]: %{public}s", this.codeText); }) this.inputController.on("deleteLeft", (length: number) => { this.codeText = this.codeText.substring(0, this.codeText.length - 1); logger.info("VerifyCode [delete left]: %{public}s", this.codeText); }) this.isListen = true; logger.info("listener added"); } /** * TODO 知识点:部分验证码场景要完全禁止对输入验证码的选中、复制等功能,因此可以使用Text组件完成 */ @Builder buildVerifyCodeComponent() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { ForEach(this.codeIndexArray, (item: number, index: number) => { Text(this.codeText[item]) .verifyCodeUnitStyle() }, (item: number, index: number) => item.toString()) } .id(this.verifyID) /** * TODO:知识点:当可视面积变化时进行绑定注册与解绑 */ .onBlur(() => { this.off(); }) .backgroundColor(Color.Transparent) .height($r("app.integer.verify_code_verify_code_height")) .margin({ left: $r("sys.float.ohos_id_card_margin_start"), right: $r("sys.float.ohos_id_card_margin_start") }) .defaultFocus(true) .onClick(() => { // TODO 知识点:点击本组件时弹出输入法,因为这里使用的是Text组件,因此需要重新attach,而不能直接使用showSoftKeyboard this.attachAndListen(); }) } build() { Row() { this.buildVerifyCodeComponent() } }}@Builderexport function VerifyCodeViewBuilder() { VerifyCodeView()}/** * 验证码组件:禁用选中、复制、光标 */@Componentexport struct VerifyCodeView { popRouter: () => void = () => { }; build() { NavDestination(){ Column() { VerifyCodeComponentWithoutCursor({ popRouter: this.popRouter }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) } .title('验证码界面') }}/** * 日志打印类 */class Logger { private domain: number; private prefix: string; private format: string = '%{public}s, %{public}s'; constructor(prefix: string) { this.prefix = prefix; this.domain = 0xFF00; this.format.toUpperCase(); } debug(...args: string[]) { hilog.debug(this.domain, this.prefix, this.format, args); } info(...args: string[]) { hilog.info(this.domain, this.prefix, this.format, args); } warn(...args: string[]) { hilog.warn(this.domain, this.prefix, this.format, args); } error(...args: string[]) { hilog.error(this.domain, this.prefix, this.format, args); }}export let logger = new Logger('[CommonAppDevelopment]') 案例2,地址选择器组件: import { window } from '@kit.ArkUI';import { AddressInfo, AddressType, CommonAddressList, Location, Province } from '../model/AddressModel';import { JsonUtils } from '../utils/JsonUtils';/** * 常量 */export default class Constants { // 自定义TabBar切换tab动画分隔线宽度 public static readonly DIVIDER_WIDTH: number = 20; // 顶部省市区间隔 public static readonly AREA_SPACE: number = 12; // rawfile目录下的省市区json文件 public static readonly JSON_FILE: string = 'address';}/** * 自定义地址选择组件CustomAddressPicker */@Componentexport struct CustomAddressPicker { // 底部导航条区域高度 @State bottomHeight: number = 0; // 选择的省市区 @State provinceCityRegion: string = '省、市、区'; // 用于对外提供选择后的省市区信息或者传入地址信息 @Link address: AddressInfo; // 地址选择半模态弹窗显隐标志位 @State isShow: boolean = false; // 当前选择的省、市、区tab页签的index。0表示省,1表示市,2表示区 @State currentIndex: number = AddressType.Province; // 调用changeIndex切换TabContent动画时长 @State animationDuration: number = 300; // 省List @State provinceList: CommonAddressList[] = []; // 市List @State cityList: CommonAddressList[] = []; // 区List @State regionList: CommonAddressList[] = []; // 记录上一次市List @State lastCityList: CommonAddressList[] = []; // 记录上一次区List @State lastRegionList: CommonAddressList[] = []; // 存放选择的省数据 @State province: Province = new Province('', '', []); // 记录当前省市区选择信息 @State currentSelectInfo: AddressInfo = new AddressInfo(); // 记录上一次省市区选择信息 @State lastSelectInfo: AddressInfo = new AddressInfo(); // 选择的省市区名下方的下滑线水平偏移量 @State leftMargin: number = 0; // 存放上一次选择的省市区名下方的下滑线水平偏移量 private lastLeftMargin: number = 0; // 存放选择的省市区名下方的下滑线位置信息 private textInfos: [number, number][] = []; // 存放从json读取的省市区数据 private data: Province[] = []; private controller: TabsController = new TabsController(); async aboutToAppear() { // 获取导航条高度,半模态弹窗内容进行避让 window.getLastWindow(getContext(), (err, data) => { const avoidAreaBottom = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) this.bottomHeight = avoidAreaBottom.bottomRect.height }) // 从json文件读取省市区数据 const addressData: Province[] = await JsonUtils.getAddressJson(Constants.JSON_FILE) if (!addressData || addressData.length === 0) { console.error('省市区数据加载失败'); return; } for (let index = 0; index < addressData.length; index++) { this.data.push(addressData[index]) this.provinceList.push(new CommonAddressList(addressData[index].code, addressData[index].name)); } // 首次加载AddressPickerComponent如果传入了有效的地址信息,拉起地址选择半模态页面时,会按传入的地址信息进行显示 this.initAddressSelect() } /** * 首次加载AddressPickerComponent如果传入了有效的地址信息时,在拉起地址选择半模态页面时,会按传入的地址信息进行显示 */ initAddressSelect() { if (this.address.province !== '' && this.address.city !== '' && this.address.region !== '') { this.provinceCityRegion = this.address.province + this.address.city + this.address.region this.currentSelectInfo.province = this.address.province this.currentSelectInfo.city = this.address.city this.currentSelectInfo.region = this.address.region //查找对应的市,区地址信息 this.data.forEach(province => { if (province.name === this.address.province) { this.currentSelectInfo.provinceId = province.code; this.address.provinceId = province.code; province.children.forEach(city => { // 只提取市级的code和name this.cityList.push(new CommonAddressList(city.code, city.name)) if (city.name === this.address.city) { this.currentSelectInfo.cityId = city.code this.address.cityId = city.code city.children.forEach(region => { // 只提取区级的code和name this.regionList.push(new CommonAddressList(region.code, region.name)) if (region.name === this.address.region) { this.currentSelectInfo.regionId = region.code this.address.regionId = region.code // 深拷贝保存到相应的变量中 this.lastSelectInfo = JSON.parse(JSON.stringify(this.currentSelectInfo)) this.lastCityList = JSON.parse(JSON.stringify(this.cityList)); this.lastRegionList = JSON.parse(JSON.stringify(this.regionList)); this.animationDuration = 0; } }) } }) } }) } } /** * 选择的省市区名下方的下滑线动画 * @param duration 动画时长 * @param leftMargin 下划线动画偏移量 */ startAnimateTo(duration: number, leftMargin: number) { animateTo({ duration: duration, // 动画时长 curve: Curve.Linear, // 动画曲线 iterations: 1, // 播放次数 playMode: PlayMode.Normal // 动画模式 }, () => { this.leftMargin = leftMargin; }) } /** * 用于显示选择的省、市、区名 * @param params 传入要显示的省、市、区名 */ @Builder locationItem(params: Location) { Text(params.name === '' ? "请选择" : params.name) .height("100%") .fontSize(16) .fontWeight(this.currentIndex === params.index ? 500 : 400) .fontColor(this.currentIndex === params.index ? "#cc000000" : "#ff8d8d8d") .constraintSize({ maxWidth: "33%" }) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) .margin({ right: 12 }) .onClick(() => { this.controller.changeIndex(params.index) }) .id(params.index.toString()) .onAreaChange((oldValue: Area, newValue: Area) => { //使用组件区域变化回调onAreaChange获取选择的省市区Text组件宽度,存入textInfos数组,用于后续计算选择省市区名后下方下滑线动画水平偏移量leftMargin // 组件区域变化时获取当前Text的宽度newValue.width和x轴相对位置newValue.position.x this.textInfos[params.index] = [newValue.position.x as number, newValue.width as number]; if (this.currentIndex === params.index && params.index === AddressType.Province) { // 计算选择的省市区名下方的下滑线偏移量 this.leftMargin = (this.textInfos[this.currentIndex][1] - 20) / 2 } }) } @Builder customTabs() { Tabs({ controller: this.controller }) { // 省列表 TabContent() { List() { ForEach(this.provinceList, (item: CommonAddressList) => { ListItem() { this.areaNameItem(AddressType.Province, item) } .onClick(() => { // 如果当前点击选择的省与之前选择一样,跳过省、市数据获取,直接调用changeIndex(AddressType.City)切换到市列表,减少冗余查询以提升性能 if (this.currentSelectInfo.province == item.name) { this.controller.changeIndex(AddressType.City) return } else { // 重置市和区数据 this.currentSelectInfo.cityId = ''; this.currentSelectInfo.city = ''; this.currentSelectInfo.regionId = ''; this.currentSelectInfo.region = ''; } this.cityList = [] this.regionList = [] this.data.forEach(province => { if (province.name === item.name) { this.province = JSON.parse(JSON.stringify(province)); province.children.forEach(city => { this.cityList.push(new CommonAddressList(city.code, city.name)); }) } }) this.currentSelectInfo.provinceId = item.code; this.currentSelectInfo.province = item.name; this.controller.changeIndex(AddressType.City) }) }, (item: CommonAddressList) => JSON.stringify(item)) } .width("100%") .height("100%") .scrollBar(BarState.Off) .friction(0.6) // 设置摩擦系数 .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring .listDirection(Axis.Vertical) // 排列方向 } // 市列表 TabContent() { List() { ForEach(this.cityList, (item: CommonAddressList) => { ListItem() { this.areaNameItem(AddressType.Province, item) } .onClick(() => { // 如果点击的市和上一次点击的市一样,则不用刷新,减少冗余操作以提升性能 if (this.currentSelectInfo.city === item.name) { this.controller.changeIndex(AddressType.Region) return } else { //重置数据 this.currentSelectInfo.region = '' this.currentSelectInfo.regionId = '' } this.regionList = [] // 点击市,获取该市所有区,存入regionList this.province.children.forEach(city => { if (city.name === item.name) { city.children.forEach(region => { this.regionList.push(new CommonAddressList(region.code, region.name)) }) } }) this.currentSelectInfo.cityId = item.code this.currentSelectInfo.city = item.name this.controller.changeIndex(AddressType.Region) }) }, (item: CommonAddressList) => JSON.stringify(item)) } .width("100%") .height("100%") .scrollBar(BarState.Off) .friction(0.6) .edgeEffect(EdgeEffect.Spring) .listDirection(Axis.Vertical) } // 区列表 TabContent() { List() { ForEach(this.regionList, (item: CommonAddressList) => { ListItem() { this.areaNameItem(AddressType.Province, item) } .onClick(() => { // 记录选择的区信息 this.currentSelectInfo.regionId = item.code; this.currentSelectInfo.region = item.name; this.provinceCityRegion = this.currentSelectInfo.province + this.currentSelectInfo.city + this.currentSelectInfo.region //退出半模态 this.isShow = false // 将当前选中省市区信息保存到lastSelectInfo this.lastSelectInfo.provinceId = this.currentSelectInfo.provinceId; this.lastSelectInfo.province = this.currentSelectInfo.province; this.lastSelectInfo.cityId = this.currentSelectInfo.cityId; this.lastSelectInfo.city = this.currentSelectInfo.city; this.lastSelectInfo.regionId = this.currentSelectInfo.regionId; this.lastSelectInfo.region = this.currentSelectInfo.region; // 在选择完区名后,使用JSON.parse(JSON.stringify(xxx))深拷贝选择的省市区数据,用于后续操作中需要加载上一次选择的完整省市区数据 // 深拷贝保存到相应的变量中 this.lastCityList = JSON.parse(JSON.stringify(this.cityList)); this.lastRegionList = JSON.parse(JSON.stringify(this.regionList)); this.address = JSON.parse(JSON.stringify(this.lastSelectInfo)); }) }, (item: CommonAddressList) => JSON.stringify(item)) } .width("100%") .height("100%") .scrollBar(BarState.Off) .friction(0.6) .edgeEffect(EdgeEffect.Spring) .listDirection(Axis.Vertical) } } .onAppear(() => { if (this.lastSelectInfo.region !== '') { // 上一次选择如果选择到区,再次打开半模态弹窗页面时会显示到区的TabContent this.currentIndex = AddressType.Region; if (this.cityList.length === 0 && this.regionList.length === 0) { // 在已经选择过省市区后,再次打开地址选择半模态弹窗页面,但是没有选择到区就关闭了半模态页面,此时如果再次打开半模态页面,需要显示之前完整选择的省区市数据 this.currentSelectInfo.provinceId = this.lastSelectInfo.provinceId; this.currentSelectInfo.cityId = this.lastSelectInfo.cityId; this.currentSelectInfo.regionId = this.lastSelectInfo.regionId; this.currentSelectInfo.province = this.lastSelectInfo.province; this.currentSelectInfo.city = this.lastSelectInfo.city; this.currentSelectInfo.region = this.lastSelectInfo.region; this.cityList = JSON.parse(JSON.stringify(this.lastCityList)); this.regionList = JSON.parse(JSON.stringify(this.lastRegionList)); this.leftMargin = this.lastLeftMargin; } else { this.leftMargin = this.textInfos[0][1] + this.textInfos[1][1] + (this.textInfos[2][1] - 20) / 2 + 12 * 2 this.lastLeftMargin = this.leftMargin; } this.controller.changeIndex(AddressType.Region) } this.animationDuration = 300 }) .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { if (index === targetIndex) { return; } this.currentIndex = targetIndex; let leftMargin: number = 0; let isAnimating: boolean = false; if (index === AddressType.Province && targetIndex === AddressType.City) { // 从省切到市时,重新计算选择的省市区名下方的下滑线偏移量 leftMargin = this.textInfos[0][1] + (this.textInfos[1][1] - Constants.DIVIDER_WIDTH) / 2 + Constants.AREA_SPACE; isAnimating = this.currentSelectInfo.city === '' ? false : true; } else if (index === AddressType.City && targetIndex === AddressType.Region) { // 从市切到区,重新计算选择的省市区名下方的下滑线偏移量 leftMargin = this.textInfos[0][1] + this.textInfos[1][1] + (this.textInfos[2][1] - Constants.DIVIDER_WIDTH) / 2 + Constants.AREA_SPACE * 2; isAnimating = this.currentSelectInfo.region === '' ? false : true; } else if (index === AddressType.City && targetIndex === AddressType.Province) { // 从市切到省,重新计算选择的省市区名下方的下滑线偏移量 leftMargin = (this.textInfos[0][1] - Constants.DIVIDER_WIDTH) / 2; isAnimating = this.currentSelectInfo.city === '' ? false : true; } else if (index === AddressType.Region && targetIndex === AddressType.City) { // 从区切到市,重新计算选择的省市区名下方的下滑线偏移量 leftMargin = this.textInfos[0][1] + (this.textInfos[1][1] - Constants.DIVIDER_WIDTH) / 2 + Constants.AREA_SPACE; isAnimating = this.currentSelectInfo.region === '' ? false : true; } else if (index === AddressType.Region && targetIndex === AddressType.Province) { // 点击自定义TabBar从区切到省,重新计算选择的省市区名下方的下滑线偏移量 leftMargin = (this.textInfos[0][1] - Constants.DIVIDER_WIDTH) / 2; isAnimating = this.currentSelectInfo.region === '' ? false : true; } else if (index === AddressType.Province && targetIndex === AddressType.Region) { // 点击自定义TabBar从省切到区,重新计算选择的省市区名下方的下滑线偏移量 leftMargin = this.textInfos[0][1] + this.textInfos[1][1] + (this.textInfos[2][1] - Constants.DIVIDER_WIDTH) / 2 + Constants.AREA_SPACE * 2; isAnimating = this.currentSelectInfo.region === '' ? false : true; } // 只有在已经选择过的TabContent之间切换时,才会做下划线水平偏移动画 if (isAnimating) { this.startAnimateTo(this.animationDuration, leftMargin); } else { this.leftMargin = leftMargin; } }) .width("100%") .barHeight(0) .layoutWeight(1) } /** * 自定义省/市/区名项 * @param addressType 省/市/区类型 * @param item 省、市、区地址项 */ @Builder areaNameItem(addressType: AddressType, item: CommonAddressList) { Column() { Text(item.name) .width("90%") .height(48) .fontSize(16) .fontColor(this.getFontColor(addressType, item)) Divider().width("90%") .strokeWidth(1) .color("#F1F3F5") } .width("100%") } /** * 获取省、市、区名需要显示的字体颜色 * @param addressType 省/市/区类型 * @param item 省、市、区地址项 * @returns 需要显示的字体颜色 */ getFontColor(addressType: AddressType, item: CommonAddressList): Color | string | Resource { // 省/市/区名字体颜色 let isSelect: boolean = false; if (addressType === AddressType.Province) { isSelect = this.currentSelectInfo.province !== '' && item.name === this.currentSelectInfo.province; } else if (addressType === AddressType.City) { isSelect = this.currentSelectInfo.city !== '' && item.name === this.currentSelectInfo.city; } else if (addressType === AddressType.Region) { isSelect = this.currentSelectInfo.region !== '' && item.name === this.currentSelectInfo.region; } const color = isSelect ? "#fffcb850" : Color.Black; return color; } /** * 地址选择半模态弹窗页面 */ @Builder addressSelectPage() { Column() { this.customTabBar() Divider().width("90%") .strokeWidth(1) .color("#F1F3F5") this.customTabs() } .width("100%") .height("100%") .backgroundColor(Color.White) .padding({ bottom: this.bottomHeight + 'px' }) } /** * 自定义TabBar */ @Builder customTabBar() { RelativeContainer() { Row() { //选择的省名 this.locationItem({ index: AddressType.Province, name: this.currentSelectInfo.province }) // 选择的市名 this.locationItem({ index: AddressType.City, name: this.currentSelectInfo.city }) // 选择的区名 this.locationItem({ index: AddressType.Region, name: this.currentSelectInfo.region }) } .width("85%") .height("80%") .alignRules({ center: { anchor: '__container__', align: VerticalAlign.Center } }) .margin({ bottom: 10 }) .padding({ left: 20, top: 15 }); // 选择的省市区名下方的下滑线 Row() { Divider() .width(20) .strokeWidth(2) .color("#fffcb850") .margin({ left: this.leftMargin }) } .alignItems(VerticalAlign.Top) .width("85%") .height("20%") .alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom } }) .padding({ left: 20 }) Row() { Image($r("app.media.address_picker_close")) .objectFit(ImageFit.Contain) .width(14) .height(14) .margin({ left: 20 }); } .height("100%") .width("15%") .alignRules({ right: { anchor: '__container__', align: HorizontalAlign.End } }) .onClick(() => { //关闭半模态 this.isShow = false; }); } .width("100%") .height(48) } build() { Column() { Row() { Text("所在地区") .fontSize(16) .fontWeight(500) .margin({ right: 20 }) Text(this.provinceCityRegion) .fontSize(15) .fontColor(this.provinceCityRegion === '省、市、区' ? "#ffacacac" : Color.Black) .fontWeight(300) .constraintSize({ maxWidth: "68%" }) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) } .width("100%") .height(100) .onClick(() => { this.isShow = true this.currentIndex = AddressType.Province }) .bindSheet($$this.isShow, this.addressSelectPage(), { height: "70%", showClose: false, // 设置不显示自带的关闭图标 dragBar: false, onDisappear: () => { this.animationDuration = 0; if (this.currentSelectInfo.region === '') { // 重置所有状态 this.currentSelectInfo.provinceId = ''; this.currentSelectInfo.cityId = ''; this.currentSelectInfo.regionId = ''; this.currentSelectInfo.province = ''; this.currentSelectInfo.city = ''; this.currentSelectInfo.region = ''; this.cityList = []; this.regionList = []; } } }) } .width("100%") .height(54) .padding(2) }}核心能力:组件复用 总结鸿蒙一多开发统一工程与模块化架构,解决人力资源分配矛盾与重复劳动问题。依托标准化组件复用,确保共性能力集中维护,解决功能重复开发、维护难的问题。组件化与配置化打包让测试聚焦差异点,缓解版本规划压力与测试资源冲突。统一资源管理与编译脚本精准控制打包,降低线上问题连锁反应概率,保障多 App 发布稳定性。
-
问题背景在鸿蒙App开发中,调用鸿蒙定位服务API获取的当前定位坐标后,传入华为地图后,在华为地图上显示的定位坐标,与实际预期的定位位置不一样例如:鸿蒙定位服务API获取的当前定位坐标,预期在华为地图上应该显示在湖附近,但是实际华为地图上显示的位置,在几百米外的陆地上。具体效果见下面截图即,应用内通过鸿蒙定位服务API获取的当前定位坐标,与华为地图中显示的坐标位置存在偏差 问题原因 鸿蒙定位服务API使用的是WGS84坐标系,但是在显示到华为地图上需要使用GCJ02 坐标系华为地图坐标系介绍:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/map-introduction 鸿蒙定位服务API坐标系介绍:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/location-guidelines 问题原因总结华为官方设计上存在不一致:华为地图需要使用标准的大陆的GCJ02 坐标系,与鸿蒙定位服务API的WGS84坐标系,设计上不一致 修复方案:核心答案封装一套坐标系转换的方法,将WGS84坐标系的坐标转换为GCJ02坐标系的坐标实现步骤鸿蒙原生通过鸿蒙定位服务API获取到坐标后,调用封装的经纬度坐标系转换方法,将转换后的坐标,传入到华为地图中显示经纬度坐标转换方法,见如下代码设计思路 经纬度坐标转换,代码设计思路 先定义一个接受经度、纬度两个参数的方法,并返回number数组,如下:gcj02ToWgs84(lng: number, lat: number)判断是否为国内坐标,若是则继续转化,否则退出封装一个转换经度的方法,如下:transformLng封装一个转换纬度的方法,如下:transformLat再经过固定算法,在gcj02ToWgs84返回number数组 完整代码getAddressPermission() { //位置权限 let atManager = abilityAccessCtrl.createAtManager(); console.log('requestPermissionsFromUser' + 1) try { atManager.requestPermissionsFromUser(getContext(), ['ohos.permission.INTERNET', 'ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION']) .then((data) => { console.log('requestPermissionsFromUser' + JSON.stringify(data)) try { geoLocationManager.getCurrentLocation(request) .then((result) => { // 调用getCurrentLocation获取当前设备位置,通过promise接收上报的位置 console.info('current location: ' + JSON.stringify(result)); // 通过wgs84ToGcj02转换为gcj02坐标 const lngLat = wgs84ToGcj02(result.longitude, result.latitude) setTimeout(() => { this.setMark(result.longitude, result.latitude, "位置(wgs84,位置偏移)", $r("app.media.position")) this.setMark(lngLat[0], lngLat[1], "位置(gcj02,位置准确)", $r("app.media.position")) }, 1000) }) .catch((error: BusinessError) => { // 接收上报的错误码 console.error('promise, getCurrentLocation: error=' + JSON.stringify(error)); }); } catch (err) { console.error("errCode:" + JSON.stringify(err)); } }) .catch((err: BusinessError) => { console.log('requestPermissionsFromUser' + 3) // Logger.error(TAG, `err: ${JSON.stringify(err)}`); }) } catch (err) { console.log('requestPermissionsFromUser' + 4) } } const PI = Math.PI;const a = 6378245.0;const ee = 0.00669342162296594323;function outOfChina(lng: number, lat: number): boolean { if (lng < 72.004 || lng > 137.8347) { return true; } if (lat < 0.8293 || lat > 55.8271) { return true; } return false;}function transformLat(lng: number, lat: number): number { let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; return ret;}function transformLng(lng: number, lat: number): number { let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; return ret;}function gcj02ToWgs84(lng: number, lat: number): number[] { if (outOfChina(lng, lat)) { return [lng, lat]; } let dlat = transformLat(lng - 105.0, lat - 35.0); let dlng = transformLng(lng - 105.0, lat - 35.0); let radlat = lat / 180.0 * PI; let magic = Math.sin(radlat); magic = 1 - ee * magic * magic; let sqrtmagic = Math.sqrt(magic); dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); let mglat = lat + dlat; let mglng = lng + dlng; return [lng * 2 - mglng, lat * 2 - mglat];}总结鸿蒙地图相关开发中,若存在应用内app获取定位后,需要在华为地图中显示定位坐标位置,则需要转换坐标。开发者需了解鸿蒙中此种经纬度坐标系,不同标准。若遇到类似问题,可快速解决,无需查阅很多资料花费较多时间来定位此种类型的问题若遇到类似定位相关的问题,查阅鸿蒙官网API时,需留意坐标系相关的说明,可快速定界出是否是坐标系的问题
-
我有个需求:应用场景:用户单位有多个业务人员,单位领导需要查询到每个业务员在工作时间内的移动轨迹。业务员对此情况知悉且同意具体思路:是需要在固定的时间段(每天),每隔固定的时间(10分钟)获取一次用户的位置信息,然后上传到后台,生成该用户的行动轨迹。遇到问题:app在后台运行,一段时间后会自动被系统杀进程。如果app在前台运行或者让用户隔一段时间打开一次app,这样会耽误用户的工作时间且麻烦。但是隔一段时间通过app给用户推送通知客户是可以接受的。
-
绿色认证提交后一直是申请中状态,没有拒绝也没有通过,说72小时会有结果,但是登录1周,一直没有任何消息,不知道后续该如何进行,请帮忙解释
-
美区facebook限制发送好友请求。有人知道怎么解决这个问题吗
-
鸿蒙版cordova/PhoneGap介绍鸿蒙版cordova或PhoneGap,这里统称为鸿蒙版Cordova,遵守cordova官方,不再使用鸿蒙版PhoneGap了。 cordova移动端跨平台研发的重要框架之一,支持Android和Ios,官方并不支持鸿蒙系统,harmony-cordova是鸿蒙的cordova,这里主要介绍鸿蒙版corddova,安卓和Ios请查看cordova官方文档,cordova除了cordova sdk外,还有很多的插件,开发者根据自己的APP的需要可以选择使用相关的插件,鸿蒙版cordova sdk地址鸿蒙版cordova已经上架鸿蒙三方库中心,开发者可以直接在DevEco studio中直接使用。cordova sdk 三方库地址:https://ohpm.openharmony.cn/#/cn/detail/harmony-cordova鸿蒙版cordova支持的插件插件ID接口地址说明cordova-plugin-whitelistcid:link_12白名单cordova-plugin-network-informationcid:link_0网络管理cordova-plugin-inappbrowsercid:link_8内置浏览器cordova-sqlite-storagecid:link_11嵌入式数据库cordova-plugin-cameracid:link_14相机功能cordova-plugin-filecid:link_15本地文件管理cordova-plugin-file-transfercid:link_5上传和下载文件cordova-plugin-dialogscid:link_13弹窗cordova-plugin-datepickercid:link_1日期选择phonegap-plugin-barcodescannercid:link_3扫码cordova-plugin-media-capturecid:link_6视频录制cordova-plugin-alipay-v2调用接口:cid:link_9依赖插件:https://ohpm.openharmony.cn/#/cn/detail/@cashier_alipay%2Fcashiersdk自定义支付宝支付插件,只是按照文档接口调用了支付宝插件依赖支付宝官方插件aliyun.uploadvod暂无文档,需联系开发者阿里云OSS插件,实现移动端直接上传文件到阿里云OSScordova-plugin-android-permissionscid:link_2授权插件,接口永远返回为拥有权限,主要为兼容android移植到harmony使用的,避免修改Android端的代码,harmong授权已下放到各个插件,无需单独编写代码phonegap-bluetooth-plugincid:link_10经典蓝牙插件cordova-plugin-ble-centralcid:link_10低功耗蓝牙插件cordova-base64-to-gallerycid:link_7保存图片到相册cordova-plugin-huawei-pushcid:link_4华为推送,自定义插件,详细使用请咨询开发者Android移植鸿蒙步骤1,打开DevEco创建项目,选择Empty Ability进入下一步,填写必要信息,这里要注意,bundle name 先填写com.example.myapplication,也就是保持默认不变,因为在没有cordova.crt证书的情况下,cordova鸿蒙版要求bundle name必须为com.example.myapplication,主要用于研发测试,如果开发测试完成要修改bundle name上架鸿蒙应用市场,请联系开发者申请cordova.ert证书,或者事先联系开发者提供技术服务。2,项目创建成功后,复制原有Android studio的工程assests/www目录下面的所有文件到鸿蒙工程entry/src/main/resources/目录下,注意直接复制原andriod工程www目录下的文件,不包含www。3,复制原android工程res/xml目录下的config.xml文件到鸿蒙工程entry/src/main/resources/目录下。4,打开DevEco studio的Terminal终端,进入工程目录,执行 ohpm install harmony-cordova 安装本插件。5,打开鸿蒙工程文件entry/src/main/etx/pages/Index.ets文件,修改代码如下:import { MainPage, pageBackPress, pageHideEvent, pageShowEvent } from 'harmony-cordova/Index'; @Entry @Component struct Index { onPageShow(){ pageShowEvent(); //页面显示通知cordova } onBackPress() { pageBackPress(); //拦截返回键由cordova处理 return true; } onPageHide() { pageHideEvent(); //页面隐藏通知cordova } build() { RelativeContainer() { MainPage(); //webview首页index.html } .height('100%') .width('100%') } }6,打开鸿蒙工程文件/entry/src/main/ets/entryAbility/EntryAbility.ets文件,修改onCreate函数如下import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; import { webview } from '@kit.ArkWeb'; import { setSchemeHandler } from 'harmony-cordova/Index';...onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {webview.WebviewController.initializeWebEngine();//webview引擎初始化setSchemeHandler();//设置webview schemehilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');}7,鸿蒙混合研发,也许您会增加其他page页面,不一定应用的首页为cordova webview(index.html)的首页,例如应用增加了鸿蒙的原生的启动页面,包含首页弹窗,同意隐私政策后,然后再从启动页面进入cordova的页面,这样避免在用户没有同意隐私政策的情况下,初始化cordova sdk,因为初始化cordova sdk,系统读取了设备的网络状态,因为国内相关法律规定,在用户没有同意隐私政策的情况下,不允许读取设备的网络标识。8,做以上代码修改后,鸿蒙的移植已经完毕,可以使用模拟器或者真机进行编译和测试了。Ios移植鸿蒙步骤如果您的项目有android和Ios的工程,请参考android项目移植项目的鸿蒙下,如果您的项目没有andriod工程,只有Ios工程,请使用如下方法移植,移植时大部分内容和安卓一样,只是复制的文件的路径不一致,以下只介绍不同部分,相同部分请参考android移植步骤。1,复制Xcode的Ios工程目录下的Staging/www目录下的所有文件到鸿蒙工程entry/src/main/resources/目录下。 2,Xcode工程的config.xml文件在Staging目录下,Xcode工程的该文件不能直接被鸿蒙版cordova使用,需要进行转换,该文件主要记录的是插件的名称和初始化的类,因为鸿蒙版是根据android的config.xml进行插件初始化的,因此需要将Xcode工程config.xml转为安卓的config.xml,请将Xcode工程使用node加入安卓平台,系统会自动生成android版的config.xml。然后将文件复制到鸿蒙版工程的entry/src/main/resources/下。附加说明:本人认为使用cordoca跨平台研发,一般至少都会包含android和ios两大平台,很少只有ios平台,没有android平台的,所以大部分移植鸿蒙参考android移植步骤,后续升级SDK会兼容Ios工程的config.xml,无需转换就可以使用。新项目,一次开发适用于andriod、Ios和Harmony三大平台由于cordova官方当前并不支持HarmonyOS平台,使用node无法直接将HarmonyOS加入到cordova,也无法直接安装插件到HarmonyOS,因此对于新项目要一次开发满足三大平台的话,建议先通过node加入Android和Ios平台和安装插件,后续研发可以使用Android studio研发和调试,待研发成功后,然后再在Xcode和DevEco做跨平台适配。Xcode适配请参考cordova的官方文档,HarmonyOS适配请参考以上Android的移植步骤。特别说明当前版本不支持使用者自定义插件研发,如果该版本没有包含您要使用的插件,或者您的项目中有Android或Ios的自定义插件,需要移植到HarmonyOS平台,请您和本开发者联系,获取技术支持。使用鸿蒙版cordova sdk在开发测试阶段务必将bundle name修改为com.example.myapplication,如果将bunlde name改为正式的Id,鸿蒙版cordova sdk会读取entry/src/main/resources/目录的cordova.crt证书文件,用于验签,如果该文件不存在,启动应用后,应用会闪退。如果应用的bundle name为com.example.myapplication,鸿蒙版 cordova sdk会跳过验签,不检测cordova.crt文件。但是上架鸿蒙应用市场,必须将bundle name改为正式的id,所以请联系开发者申请cordova.ert证书,另外由于操作系统之间的差异,虽然保持了cordova的插件接口不变,但是返回值会有所调整,后续文档会逐步完善,在使用本插件跨平台研发时请联系开发者提供技术服务。
-
数据上传到iot平台,怎么根据这些数据制作APP啊
-
鸿蒙4.0版本,stage模型应用,如何保存图片到手机相册,不使用@ohos.file.picker
推荐直播
-
华为云码道 × 仓颉编程:工程化AI编码探索2026/05/27 周三 19:00-21:00
刘俊杰-华为云仓颉语言专家/李炎-华为云码道技术专家/王智鹏-OpenCangjie开源社区发起人
本场直播围绕华为云仓颉语言与华为云码道的深度结合,展示华为云智能编程从零基础到高效落地的完整生态能力。以华为云码道为引擎,仓颉语言为载体,带给大家日常提效、趣味创新到极速量产的开发体验。
回顾中
热门标签