鸿蒙uiapp支持读取当地和在线拉取运行

温锦文欧普厨电及净水器总代理  论坛元老 | 2025-4-10 07:41:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1809|帖子 1809|积分 5427

   前言：鸿蒙运行uiapp小程序来源于uiapp的SDK包提供的能力，如有更多定制化业务，请自行查看SDK内容导入相应的API，比方以下
  1. import {
  2.   openUniMP,
  3.   releaseWgtToRunPath,
  4.   getUniMPRunPath,
  5.   isExistsUniMP,
  6.   getAppVersionInfo,
  7.   registerModule
  8. } from '@dcloudio/uni-app-runtime'
复制代码
告示：只支持Vue3版本运行

uniMP小程序

#初始化 sdk 全局环境

  1. interface IInitConfig {
  2.   debug?: boolean
  3. }
  4. function init(ability: UIAbility, stage: window.WindowStage, config?: IInitConfig)
复制代码
复制代码
#获取uni小程序应用资源部署路径

  1. function getUniMPRunPath(appID: string): string
复制代码
复制代码
#判断应用资源是否已经部署

  1. function isExistsUniMP(appId: string): boolean
复制代码
复制代码
#将wgt应用资源包部署到运行路径中

  1. type ReleaseWgtToRunPathCallback = (code: 1 | -1, error?: Error) => void
  2. function releaseWgtToRunPath(appID: string, wgtPath: string, callback: ReleaseWgtToRunPathCallback)
复制代码
复制代码
#获取已经部署的小程序应用资源版本信息

  1. interface IAppVersionInfo {
  2.   name: string
  3.   code: string
  4. }
  5. function getAppVersionInfo(appId: string): IAppVersionInfo | null
复制代码
复制代码
#启动小程序应用并获得IUniMP实例

  1. interface ICapsuleStyle {
  2.   backgroundColor?: string
  3.   textColor?: string
  4.   highlightColor?: string
  5.   borderColor?: string
  6. }
  8. interface ICapsuleMenuActionSheetItem {
  9.   id: string
  10.   title: string
  11. }
  13. interface IOpenUniMPConfig {
  14.   showCapsuleButton?: boolean
  15.   capsuleMenuActionSheetItems?: ICapsuleMenuActionSheetItem[]
  16.   capsuleButtonStyle?: ICapsuleStyle
  17.   redirectPath?: string
  18.   extraData?: Object // 传递给小程序的额外数据，小程序中onLaunch，uni.getLaunchOptionsSync可以获取
  19. }
  21. export interface IUniMP {
  22.   hide(): void
  24.   show(): void
  26.   close(): void
  28.   sendUniMPEvent: (event: string, data: ESObject) => void
  29.   on(event: 'uniMPEvent', callback: (event: string, data: ESObject, notify: (...args: ESObject[]) => void) => void): void
  30.   on(event: 'menuItemClick', callback: (id: string) => void): void
  31.   on(event: 'close' | 'show' | 'hide', callback: () => void): void
  32.   off(name: string, callback: Function): void
  33. }
  35. function openUniMP(appID: string, config?: IOpenUniMPConfig): IUniMP
复制代码
复制代码
#IUniMP实例下的API

#隐藏当前小程序应用

  1. hide(): void
复制代码
复制代码
#表现当前小程序应用

  1. show(): void
复制代码
复制代码
#关闭当前小程序应用

  1. close(): void
复制代码
复制代码
#向小程序发送变乱

  1. sendUniMPEvent: (event: string, data: ESObject) => void
复制代码
复制代码
#监听小程序发送过来的变乱

  1. on(event: 'uniMPEvent', callback: (event: string, data: ESObject, notify: (...args: ESObject[]) => void) => void): void
复制代码
复制代码
#监听右上角菜单的点击变乱

  1. on(event: 'menuItemClick', callback: (id: string) => void): void
复制代码
复制代码
#监听小程序隐藏、表现、关闭变乱

  1. on(event: 'close' | 'show' | 'hide', callback: () => void): void
复制代码
复制代码
#移除对应的监听变乱

  1. off(name: string, callback: Function): void
复制代码

  • 修改鸿蒙项目根目次文件 oh-package.json5 的依赖 "@dcloudio/uni-app-runtime": "版本号"，如下图所示 查看最新版本号

  • 点击右上角 Sync Now，并等候 Sync 结束
  • 首先需要初始化uiapp SDK包 ，初始化如下
    1. 在EntryAbility文件入口如下
    2. import { init } from '@dcloudio/uni-app-runtime'
    复制代码
    1. init(this, windowStage, {
    2.   debug: true
    3. })
    复制代码
    1. <img alt=""  src="https://i-blog.csdnimg.cn/direct/1eb1fece6be84fdf85cbfa2791a61251.png"  />
    复制代码
  • 将生成的wgt包拷贝到 entry/src/main/resources/resfile 目次下，如下图所示


 4.再通过 releaseWgtToRunPath 函数释放 wgt 包到运行目次，最后通过 openUniMP 函数打开小程序，代码如下

在线拉取运行：
  1. /**
  2. *  下载 uiapp 包
  3. */
  4. function downloadUiApp(fileName: string, downUrl: string, md5Code: string): Promise<string> {
  5.   return new Promise((resolve) => {
  6.     DownloadUiApp.downloadUiApp(
  7.       downUrl,
  8.       fileName,
  9.       md5Code,
  10.       {
  11.         onError: (code: string = '') => {
  12.           // 下载错误
  13.           if (code === 'MD5_error') {
  14.             promptAction.showToast({
  15.               message: '文件损坏，请重新点击应用'
  16.             })
  17.           }
  18.           resolve(code)
  19.         },
  20.         onSuccess: (srcFilePath: string) => {
  21.           // 下载并保存成功
  22.           Logger.info('下载文件完成  地址为', srcFilePath)
  23.           resolve(srcFilePath)
  24.         }
  25.       })
  26.   })
  27. }
复制代码
下载文件Class

  1. import { common } from '@kit.AbilityKit';
  2. import fs, { ReadOptions, WriteOptions } from '@ohos.file.fs';
  3. import { BusinessError, request } from '@kit.BasicServicesKit';
  4. import { fileIo } from '@kit.CoreFileKit';
  5. import Logger from './Logger'
  6. import { cryptoFramework } from '@kit.CryptoArchitectureKit';
  7. Logger.prefix = 'uiapp'
  9. export class DownloadUiApp {
  10.   /**
  11.    * 获取应用沙箱存储目录 统一一下，方便APP设置页面删除
  12.    * @returns
  13.    */
  14.   static getLocalCacheDir(): string {
  15.     let cache_dir_name = "uiapps";
  16.     let cache_dir = getContext().filesDir + "/" + cache_dir_name;
  17.     console.info(`createCacheDir cache_dir: ${cache_dir}`);
  18.     let existAppCacheDir = fileIo.accessSync(cache_dir, fileIo.AccessModeType.EXIST)
  19.     if (!existAppCacheDir) {
  20.       fileIo.mkdirSync(cache_dir, true);
  21.     }
  22.     return cache_dir
  23.   }
  25.   static async checkAndRemoveFile(path: string) {
  26.     const exist = await fs.access(path);
  27.     if (exist) {
  28.       await fs.unlink(path);
  29.     }
  30.   }
  32.   //计算文件的MD5码
  33.   public static computeMD5(file: string | number): Uint8Array {
  34.     let md5Stream: fs.Stream
  36.     if (typeof file === 'string') {
  37.       md5Stream = fs.createStreamSync(file, "r");
  38.     } else {
  39.       md5Stream = fs.fdopenStreamSync(file, "r")
  40.     }
  42.     let dataBuff: ArrayBuffer = new ArrayBuffer(4096)
  43.     let mdAlgName = "MD5";
  44.     let md = cryptoFramework.createMd(mdAlgName);
  45.     let readCount = md5Stream.readSync(dataBuff)
  46.     while (readCount > 0) {
  47.       let messageData = new Uint8Array(dataBuff.slice(0, readCount));
  48.       let updateMessageBlob: cryptoFramework.DataBlob = { data: messageData };
  49.       md.updateSync(updateMessageBlob);
  50.       readCount = md5Stream.readSync(dataBuff)
  51.     }
  52.     let mdResult = md.digestSync();
  54.     md5Stream.closeSync()
  55.     return mdResult.data
  56.   }
  58.   public static uint8ArrayToHexStr(data: Uint8Array): string {
  59.     let hexString = '';
  60.     let i: number;
  61.     for (i = 0; i < data.length; i++) {
  62.       let char = ('00' + data[i].toString(16)).slice(-2);
  63.       hexString += char;
  64.     }
  65.     return hexString;
  66.   }
  68.   public static checkFileMD5(srcFilePath: string, fileMd5Code: string) {
  69.     let file = fs.openSync(srcFilePath, fs.OpenMode.READ_ONLY)
  70.     // 校验文件完整性
  71.     let md5Code = DownloadUiApp.uint8ArrayToHexStr(DownloadUiApp.computeMD5(file.fd)).toUpperCase()
  72.     Logger.info('md5Code：' + md5Code)
  73.     return md5Code === fileMd5Code
  74.   }
  76.   public static async downloadUiApp(
  77.     downUrl: string,
  78.     fileName: string,
  79.     fileMd5Code: string,
  80.     callback: DownloadCallback
  81.   ) {
  82.     if (!downUrl.startsWith("http://") && !downUrl.startsWith("https://")) {
  83.       callback.onError()
  84.       Logger.info('uiapp  请传入正确的请求URL！')
  85.       return
  86.     }
  87.     try {
  88.       // 获取应用文件路径
  89.       const localCacheDir = DownloadUiApp.getLocalCacheDir();
  90.       let srcFilePath = `${localCacheDir}/${fileName}`
  91.       await DownloadUiApp.checkAndRemoveFile(srcFilePath);
  92.       let context = getContext() as common.UIAbilityContext;
  94.       request.downloadFile(context, {
  95.         url: downUrl,
  96.         filePath: srcFilePath,
  97.         background: false,
  98.         enableMetered: true,
  99.         enableRoaming: true
  100.       })
  101.         .then((downloadTask: request.DownloadTask) => {
  102.           downloadTask.on('complete', () => {
  103.             let isComplete = DownloadUiApp.checkFileMD5(srcFilePath, fileMd5Code)
  104.             if (isComplete) {
  105.               Logger.info('uiapp  下载uiapp 成功！')
  106.               callback.onSuccess(srcFilePath)
  107.             } else {
  108.               fs.unlinkSync(srcFilePath)
  109.               callback.onError('MD5_error')
  110.             }
  111.           })
  112.           downloadTask.on('fail', () => {
  113.             Logger.info('uiapp  下载uiapp失败')
  114.             callback.onError('down_fail')
  115.           });
  116.         }).catch((err: BusinessError) => {
  117.         Logger.info('uiapp  下载uiapp异常')
  118.         callback.onError('down_error')
  119.       });
  120.     } catch (error) {
  121.       let err: BusinessError = error as BusinessError;
  122.       Logger.info('uiapp  打开下载过程失败')
  123.       callback.onError('down_open_error')
  124.     }
  126.   }
  127. }
  129. /**
  130. * 下载文件的返回结果
  131. */
  132. interface DownloadCallback {
  133.   // MD5_error MD5校验失败
  134.   onError: (code?: string) => void;
  135.   onStart?: () => void;
  136.   inProgress?: (progress: number, total: number) => void;
  137.   onSuccess: (srcFilePath: string) => void;
  138. }
  139. 运行在线拉取的uiapp包
复制代码

  1. /**
  2. *  更新 uiapp 版本信息
  3. */
  5. function updateUiAppFile(appId: string, newSrcFilePath: string) {
  6.   let oldSrcFilePath = preferenceUtil.getPreference(appId, '') as string
  7.   if (oldSrcFilePath && fs.accessSync(oldSrcFilePath)) {
  8.     fs.unlinkSync(oldSrcFilePath)
  9.     Logger.info('删除 uiapp 老版本地址' + oldSrcFilePath)
  10.   }
  11.   if (oldSrcFilePath !== newSrcFilePath) {
  12.     preferenceUtil.putPreference(appId, newSrcFilePath)
  13.     Logger.info('更新 uiapp 新版本地址' + newSrcFilePath)
  14.   }
  15. }
  17. function readLocalUiAppToSandbox(appId: string): Promise<string> {
  18.   return new Promise(async (resolve) => {
  19.     try {
  20.       Logger.info(`读取本地文件 ${appId}.wgt`)
  21.       let context = getContext() as common.UIAbilityContext;
  22.       let val: Uint8Array = context.resourceManager.getRawFileContentSync(`${appId}.wgt`);
  23.       let localCacheDir: string = DownloadUiApp.getLocalCacheDir()
  24.       //目录不存在，则先创建存放小程序目录
  25.       if (!fs.accessSync(localCacheDir, fs.AccessModeType.EXIST)) {
  26.         await fs.mkdir(localCacheDir, true)
  27.       }
  28.       Logger.info("小程序 pathDir: " + localCacheDir);
  29.       // 待拷贝文件沙箱路径
  30.       let filePath: string = `${localCacheDir}/${appId}.wgt`;
  31.       // 若文件不存在，则创建文件。
  32.       let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  33.       let writeLen = fs.writeSync(file.fd, val.buffer as ArrayBuffer);
  34.       fs.closeSync(file);
  35.       Logger.info('复制到沙箱路径', filePath)
  36.       resolve(filePath)
  37.     } catch (error) {
  38.       Logger.info('读取本地文件错误')
  39.       resolve('')
  40.     }
  41.   })
  42. }
  44. // 小程序运行实例集合
  45. let uniMPInstanceCollections: Record<string, ESObject> = {}
  47. function uniMenuItemsClick(code: string, uniMPInstance: ESObject) {
  48.   Logger.info('menuItemClick::' + code)
  49.   switch (code) {
  50.     case CommonConstants.UNI_BACKEND_CODE:
  51.       uniMPInstance.hide()
  52.       break;
  53.     case CommonConstants.UNI_CLOSE_CODE:
  54.       //  关闭小程序
  55.       uniMPInstance.close()
  56.       uniMPInstance = null
  57.       break;
  58.   }
  59. }
  61. /**
  62. *  调起 uiapp
  63. */
  64. async function loadUiApp(appId: string, redirectPath?: string) {
  65.   //进度加载类弹出框
  66.   const dialogId = DialogHelper.showLoadingDialog({
  67.     loadType: SpinType.spinP,
  68.     loadColor: Color.White,
  69.     loadSize: 30,
  70.     backgroundColor: '#BB000000',
  71.     content: "加载中…",
  72.     fontSize: 15,
  73.     autoCancel: true
  74.   })
  75.   try {
  76.     let uiappInfo = await checkUiAppStatus(appId)
  77.     let uiAppDirPath = uiappInfo.uiAppDirPath
  78.     if (uiappInfo.code === 'version_error' || true) {
  79.       let localCacheDir: string = DownloadUiApp.getLocalCacheDir()
  80.       let srcFilePath = `${localCacheDir}/${appId}`
  81.       if (!fs.accessSync(srcFilePath)) {
  82.         let sandboxFilePath = await readLocalUiAppToSandbox(appId)
  83.         if (sandboxFilePath) {
  84.           uiAppDirPath = sandboxFilePath
  85.         } else {
  86.           promptAction.showToast({
  87.             message: '获取版本信息异常'
  88.           })
  89.           Logger.info('version_error return')
  90.           return
  91.         }
  92.       }
  93.     }
  94.     Logger.info(`完成检查动作  获得地址 :: ${JSON.stringify(uiappInfo)}`)
  96.     DialogHelper.closeDialog(dialogId)
  98.     // 已经存在，并且运行中直接打开小程序
  99.     if (uniMPInstanceCollections[appId] && uniMPInstanceCollections[appId].isRunning()) {
  100.       Logger.info('小程序 uniMPInstance: show')
  101.       uniMPInstanceCollections[appId].show()
  102.     } else {
  103.       // 小程序没执行或者已经被关闭掉了的重新运行
  104.       releaseWgtToRunPath(appId, uiAppDirPath, (code) => {
  105.         Logger.info('小程序：：  getAppVersionInfo' + JSON.stringify(getAppVersionInfo(appId)))
  106.         if (code === CommonConstants.UIAPP_RUN_SUCCESS) {
  107.           updateUiAppFile(appId, uiAppDirPath)
  108.           uniMPInstanceCollections[appId] = openUniMP(appId, {
  109.             redirectPath: redirectPath || '',
  110.             capsuleMenuActionSheetItems: [
  111.               {
  112.                 id: CommonConstants.UNI_BACKEND_CODE,
  113.                 title: '将小程序隐藏到后台'
  114.               },
  115.               {
  116.                 id: CommonConstants.UNI_CLOSE_CODE,
  117.                 title: '关闭小程序'
  118.               }
  119.             ]
  120.           });
  122.           uniMPInstanceCollections[appId].capsuleCloseButtonClick = () => {
  123.             uniMenuItemsClick(CommonConstants.UNI_CLOSE_CODE, uniMPInstanceCollections[appId])
  124.           }
  125.           uniMPInstanceCollections[appId].on('menuItemClick', (id: string) => {
  126.             uniMenuItemsClick(id, uniMPInstanceCollections[appId])
  127.           })
  129.         }
  130.       })
  131.     }
  132.    
  133.   } catch (error) {
  134.     DialogHelper.closeDialog(dialogId)
  135.     let code = (error as BusinessError).code;
  136.     let message = (error as BusinessError).message;
  137.     Logger.info(`执行打开小程序失败 code: ${code}  message: ${message}`)
  138.   }
  139. }
复制代码
注册模块提供给uiapp小程序使用
  1. /**
  2. *  注册 BGYUniCommonNativeModule 模块，供uiapp小程序调用
  3. */
  5. registerModule('BGYUniCommonNativeModule', {
  6.   getUserInfo(data: object, callback: Function) {
  7.     let userInfoData = preferenceUtil.getPreference('userInfoData', '') as string
  8.     Logger.info('小程序 getUserInfo' + userInfoData)
  9.     callback && callback({
  10.       code: 200,
  11.       data: JSONUtil.isJSONStr(userInfoData) && JSONUtil.jsonToBean(userInfoData) || null
  12.     })
  13.   }
  14. })
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

温锦文欧普厨电及净水器总代理

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

国产数据库 集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表