鸿蒙 Next 安全控件与系统 Picker 深度剖析

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统(截止目前 API12)在开发多语言电商平台方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。

在鸿蒙 Next 系统的安全与用户交互体系中,位置控件和系统 Picker 发挥着独特且重要的作用。它们分别从定位获取和资源选择方面,为应用提供了便捷且安全的功能实现方式。接下来,让我们深入探究它们的功能与使用方法。

一、位置控件:精准定位的临时授权助手

(一)位置控件的作用

位置控件为应用提供了一种直观且用户可控的方式来获取位置信息。在当今众多应用中,位置服务的需求日益多样化,但并非所有应用都需要长时间或在后台持续获取精准位置。位置控件的出现,使得应用能够在用户明确知晓并同意的情况下,仅在前台期间获取精准定位授权,从而获取位置信息完成相应服务功能。这不仅满足了应用的功能需求,更重要的是充分尊重了用户的隐私,让用户能够自主决定何时何地分享自己的位置信息。

(二)使用位置控件获取临时精准定位授权的方法

  1. 引入位置服务依赖
    首先,在应用的代码文件中引入与位置服务相关的依赖模块。例如:
import { geoLocationManager } from '@kit.LocationKit';

这一步就像是为获取位置信息搭建了桥梁,确保应用能够与系统的位置服务进行交互。

  1. 添加位置控件并处理点击事件
    在应用的用户界面布局中添加位置控件,并处理其点击事件。位置控件同样由图标、文本和背景组成,开发者可以根据需求选择合适的样式。例如:
import { geoLocationManager } from '@kit.LocationKit';
import { promptAction } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

// 获取当前位置信息的函数
function getCurrentLocationInfo() {
  const requestInfo: geoLocationManager.LocationRequest = {
    'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
   'scenario': geoLocationManager.LocationRequestScenario.UNSET,
    'timeInterval': 1,
    'distanceInterval': 0,
   'maxAccuracy': 0
  };
  try {
    geoLocationManager.getCurrentLocation(requestInfo)
  .then((location: geoLocationManager.Location) => {
      promptAction.showToast({ message: JSON.stringify(location) });
    })
  .catch((err: BusinessError) => {
      console.error(`Failed to get current location. Code is ${err.code}, message is ${err.message}`);
    });
  } catch (err) {
    console.error(`Failed to get current location. Code is ${err.code}, message is ${err.message}`);
  }
}

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        LocationButton({
          icon: LocationIconStyle.LINES,
          text: LocationDescription.CURRENT_LOCATION,
          buttonType: ButtonType.Normal
        })
      .padding({ top: 12, bottom: 12, left: 24, right: 24 })
      .onClick((event: ClickEvent, result: LocationButtonOnClickResult) => {
            if (result === LocationButtonOnClickResult.SUCCESS) {
              // 点击位置控件成功后,调用获取当前位置信息的函数
              getCurrentLocationInfo();
            } else {
              promptAction.showToast({ message: '获取位置信息失败!' });
            }
          })
      }
  .width('100%')
    }
.height('100%')
.backgroundColor(0xF1F3F5)
  }
}

在上述代码中,我们在界面中添加了位置控件,并在其点击事件处理函数中,当用户点击位置控件且授权成功时,调用getCurrentLocationInfo()函数来获取当前位置信息。

  1. 获取并处理位置信息
    getCurrentLocationInfo()函数中,通过配置LocationRequest参数,向系统位置服务请求获取当前位置信息。获取成功后,可以根据实际需求对位置信息进行处理,如在上述示例中,通过promptAction.showToast()将位置信息以弹窗形式展示给用户。

(三)位置控件使用限制和开发步骤表格展示

使用限制 开发步骤
当用户首次点击应用中的位置控件,系统将弹窗请求用户授权,若点击“取消”,再次点击会重新弹窗;点击“允许”,应用将被授予临时位置权限,此后点击不再弹窗。
精准定位的临时授权会持续到灭屏、应用切后台、应用退出等任一情况发生,然后恢复到临时授权之前的授权状态。
应用在授权期间没有调⽤次数限制。
为保障用户隐私,应用需确保安全控件可见且用户能识别,避免因控件样式问题导致授权失败。
1. 引入位置服务依赖。
2. 添加位置控件和获取当前位置信息的处理逻辑到界面。
3. 在位置控件点击事件处理函数中,获取并处理位置信息。

(四)示例代码:使用位置控件获取当前位置

以下是一个完整的使用位置控件获取当前位置的示例代码:

import { geoLocationManager } from '@kit.LocationKit';
import { promptAction } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        LocationButton({
          icon: LocationIconStyle.LINES,
          text: LocationDescription.CURRENT_LOCATION,
          buttonType: ButtonType.Normal
        })
      .padding({ top: 12, bottom: 12, left: 24, right: 24 })
      .onClick((event: ClickEvent, result: LocationButtonOnClickResult) => {
            if (result === LocationButtonOnClickResult.SUCCESS) {
              const requestInfo: geoLocationManager.LocationRequest = {
                'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
               'scenario': geoLocationManager.LocationRequestScenario.UNSET,
                'timeInterval': 1,
                'distanceInterval': 0,
               'maxAccuracy': 0
              };
              try {
                geoLocationManager.getCurrentLocation(requestInfo)
              .then((location: geoLocationManager.Location) => {
                    promptAction.showToast({ message: JSON.stringify(location) });
                  })
              .catch((err: BusinessError) => {
                    console.error(`Failed to get current location. Code is ${err.code}, message is ${err.message}`);
                  });
              } catch (err) {
                console.error(`Failed to get current location. Code is ${err.code}, message is ${err.message}`);
              }
            } else {
              promptAction.showToast({ message: '获取位置信息失败!' });
            }
          })
      }
  .width('100%')
    }
.height('100%')
.backgroundColor(0xF1F3F5)
  }
}

在这个示例中,用户点击位置控件后,如果授权成功,应用将获取当前位置信息并以弹窗形式展示给用户。

二、系统 Picker:资源选择的安全利器

(一)系统 Picker 的概念与功能

系统 Picker 是鸿蒙 Next 提供的一种系统级组件,由独立进程实现。其核心功能是允许应用在不直接获取相关权限的情况下,通过用户交互的方式选择特定的资源,如文件、照片、联系人等。它就像是一个智能的资源中介,在用户和应用之间搭建了一座安全的桥梁。当应用需要访问这些资源时,只需拉起系统 Picker,由用户在 Picker 界面上进行选择操作,应用即可获取用户选择的资源结果,而无需申请读取整个资源库的权限。这极大地提高了资源访问的安全性和灵活性,同时也优化了用户体验。

(二)使用系统 Picker 选择不同资源的方法

  1. 选择用户文件(FilePicker)
    当应用需要获取用户文件时,可以使用 FilePicker。例如,一款文档编辑应用需要打开用户指定的文档进行编辑,可按以下方式操作:
// 假设已经导入了相关的 Picker 模块
import { filePicker } from '@kit.SomeFilePickerKit';

async function openUserFile() {
  try {
    const fileUri = await filePicker.showOpenDialog({
      // 可以设置文件类型过滤器等参数,这里仅为示例
      filters: [
        {
          name: 'Documents',
          extensions: ['txt', 'pdf', 'docx']
        }
      ]
    });
    if (fileUri) {
      // 用户选择了文件,应用可以根据 fileUri 进行后续操作,如读取文件内容等
      console.log('用户选择的文件路径:', fileUri);
    }
  } catch (error) {
    console.error('打开文件选择器失败:', error);
  }
}

在上述代码中,通过调用filePicker.showOpenDialog()方法,弹出文件选择器对话框,用户可以在对话框中选择符合指定过滤器的文件,应用获取到用户选择的文件路径(fileUri)后,即可进行后续的文件操作,如读取文件内容进行编辑。

  1. 选择照片(PhotoViewPicker)
    对于需要获取用户照片的应用,如图片编辑应用或社交分享应用,可以使用 PhotoViewPicker。以下是一个简单的示例:
import { photoViewPicker } from '@kit.SomePhotoPickerKit';

async function selectUserPhoto() {
  try {
    const photoUri = await photoViewPicker.showPhotoPicker();
    if (photoUri) {
      // 用户选择了照片,应用可以根据 photoUri 进行显示、编辑或分享等操作
      console.log('用户选择的照片路径:', photoUri);
    }
  } catch (error) {
    console.error('打开照片选择器失败:', error);
  }
}

通过调用photoViewPicker.showPhotoPicker()方法,应用可以拉起照片选择器,用户选择照片后,应用获取照片的路径(photoUri)用于后续处理,如在图片编辑应用中加载照片进行编辑,或在社交分享应用中分享所选照片。

  1. 选择联系人(联系人 Picker)
    当应用需要获取联系人信息时,例如通讯类应用添加联系人或发送消息时选择收件人,可以使用联系人 Picker。示例代码如下:
import { contactPicker } from '@kit.SomeContactPickerKit';

async function selectContact() {
  try {
    const contact = await contactPicker.showContactPicker();
    if (contact) {
      // 用户选择了联系人,应用可以获取联系人的相关信息,如姓名、电话号码等
      console.log('用户选择的联系人:', contact);
    }
  } catch (error) {
    console.error('打开联系人选择器失败:', error);
  }
}

调用contactPicker.showContactPicker()方法后,用户可以在联系人选择器中选择所需联系人,应用获取联系人对象(contact)并进行相应操作,如在通讯应用中填充收件人信息或获取联系人详细资料进行展示。

(三)系统 Picker 使用限制和开发步骤表格展示

使用限制 开发步骤
系统 Picker 已获取对应权限的预授权,但开发者仍需遵循系统安全规范使用。 1. 根据需要选择合适的 Picker(如 FilePicker、PhotoViewPicker、联系人 Picker 等)。
2. 按照相应 Picker 的 API 调用方式,拉起选择器并处理用户选择结果。

(四)示例代码:使用照片选择器选择照片

以下是一个使用照片选择器选择照片的示例代码:

import { photoViewPicker } from '@kit.SomePhotoPickerKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Button('选择照片')
      .onClick(async () => {
            try {
              const photoUri = await photoViewPicker.showPhotoPicker();
              if (photoUri) {
                console.log('用户选择的照片路径:', photoUri);
                // 在这里可以进行后续对所选照片的处理,如显示照片、上传照片等
              }
            } catch (error) {
              console.error('打开照片选择器失败:', error);
            }
          })
      }
  .width('100%')
    }
.height('100%')
  }
}

在这个示例中,用户点击“选择照片”按钮后,应用将拉起照片选择器,用户选择照片后,应用获取照片路径并在控制台打印出来,开发者可以根据实际需求在获取照片路径后进行进一步的处理,如在界面上显示所选照片或上传照片到服务器等操作。

综上所述,位置控件和系统 Picker 在鸿蒙 Next 系统中为应用提供了强大且安全的功能扩展能力。我们熟练掌握它们的使用方法和注意事项,能够在提升应用功能的同时,更好地保护用户隐私和确保系统安全。希望通过本文的介绍,能帮助各位同仁更加高效地运用这些功能组件,打造出更加优质的鸿蒙 Next 应用。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容