【系】微信小程序云开发实战坚果商城
 
目录
 
 
开篇
 
  
【系】微信小程序云开发实战坚果商城-开篇
 
 
基础篇
 
  
【系】微信小程序云开发实战坚果商城-弹性盒子
【系】微信小程序云开发实战坚果商城-ES6 简单入门
【系】微信小程序云开发实战坚果商城-官方案例先运行
 
 
前端篇
 
  
【系】微信小程序云开发实战坚果商城-商城项目搭建
【系】微信小程序云开发实战坚果商城-前端之首页实现
【系】微信小程序云开发实战坚果商城-前端之分类实现
【系】微信小程序云开发实战坚果商城-前端之主题实现
【系】微信小程序云开发实战坚果商城-前端之购物车实现
【系】微信小程序云开发实战坚果商城-前端之商品详情实现
【系】微信小程序云开发实战坚果商城-前端之订单实现
【系】微信小程序云开发实战坚果商城-前端之个人中心实现
 
 
云开发篇
 
  
【系】微信小程序云开发实战坚果商城-数据库设计
【系】微信小程序云开发实战坚果商城-云开发开篇
【系】微信小程序云开发实战坚果商城-云开发之环境搭建
【系】微信小程序云开发实战坚果商城-云开发之配置文件和工具类
【系】微信小程序云开发实战坚果商城-云开发之数据库操作
【系】微信小程序云开发实战坚果商城-云开发之首页数据实现
【系】微信小程序云开发实战坚果商城-云开发之分类数据实现
【系】微信小程序云开发实战坚果商城-云开发之商品信息和主题商品数据实现
【系】微信小程序云开发实战坚果商城-云开发之订单品数据实现
 
 
交互篇
 
  
【系】微信小程序云开发实战坚果商城-前后端交互之开篇
【系】微信小程序云开发实战坚果商城-前后端交互之首页实现
【系】微信小程序云开发实战坚果商城-前后端交互之分类实现
【系】微信小程序云开发实战坚果商城-前后端交互之主题实现
【系】微信小程序云开发实战坚果商城-前后端交互之购物车实现
【系】微信小程序云开发实战坚果商城-前后端交互之商品详情实现
【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
【系】微信小程序云开发实战坚果商城-前后端交互之个人中心实现
 
 
扩展篇
 
  
【系】微信小程序云开发实战坚果商城-扩展篇
 
 
源码地址
 
 
 
在搭建项目前，根据自己需要下载本系列文章的源代码
 gitee 源码地址：https://gitee.com/mtcarpenter/nux-shop
 github 源码地址：https://github.com/mtcarpenter/nux-shop
 
 
获取 PDF
 
【微信小程序云开发实战坚果商城】系列教程发布一年有余了，感谢各位小伙伴的肯定，但是还有诸多问题，很早之前我就想着写一章答疑篇解决留言和私信高频内容。
 欢迎微信搜索「山间木匠」，后台回复关键字「坚果商城」可以免费获取我为你精心准备的坚果商城 PDF 版和评论私信高频问题解决方案PDF（从零部署坚果商城解决图片，数据，无法显示等问题）。

一、注册微信小程序
 
微信小程序有一个云开发的功能，可以省去很多的后台开发的任务。不过，使用小程序云开发需要注册的小程序appid，测试和游客没有云开发功能的。如果你还没有注册小程序可以安装官方的文档说明先注册一个小程序appid。
 

 注册完成后，就可以填写小程序的相关信息，然后系统会给我们生成小程序的appid等必要的信息，如下图所示。
 
 然后，我们打开微信小程序开发工具，新建一个微信小程序项目，如果还没有，可以点击下载微信开发工具。然后，创建微信小程序的时候填写appid，如下图所示。
 

 然后，我们在微信开发工具的开发面板会发现有一个云开发的按钮。云开发可以让开发者无需搭建服务器，即可使用云数据库、云存储、云函数和云托管等全部云能力。
 然后，我们点击它进行后台数据环境的搭建，如下图。
 
 
二、搭建云开发模版
 
我们可以按照如下步骤来快速开始使用云开发。
 
新建云开发模板
开通云开发
体验小程序
查看控制台
 
1， 新建云开发模板
 
首先，新建一个项目，填入 AppID（使用云开发能力必须填写 AppID），勾选创建 “云开发 QuickStart 项目”，点击创建即可得到一个展示云开发基础能力的示例小程序。该小程序与普通 QuickStart 小程序有以下不同需注意。
 
无游客模式、也不可以使用 测试号
project.config.json 中增加了字段 cloudbaseRoot 用于指定存放云函数 & 云托管的目录
cloudbaseRoot 指定的目录有特殊的图标
云开发能力从基础库 2.2.3 开始支持（覆盖率 97.3%，查看兼容性问题）
 
2， 开通云开发、创建环境
 
创建了第一个云开发小程序后，在使用云开发能力之前需要先开通云开发。在开发者工具工具栏左侧，点击 “云开发” 按钮即可打开云控制台、根据提示开通云开发、创建云环境。默认配额下可以创建两个环境，各个环境相互隔离，每个环境都包含独立的数据库实例、存储空间、云函数配置等资源。每个环境都有唯一的环境 ID 标识，初始创建的环境自动成为默认环境。
 
3，体验小程序
 
开通创建环境后，即可以开始在模拟器上操作小程序体验云开发提供的部分基础能力演示。
 
4， 查看控制台
 
云开发控制台是管理云开发资源的地方，控制台提供以下能力。
 
运营分析：查看云开发监控、配额使用量、用户访问情况
数据库：管理数据库，可查看、增加、更新、查找、删除数据、管理索引、管理数据库访问权限等
存储管理：查看和管理存储空间
云函数：查看云函数列表、配置、日志
 
 
5，销毁环境
 
当然，开发者可登陆 微信开发者工具 中的 云开发控制台，在设置中点击切换环境，在下拉框中点击管理我的环境对环境进行管理删除。
 
 
 
三、 云开发能力
 
微信小程序云开发提供了数据库、云存储、云函数、云调用、HTTP API 等功能。
 
3.1 数据库
 
云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合，集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。
 
关系型数据库和JSON数据库的对应关系如下表。
 
关系型数据库
文档型
数据库 database
数据库 database
表 table
集合 collection
列 column
字段 field
以下是一个示例的集合数据，假设我们有一个 books 集合存放了图书记录，如下所示。
 
[
  {
    "_id": "Wzh76lk5_O_dt0vO",
    "title": "The Catcher in the Rye",
    "author": "J. D. Salinger",
    "characters": [
      "Holden Caulfield",
      "Stradlater",
      "Mr. Antolini"
    ],
    "publishInfo": {
      "year": 1951,
      "country": "United States"
    }
  },
  {
    "_id": "Wzia0lk5_O_dt0vR",
    "_openid": "ohl4L0Rnhq7vmmbT_DaNQa4ePaz0",
    "title": "The Lady of the Camellias",
    "author": "Alexandre Dumas fils",
    "characters": [
      "Marguerite Gautier",
      "Armand Duval",
      "Prudence",
      "Count de Varville"
    ],
    "publishInfo": {
      "year": 1848,
      "country": "France"
    }
  }
]
 
3.2 存储
 
云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。
 
在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面简单的几行代码，即可实现在小程序内让用户选择一张图片，然后上传到云端管理的功能。
 
// 让用户选择一张图片
wx.chooseImage({
  success: chooseResult => {
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
      // 指定上传到的云路径
      cloudPath: 'my-photo.png',
      // 指定要上传的文件的小程序临时文件路径
      filePath: chooseResult.tempFilePaths[0],
      // 成功回调
      success: res => {
        console.log('上传成功', res)
      },
    })
  },
})
 
3.3 云函数
 
云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。
 
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文，无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）。
 
比如我们如下定义一个云函数，命名为 add ，功能是将传入的两个参数 a 和 b 相加的功能。
 
const cloud = require('wx-server-sdk')
exports.main = async (event, context) => {
  let { userInfo, a, b} = event
  let { OPENID, APPID } = cloud.getWXContext() // 这里获取到的 openId 和 appId 是可信的
  let sum = a + b

  return {
    OPENID,
    APPID,
    sum
  }
}
 
然后，我们在微信小程序端使用wx.cloud即可使用云函数，如下所示。
 
wx.cloud.callFunction({
  // 需调用的云函数名
  name: 'add',
  // 传给云函数的参数
  data: {
    a: 12,
    b: 19,
  },
  // 成功回调
  complete: console.log
})
// 当然 promise 方式也是支持的
wx.cloud.callFunction({
  name: 'add',
  data: {
    a: 12,
    b: 19
  }
}).then(console.log)
 
如需在云函数中操作数据库、管理云文件、调用其他云函数等操作，可使用官方提供的 npm 包 wx-server-sdk 进行操作。
 
3.4 HTTP API
 
云开发资源也可以通过 HTTP 接口访问，即在小程序外访问，接口见HTTP API 文档。
 
四、项目实例
 
4.1 抽奖小助手
 
下面以【抽奖助手小程序】为例，如何使用微信小程序云开发功能提供接口数据。
 
首先，打开【云开发】面板，创建一个集合，并将集合权限设置为【所有人可读，仅创建者可读写】。然后，将项目中data里面的lottery.json文件导入到lottery集合，如下图所示。
 
 
然后，部署云函数即可。
 
 
然后重新运行项目，最终的效果如下图所示。
 
 附件： 抽奖小助手源码
 微信小程序云开发实战
 
4.2 租房微信小程序
 
下面是另一个使用云技术开发的一个租房小程序，开源地址：https://github.com/lx164/house
 
目录结构
 
|--|-- cloudfunctions 云函数
|--|--|--|-- AdminManage
|--|--|--|-- Entrust
|--|--|--|-- HouseInfo
|--|--|--|-- InitInfo
|--|--|--|-- Manager
|--|--|--|-- PublishEntrust
|--|-- miniprogram 小程序页面
|--|--|--Adminpackage 管理员后台（分包）
|--|--|--|--略
|--|--|--CalculatorPackage 房贷计算器（分包）
|--|--|--|--略
|--|--|--Companypackage 主要页面（分包）
|--|--|--|--略
|--|--|--dist 一些用到的组件，只用到了一小部分
|--|--|--pages 主包（主要是底部NaviBar页面）
|--|--|--|--略
|--|--其他页面略
|--README.md
 
配置过程
 
使用微信开发者工具导入项目（导入的时候请选择 APP 文件夹），导入项目的时候需要填写APPID才能开启云开发功能。然后，新建以下数据库集合，一行为一个集合名，如下所示。
 
AdminStator
Collections
CompanyInfo
ContactList
Entrust
NewHouse
Recommend
RentingHouse
SecondHouse
TempCllection
UserList
 
在设置集合的权限时，集合AdminStator权限设置为【所有用户不可读写】，其余的集合权限修改为【所有用户可读，仅创建者可读写】。
 
接下来，设置第一个初始的管理员信息，在 AdminStator 新建一条记录，把以下的字段内容添加到该记录中，其中（）里的内容根据你的实际情况填写。
 
 "level":0,
 "avatarUrl":"(头像)",
 "updatetime":"(2021/01/12 06:01:18)",
 "_openid":"(管理员的openid)",
 "name":"(管理员名字)",
 "phone":"(管理员手机)"
 
获取微信openid有两种方法，分别是使用云开发方式和非云开发方式，获取微信openid的两种方法。
 
然后，在集合CompanyInfo 新建一条记录，把以下的字段内容添加到该记录中，其中（）里的内容根据你的实际情况填写。
 
    "_id":"cb37e58c-f634-49d3-93b9-5aebec00a23a（可以不修改）",
    "introduce":"(平台/公司介绍，根据实际填写)",
    "updatetime":"2020/06/27 14:22:31",
    "editer":"（编辑人，后面会自动修改的）",
    "phone":"（编辑人手机号码，后面会自动修改的）",
    "notice":"（首页滚动公告内容） "
 
上传 cloudfunctions 文件夹下所有的云函数，上传时选择 上传并部署【云端安装依赖】，如下图所示。
 
 
最后，修改 app.js 的配置代码，如下。
 
 wx.cloud.init({
     env: '(填写你自己云环境的ID)',
     traceUser: true,
  })
 
云环境的ID可以点击云开发面板的顶部右侧【设置】按钮来获取，如下图所示。
 
 
最后，重新编译运行项目即可。
 
运行效果
 

什么是微信小程序云开发：
 
个人理解是一套后端服务能力（数据库、文件空间、云函数），相比购买一套服务器空间、数据库、写后端代码，云开发会更方便。（但只限于部分小项目推荐）
 
创建一个带云开发能力的微信小程序：（请更新到最新版本的微信开发者工具，我现在是v1.02.18.09111）
 1、新建“云开发快速启动模板”；
 2、点击左上角“云开发”按键；
 3、在云开发控制台配置，环境名、ID
 4、在开发者工具的miniprogram/app.js添加wx.cloud.init({env:"云开发环境ID"})
 5、在开发者工具，右击cloudfunctions文件夹，选择“同步云函数列表“，即可完成云开发设置；
 6、在cloudfunctions下的文件夹，每次修改后，都需要上传并部署，方可被小程序前端调用；
 
微信小程序开发问题整理：
 12、在云函数里，获取云const cloud=require('wx-server-sdk'); const db=cloud.database();
 16、用户通小程序，新增到数据库里的记录，默认会生成_id字段；
 17、数据集（表）权限为“仅创建者及管理员可读写”时，从小程序端只能获取当前用户创建的记录，自动排除非当前用户_openid的记录；
 18、云函数使用wx-server-sdk时，需要安装依赖到nodejs，所以必须在电脑上安装nodejs及其自带的npm，安装教程https://www.cnblogs.com/zhouyu2017/p/6485265.html
 19、云函数每次修改后，都需要重新上付部署到云端，小程序才可以使用修改后的云函数。 
 21、异步获取数据集后，再循环异步修改各条数据，可使用async await 结合for循环；或使用Promise.all方法
 22、当报错为某字段 undefined，可能是字段名写错，或无值；
 23、object某字段如果有点号，例res={scope.userInfo:true}，获取字段值的方法res["scope.userInfo"]
 24、不使用外插件时，微信小程序不支持async await，但支持promise；另外云函数两者都支持；
 25、学会使用Promise对象、Promise.all()、Promise.race()
 
26、云开发控制台，测试函数用的数据不能有中文字；
 
27、云函数，return前的异步执行都需使用await，或使用return promise方法。不然，会中断异步执行，直接返回。
 
28、云函数里，可return非promise对象；
 
理论学习差不多了，是时候动手写代码了，我写的一个示例：https://github.com/WhhTraveller/Travel-Group-Demo---WX-Cloud

 
目录
 
微信小程序云开发源码（垃圾分类源码）
小程序云数据库介绍
小程序界面
小程序体验（扫描下方二维码体验效果）
微信小程序源码
链接：https://pan.baidu.com/s/1U19Suzs3nZnMt5OHNGUahQ 提取码：z0oq
   
  
 

 
微信小程序云开发源码（垃圾分类源码）
 
最近发现全国大面积开始实行垃圾分类，基于自己一直从事软件开发工作，因此在工作闲余时间，接触微信小程序，花费两周的时间开发了垃圾分类小程序，大家可以看看效果，不喜勿喷哦
 
小程序云数据库介绍
 
在小程序开发初期，由于涉及到后台数据的存储，当时考虑了百云、阿云、企鹅云等，基于人力、物力、财力的各种限制（主要还是没钱），自己在开发过程中优先考虑了腾讯的云开发，使用其后台的数据库，下图是云开发的资源配额，可以根据的使用需求选择不同的版本：
 
 
云开发环境创建完成后，按照下图的结构配置了小程序的后台：
 
 
主要依赖的集合rubbishMain中的字段排列方式就如图所示。
小程序包含热门搜索，搜索统计，及模糊查找的功能。
针对最新的额外增加了语音识别的功能，效果还可以。
目前图像识别也已经完成，官方审核已审核通过。
 
小程序界面
 
下图是搜索的垃圾种类界面：
 
 下图是用户经常查询的热门搜索物品：
 
 
小程序体验（扫描下方二维码体验效果）
 
 
微信小程序源码
 
通过以下方式获取：
 
链接：https://pan.baidu.com/s/1U19Suzs3nZnMt5OHNGUahQ 提取码：z0oq