开发指南

API 文档

步骤1:环境配置

最近更新时间:2022-03-04 15:27:09

本文主要围绕项目配置文件 app.json 和 app.js 进行讲解,更多项目配置文件代码细节可参见 app.json 配置app.js 配置

操作步骤

步骤1:创建项目所需页面

首先进行需求分析:

  • 一个商城至少需要一个首页用来给用户展示商城有的商品。
  • 一个商品详情页用来介绍单个商品的信息。
  • 一个购物车用来给用户存放自己想要的商品。

所以我们需要在小程序项目配置文件 app.json 中编写 pages 中的内容,输入相应的路径后,开发者工具就会生成对应路径上的页面文件。

"pages":[
"pages/index/index",
"pages/cart/cart",
"pages/detail/detail"
],

步骤2:配置商城的导航栏

生成 步骤1 页面后,需要将页面添加到导航栏中,方便用户使用。 在 app.json 里,添加一个 tabBar 属性,因为商城的两大块分为首页和购物车。所以在 tarBar 里的 list 属性添加两个按钮,并将它们的页面地址、标题、图标配置好。

"tabBar": {
"selectedColor": "#f00",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./汤圆酱/1.jpeg",
"selectedIconPath": "./汤圆酱/3.jpeg"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "./汤圆酱/2.jpeg",
"selectedIconPath": "./汤圆酱/4.jpeg"
}
]
}
效果图如下:

步骤3:配置云开发环境

  1. 进入微信开发者工具 > 云开发控制台页面,复制环境 ID
  2. app.js 里面调用 API,wx.cloud.init 传入云开发控制台中的云环境 ID,方便项目调用控制台中的数据和资源。
    // app.js
    App({
    onLaunch: function () {
    wx.cloud.init({
    env:'xxxxx' //输入您的环境 ID
    })
    },
    globalData: {
    userInfo: null
    }
    })

步骤4:创建数据库

将商城的商品使用数据库来存储,方便后面页面使用数据库进行商品的展示。

  1. 进入微信开发者工具 > 云开发控制台 > 数据库页面。创建 cartsgoodsorders 三个集合。
  2. 进入 goods 集合,单击添加记录添加一些初始信息,每个数据记录的属性如下:
    • count:商品数量。
    • imageSrc:商品图片,从云存储中获取。
    • price:商品价格。
    • tags:商品类别标签。
    • title:商品名称。
说明:

商品图片要在云存储中先导入才能生成图片的位置,便于开发时图片数据的调用。

步骤5:云存储导入图片

  1. 进入微信开发者工具 > 云开发控制台 > 存储页面。
  2. 单击新建文件夹并命名为 goods
  3. 进入 goods 文件夹,单击上传文件并传入所需要的图片,这些文件可以使用 FileID 在项目中进行调用。

步骤6:创建云函数

  1. 在目录中创建云函数的文件夹 cloudfunction,然后在 project.config.json 中设置云函数的 cloudfunctionRoot 属性值为“cloudfunction/”。
  2. 当文件夹 cloudfunction 目录下的文件变成绿色,就代表云函数的初始化完成。可右击文件夹单击新建 Node.js 云函数,即可创建一个云函数。创建结果如下图:
目录