微信小程序AR与WebAssembly实战教程

2024-09-27 22:34:16作者：魏侃纯Zoe

WeChat-MiniProgram-AR-WASM

项目地址：https://gitcode.com/gh_mirrors/we/WeChat-MiniProgram-AR-WASM

本教程旨在指导您如何理解和使用WeChat-MiniProgram-AR-WASM项目，该项目整合了Go语言、OpenCV以及WebAssembly技术，专为微信小程序设计，以实现增强现实(AR)功能和高效的图像处理。

1. 项目目录结构及介绍

本项目采用层次化的目录结构来组织代码和资源：

根目录: 包含小程序的主要源代码和配置。
- go_dev: Go语言编写的WebAssembly源代码目录。
- node_dev: Node.js相关开发文件（如果涉及前后端分离或npm包管理）。
- miniprogram_npm: 编译后的npm包，这里是特定于微信小程序的text-encoder库。
- opencv_dev: 使用OpenCV的示例代码，展示了如何集成OpenCV到小程序中。
- package_lesson1, package_lesson2: 分别是Go调用小程序函数与小程序调用Go的示例。
- pages: 小程序页面相关的文件夹。
- screenshots: 截图存放位置，展示项目效果。
- style: 样式文件。
- LICENSE: 项目授权许可协议，遵循BSD-3-Clause。
- README.md: 项目简介和快速指南。
- 配置文件如app.js, app.json, project.config.json, sitemap.json等。

2. 项目的启动文件介绍

Go语言启动（以web为例）

若要在网页环境中运行Go编译的WASM代码，需关注go_dev/lesson1.html文件，其中通过WebAssembly实例化并执行Go编写的代码：

const go = new globalThis.Go();
try {
    const result = await WebAssembly.instantiateStreaming(fetch(wasm_url), go.importObject);
    await go.run(result.instance);
    // 运行您的Go程序逻辑...
} catch (err) {
    console.error('initGo', err);
}

微信小程序启动

对于微信小程序，启动关键在于正确配置和调用WebAssembly。在package_lesson1/index.js这样的入口文件中，利用WXWebAssembly.instantiate加载和执行WASM模块，并确保符合小程序规范：

const go = new globalThis.Go();
try {
    const result = await WXWebAssembly.instantiate(wasm_url, go.importObject);
    await go.run(result.instance);
    // 实现与小程序的交互逻辑...
} catch (err) {
    console.error('initGo', err);
}

3. 项目的配置文件介绍

app.json: 定义小程序全局配置，包括页面路径、窗口表现、底部tab等。
```
{
    "pages": ["pages/index/index"], // 页面列表
    ...
}
```

project.config.json: 项目配置文件，特别地，用于控制构建过程，例如排除特定文件夹以免被打包：

{
    "packOptions": [
        "ignore": [
            {"type": "folder", "value": "screenshot"},
            {"type": "folder", "value": "node_dev"},
            {"type": "folder", "value": "go_dev"}
        ]
    ]
}