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

本教程旨在指导您如何理解和使用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"}
          ]
      ]
  }
  

  此配置避免了非小程序运行必需的文件被包含进最终的小程序包。

• sitemap.json: 控制搜索引擎对小程序页面的抓取行为。

通过以上步骤和配置，您可以顺利运行和理解这个结合了前沿技术和微信生态的项目。记得根据具体的开发需求调整配置和代码细节，享受开发过程！