【亲测免费】 微信小程序AR项目使用教程

1. 项目的目录结构及介绍

WeChat-MiniProgram-AR-TFJS/
├── app.js
├── app.json
├── app.wxss
├── components/
│   └── ar-canvas/
│       ├── ar-canvas.js
│       ├── ar-canvas.json
│       ├── ar-canvas.wxml
│       └── ar-canvas.wxss
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs/
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
└── README.md

目录结构说明

• app.js, app.json, app.wxss: 小程序的全局配置文件和样式文件。
• components/: 存放自定义组件的目录，ar-canvas 是用于AR功能的自定义组件。
• pages/: 存放小程序页面的目录，index 是主页，logs 是日志页面。
• project.config.json: 小程序项目的配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

app.js

app.js 是小程序的入口文件，负责初始化小程序的全局数据和生命周期函数。

App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    // 全局数据
  }
})

app.json

app.json 是小程序的全局配置文件，定义了小程序的页面路径、窗口表现、网络超时时间等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "AR Demo",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

app.wxss

app.wxss 是小程序的全局样式文件，定义了小程序的全局样式。

page {
  background-color: #f6f6f6;
}

3. 项目的配置文件介绍

project.config.json

project.config.json 是小程序项目的配置文件，包含了小程序的开发者工具配置信息。

{
  "miniprogramRoot": "./",
  "projectname": "WeChat-MiniProgram-AR-TFJS",
  "description": "A demo of AR using TensorFlow.js in WeChat MiniProgram",
  "appid": "touristappid",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "compileType": "miniprogram"
}

配置文件说明

• miniprogramRoot: 小程序的根目录。
• projectname: 项目的名称。
• description: 项目的描述。
• appid: 小程序的AppID。
• setting: 小程序的编译设置，包括是否检查URL、是否启用ES6、是否启用PostCSS、是否压缩代码等。
• compileType: 编译类型，这里是小程序。