dweb-browser阅读

dweb-browser阅读

  • 核心模块
    • js.browser.dweb
    • jmm.browser.dweb
    • mwebview.browser.dweb
    • nativeui.browser.dweb
    • .sys.dweb
  • plaoc插件

核心模块

js.browser.dweb

它是一个 javascript-runtime,使用的是 WebWorker 作为底层实现。它可以让您在 dweb-browser 中运行 javascript 代码,因此 WebWorker 中的各种标准都可以开箱即用。

jmm.browser.dweb

它是一个动态 dweb 模块管理器,基于此可以实现类似 PWA 的应用功能,
它可以让您在 dweb-browser 中安装、卸载、更新和调用各种 dweb 模块。

mwebview.browser.dweb

它的全称是 mutil-webview(多 web 视图)的渲染器,可以使用这个渲染器同时渲染多个 Web 视图。比如说可以用它实现一个网页浏览器。

nativeui.browser.dweb

它是一个 dweb-browser 自己定义的窗口标准,它被集成到 mwebview 中,因此可以让 mwebview 的视图获得窗口管理的能力。

.sys.dweb

和浏览器相关的一些系统标准也在 dweb-browser 上被实现,它们可以让您在 dweb-browser 中使用浏览器的能力和系统原生的能力,比如文件系统、操作系统、相机、状态栏、分享等。

plaoc插件

基于 dweb-browser 平台的一个对标 Cordova、Capacitor、Tauri 的“跨平台 Web 应用”开发工具包。
plaoc的使用跟bfmeta-sdk下载差不多,直接使用:

npm install @plaoc/plugins

在代码中可以下面这样使用:

  1. 以 插件的形式使用
import { barcodeScannerPlugin } from "@plaoc/plugins";
// 调用扫码
const taskPshoto = async () => {
  await barcodeScannerPlugin.startScanning();
};
  1. 以 webComponent 形式使用
<body>
  <dweb-barcode-scanning></dweb-barcode-scanning>
  <button @click="taskPhoto()">scanner</button>
<script type="module">
import "@plaoc/plugins"
const barcodeScanner = document.querySelector("dweb-barcode-scanning")!
// Call barcode scanning
async function taskPhoto() {
  await barcodeScanner.startScanning();
}
Object.assign(globalThis,{ taskPhoto })
</script>
</body>

最后,要把我们的项目迁移到这个浏览器,首先,需要安装 plaoc 插件,可以通过 npm 或者 yarn 来安装 plaoc 插件,或者直接在 HTML 中引入 plaoc 插件。例如,如果使用 npm 来安装 plaoc 插件,可以在终端中输入以下命令:

npm install @plaoc/plugins

其次,需要选择使用 plaoc 插件的形式,可以以插件的形式或webComponent 的形式来调用 plaoc 插件。以插件的形式使用时,需要先导入 plaoc 插件中的相应模块,然后调用其方法。以 webComponent 的形式使用时,需要先在 HTML 中引入 plaoc 插件,然后使用其自定义标签。
最后,需要根据的项目需求,替换或者添加 plaoc 插件提供的接口和方法。plaoc 插件提供了很多跨平台的访问系统功能的接口和方法,比如文件系统、操作系统、相机、状态栏、分享等。具体详细的过程还需要参考 plaoc 插件的文档和源码接口来学习。

你可能感兴趣的:(web3)