混合开发应用侧-JSBridge，在加载的网页中调用原生能力
在加载的网页中, 需要调用原生能力, 主要包括:
- 认证信息
- 查询用户信息
- 更新用户信息
- 移除用户
- 拍照服务/相册服务
- 传感器
- 本地省市区数据
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
- 打开相机后置摄像头得到拍照结果集
- 根据结果集的URI属性同步打开文件
- 以同步方法获取文件详细属性信息
- 定义缓冲区用于保存读取的文件
- 开始同步读取内容到缓冲区
- 读取完毕后关闭文件流
- 借助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
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
- 定义读取的本地数据的数据类型(AreaDataItem)
- 定义输出数据的数据类型(AreaColumns)
- 读取rawfile目录下的本地文件area.json
- 将读取的字节数组转码成字符串
- 将读取的Json字符串转成对象数据
- 遍历对象数据并处理返回
获取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()原文地址：https://blog.csdn.net/2301_80345482/article/details/142423072
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！