【亲测免费】 Taro • 云开发电商小程序示例教程

Taro • 云开发电商小程序示例教程

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

eshop/
├── client/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── app.js
│   │   ├── app.json
│   │   └── app.wxss
│   └── project.config.json
├── cloud/
│   ├── doc/
│   ├── functions/
│   └── index.js
├── .gitignore
├── LICENSE
├── README.md
└── project.config.json

目录结构说明

• client/: 客户端代码目录，包含小程序的前端代码。

  • src/: 小程序的源代码目录。
    • components/: 存放小程序的自定义组件。
    • pages/: 存放小程序的页面文件。
    • app.js: 小程序的入口文件，负责初始化小程序。
    • app.json: 小程序的全局配置文件，定义页面路径、窗口表现等。
    • app.wxss: 小程序的全局样式文件。
  • project.config.json: 小程序的项目配置文件，包含项目的appid等信息。

• cloud/: 云开发相关代码目录。

  • doc/: 存放云开发相关的文档和模拟数据。
  • functions/: 存放云函数代码，按模块进行分割。
  • index.js: 云开发入口文件。

• .gitignore: Git忽略文件配置。

• LICENSE: 项目开源许可证文件。

• README.md: 项目说明文档。

• project.config.json: 项目的配置文件，包含项目的appid等信息。

2. 项目的启动文件介绍

client/src/app.js

app.js 是小程序的入口文件，负责初始化小程序并配置云开发环境。

// src/app.js
import Taro from '@tarojs/taro';

async componentDidMount() {
  Taro.cloud.init({
    env: 'xxyyzz', // 换成你的云函数环境
    traceUser: true // 是否要捕捉每个用户的访问记录，设置为true，用户可在管理端看到用户访问记录
  });
}

cloud/index.js

index.js 是云开发的入口文件，负责初始化云开发环境。

// cloud/index.js
const cloud = require('wx-server-sdk');

cloud.init({
  env: 'xxyyzz' // 换成你的云函数环境
});

3. 项目的配置文件介绍

client/project.config.json

project.config.json 是小程序的项目配置文件，包含项目的appid等信息。

{
  "miniprogramRoot": "client/src/",
  "cloudfunctionRoot": "cloud/functions/",
  "appid": "your-appid",
  "projectname": "eshop",
  "description": "Taro • 云开发电商小程序示例"
}

cloud/project.config.json

cloud/project.config.json 是云开发的项目配置文件，包含云函数的配置信息。

{
  "cloudfunctionRoot": "cloud/functions/",
  "appid": "your-appid"
}

通过以上配置文件，可以确保小程序和云开发环境的正确初始化和配置。