在加载的网页中, 需要调用原生能力, 主要包括:

1. 认证信息

• 查询用户信息
• 更新用户信息
• 移除用户

1. 拍照服务/相册服务
2. 传感器
3. 本地省市区数据

1.注册JavaScript代理

通过代理实现原生与网页之间的交互 

webInit() {
    this.controller.registerJavaScriptProxy({ 
      // 参与注册的应用侧JavaScript对象。
      // 注册对象的名称，与window中调用的对象名一致。
      // 注册后window对象可以通过此名字访问应用侧JavaScript对象。
      // ...
    }, 'mk', [  
      // 参与注册的应用侧JavaScript对象的方法。
      // ...
    ])
}

// ...

Web({ src: this.src, controller: this.controller })
.onAppear(() => {  // 组件挂载显示时触发此回调
   this.webInit()
 })

2.认证信息用户信息Auth

import { auth, User } from '../utils/auth'

webInit() {
    this.controller.registerJavaScriptProxy({ 
      queryUser: (): User => auth.getUser(), // 查询用户
      removeUser: (): void => auth.removeUser(), // 移除用户
      updateUser: (user: MkUser): void => auth.updateUser(user),  // 更新用户
    }, 'App', [  
      'queryUser',
      'updateUser',
      'removeUser',
    ])
}

3.拍照服务 pickerCamera

相机选择器

文件管理

Util工具函数

1. 打开相机后置摄像头得到拍照结果集
2. 根据结果集的URI属性同步打开文件
3. 以同步方法获取文件详细属性信息
4. 定义缓冲区用于保存读取的文件
5. 开始同步读取内容到缓冲区
6. 读取完毕后关闭文件流
7. 借助util工具方法把读取的文件流转成base64编码的字符串

import { camera, cameraPicker } from '@kit.CameraKit';
import fs from '@ohos.file.fs';
import { util } from '@kit.ArkTS';
import { cameraPlugin } from '../plugins/CameraPlugin'

webInit() {
    this.controller.registerJavaScriptProxy({ 
      queryUser: (): User => auth.getUser(), // 查询用户
      removeUser: (): void => auth.removeUser(), // 移除用户
      updateUser: (user: MkUser): void => auth.updateUser(user),  // 更新用户
      pickerCamera: (): Promise<string> => cameraPlugin.pickerCamera(), // 调用相机
    }, 'App', [  
      'queryUser',
      'updateUser',
      'removeUser',
      'pickerCamera',
    ])
}

class CameraPlugin {
   async pickerCamera(){
      // 1. 打开相机后置摄像头得到拍照结果集
      const pickerProfile: cameraPicker.PickerProfile = {
         cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
      };
      const pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(),
         [cameraPicker.PickerMediaType.PHOTO], pickerProfile);


      // 2. 根据结果集的URI属性同步打开文件
      const file = fs.openSync(pickerResult.resultUri)
      // 3. 同步读取文件的详情信息
      const stat = fs.statSync(file.fd)
      // 4. 定义缓冲区用于保存读取的文件
      const buffer = new ArrayBuffer(stat.size)
      // 5. 开始同步读取内容到缓冲区
      fs.readSync(file.fd, buffer)
      // 6. 读取完毕后关闭文件流
      fs.closeSync(file)


      // 7. 借助util工具方法把读取的文件流转成base64编码的字符串
      const helper = new util.Base64Helper()
      const str = helper.encodeToStringSync(new Uint8Array(buffer))
      console.log('mk-logger', 'pickerCamera', str)
      return str
   }
}


export const cameraPlugin = new CameraPlugin()

 

4.相册服务 pickerPhoto

相册选择器

新版API

import { picker } from '@kit.CoreFileKit'
import fs from '@ohos.file.fs';
import { util } from '@kit.ArkTS';
import { photoPlugin } from '../plugins/PhotoPlugin'

webInit() {
    this.controller.registerJavaScriptProxy({ 
      queryUser: (): User => auth.getUser(), // 查询用户
      removeUser: (): void => auth.removeUser(), // 移除用户
      updateUser: (user: MkUser): void => auth.updateUser(user),  // 更新用户
      pickerCamera: (): Promise<string> => cameraPlugin.pickerCamera(), // 调用相机
      pickerPhoto: (): Promise<string> => photoPlugin.pickerPhoto(),  // 调用相册
    }, 'App', [  
      'queryUser',
      'updateUser',
      'removeUser',
      'pickerCamera',
    ])
}

class PhotoPlugin {
  async pickerPhoto(){
    // 1. 打开相册选择图片
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 5;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();

    const res = await photoPicker.select(PhotoSelectOptions)
    console.log('mk-logger', 'photoPlugin', JSON.stringify(res))

    // 2. 文件操作
    // 2.1 获取照片的uri地址
    const uri = res.photoUris[0]
    // 2.2 根据uri同步打开文件
    const file = fs.openSync(uri)
    // 2.3 同步获取文件的详细信息
    const stat = fs.statSync(file.fd)
    // 2.4 创建缓冲区存储读取的文件流
    const buffer = new ArrayBuffer(stat.size)
    // 2.5 开始同步读取文件流到缓冲区
    fs.readSync(file.fd, buffer)
    // 2.6 关闭文件流
    fs.closeSync(file)

    // 3. 转成base64编码的字符串
    const helper = new util.Base64Helper()
    const str = helper.encodeToStringSync(new Uint8Array(buffer))
    console.log('mk-logger', 'photoPlugin-str', str)

    return str
   }
}


export const photoPlugin = new PhotoPlugin()

5.传感器 vibrator

import { vibrator } from '@kit.SensorServiceKit'

class SensorPlugin {
  vibrator() {
    vibrator.startVibration({ type: 'time', duration: 50 }, { usage: 'touch' })
  }
}

export const sensorPlugin = new SensorPlugin()

同上添加交互的方法，方法名

6.本地数据 getAreaColumns

1. 定义读取的本地数据的数据类型(AreaDataItem)
2. 定义输出数据的数据类型(AreaColumns)
3. 读取rawfile目录下的本地文件area.json
4. 将读取的字节数组转码成字符串
5. 将读取的Json字符串转成对象数据
6. 遍历对象数据并处理返回

util工具函数

获取resources/rawfile目录下对应的rawfile文件内容

将读取的字节数组转成字符串

将资源加到 src/main/resources/rawfile 中

import { util } from '@kit.ArkTS'

// 1. 定义读取的本地数据的数据类型(AreaDataItem)
export interface AreaDataItem {
  code: string
  name: string
  areaList: AreaDataItem[]
}

// 2. 定义输出数据的数据类型(AreaColumns)
export interface AreaColumns {
  province_list: Record<number, string>
  city_list: Record<number, string>
  county_list: Record<number, string>
}

class  LocationPlugin {
   async getAreaColumns(){
      // 1. 定义对象用于存储转换后的数据
      const areaColumns: AreaColumns = {
        province_list: {},
        city_list: {},
        county_list: {}
      }

     try {
       // 2. 读取rawfile目录下的本地文件
       const unit8Array = getContext().resourceManager.getRawFileContentSync('area.json')
       // 3. 将读取的字节数组转成字符串
       const decoder = new util.TextDecoder()
       const resStr = decoder.decodeWithStream(unit8Array)
       // 4. 将读取的Json字符串转成对象数组
       const areaData = JSON.parse(resStr) as AreaDataItem[]
       // 5. 遍历处理数据
       // 5.1 省转换
       areaData.forEach((province)=>{
         areaColumns.province_list[Number(province.code)] = province.name
         // 5.2 市转换
         province.areaList.forEach((city)=>{  
           areaColumns.city_list[Number(city.code)] = province.name
           // 5.3 区转换
           city.areaList.forEach((county)=>{
             areaColumns.county_list[Number(county.code)] = county.name
           })
         })
       })
       // 6. 返回数据
       return areaColumns
     } catch (e) {
       return areaColumns
     }
   }
}

export const locationPlugin = new LocationPlugin()