混合开发应用侧-JSBridge，在加载的网页中调用原生能力

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

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: stringname: stringareaList: 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()