微信小程序云开发学习笔记

（官网）

1、创建小程序选择云开发

对应的环境

在app.js中配置环境Id

//app.js
App({onLaunch: function () {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({// env 参数说明：//   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源//   此处请填入环境 ID, 环境 ID 可打开云控制台查看//   如不填则使用默认环境（第一个创建的环境）env: 'cloud1-0gxssm592d3c3558',traceUser: true,})}this.globalData = {}}
})

获取openId的云函数

const cloud = require('wx-server-sdk')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})// 获取openId云函数入口函数
exports.main = async (event, context) => {// 获取基础信息const wxContext = cloud.getWXContext()return {openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

project.config文件定义云函数及项目目录文件名，修改时一起修改

2、数据库

新建数据库

新增数据

2-1、查询

1、查询所有

index.js

const db = wx.cloud.database()
Page({data: {books:[]},onLoad (options) {db.collection('books').get().then(res=>{this.setData({books:res.data})})},
})

index.html

<!--index.wxml-->
<view class="container"><view class="title">数据库学习</view><view wx:for="{{books}}" wx:key='_id' class="book_item"><image class="book_img" mode="widthFix" src="{{item.img}}"></image><view class="book_info"><view>书名：{{item.name}}</view><view>作者：{{item.author}}</view><view>价格：{{item.price}}</view></view></view>
</view>

where 方法可以指定查询条件（查询价格为80的数据）

db.collection(‘books’).where({
price:80
}).get().then(res=>{
this.setData({
books:res.data
})
})

2、查询指令：指令都暴露在 db.command 对象上

 onLoad (options) {const _ = db.commanddb.collection('books').where({// gt 方法用于指定一个 "大于" 条件，此处 _.gt(80) 是一个 "大于 80" 的条件price: _.gt(80)}).get().then(res=>{this.setData({books:res.data})})},

##3、逻辑指令and、 or

 const _ = db.commanddb.collection('books').where({ and 方法用于指定一个 "与" 条件，此处表示需同时满足 _.gt(30) 和 _.lt(80) 两个条件//price:  _.gt(30).and(_.lt(90))// or 方法用于指定一个 "或" 条件，此处表示需满足 _.eq(0) 或 _.eq(90)price:  _.eq(60).or(_.eq(90))}).get().then(res=>{this.setData({books:res.data})})},

2-2、更新

局部更新update

updateBook(){db.collection('books').doc('8937eaa9611a05f604ef5b3065050162').update({// data 传入需要局部更新的数据data: {// 表示将 done 字段置为 trueprice: 120},success: function(res) {console.log(res,'更新')this.getBooks()}})}

更新失败：因为数据是在云开发控制台手动添加的，没有_openid字段，通过小程序方法创建的数据携带_openid,可以更改
除了用指定值更新字段外，数据库 API 还提供了一系列的更新指令用于执行更复杂的更新操作，更新指令可以通过 db.command 取得：

例：将小程序端新增的数据价格加10

updateBook(){const _ = db.commanddb.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').update({// data 传入需要局部更新的数据data: {// 表示将 price 加10price:_.inc(10)}}).then(res=>{console.log(res,'更新');this.getBooks()})},

替换更新：如果需要替换更新一条记录，可以在记录上使用 set 方法，替换更新意味着用传入的对象替换指定的记录：

 updateBook(){db.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').set({// data 传入需要更新的数据data: {price:150,name:'一念永恒',author:'白小纯'}}).then(res=>{console.log(res,'更新');this.getBooks()})},

2-3、新增

 <view>书名：<input  bindinput='addBookName' /></view><view>作者：<input bindinput='addBookAuthor' /></view><view>价格：<input bindinput='addBookPrice' /></view><button type="primary" bindtap="addBook">新增</button>

 addBookName(e){console.log(e.detail.value,'书名');this.setData({bookName:e.detail.value})},addBookAuthor(e){this.setData({bookAuthor:e.detail.value})},addBookPrice(e){this.setData({bookPrice:e.detail.value})},addBook(){db.collection('books').add({// data 字段表示需新增的 JSON 数据data: {name:this.data.bookName,price:parseInt(this.data.bookPrice),author:this.data.bookAuthor,}}).then(res => {console.log(res,'新增')})}

新增的数据带有_openid,可以测试修改

 <button type="primary" bindtap="updateBook">更新</button>updateBook(){db.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').update({// data 传入需要局部更新的数据data: {// 表示将 done 字段置为 trueprice: 120}}).then(res=>{console.log(res,'更新');this.getBooks()})},

2-4、删除

删除一条记录remove
删除手动在云开发控制台新增的数据（无_openid）

 deleteBook(){db.collection('books').doc('14139e12611a040e056d80f5374d86d1').remove().then(res=>{console.log(res,'删除');this.getBooks()})},

更换在小程序端创建的数据

 deleteBook(){db.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').remove().then(res=>{console.log(res,'删除');this.getBooks()})},

删除多条记录（可通过 where 语句选取多条记录执行删除，只有有权限删除的记录会被删除）

deleteBook(){db.collection('books').where({price: 150}).remove().then(res=>{console.log(res,'删除');this.getBooks()})},

直接操作数据库，只删除了一条,云函数可以删除多条
完整例子

const db = wx.cloud.database()  //获取数据库的引用
const _ = db.command     //获取数据库查询及更新指令
db.collection("china")  //获取集合china的引用.where({              //查询的条件指令wheregdp: _.gt(3000)     //查询筛选条件，gt表示字段需大于指定值。}).field({             //显示哪些字段_id:false,         //默认显示_id，这个隐藏city: true,province: true,gdp:true}).orderBy('gdp', 'desc')  //排序方式，降序排列.skip(0)                 //跳过多少个记录（常用于分页），0表示这里不跳过.limit(10)               //限制显示多少条记录，这里为10.get()                   //获取根据查询条件筛选后的集合数据.then(res => {console.log(res.data)}).catch(err => {console.error(err)})

分页查询

const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {// 先取出集合记录总数const countResult = await db.collection('books').count()const total = countResult.total// 计算需分几次取const batchTimes = Math.ceil(total / 100)// 承载所有读操作的 promise 的数组const tasks = []for (let i = 0; i < batchTimes; i++) {const promise = db.collection('books').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()tasks.push(promise)}// 等待所有return tasks
}

3、存储

3-1、上传文件

上传图片

uploadFile(){wx.chooseImage({success (res) {console.log(res)const tempFilePaths = res.tempFilePaths;wx.cloud.uploadFile({cloudPath: 'example.png', // 上传至云端的路径filePath: tempFilePaths[0], // 小程序临时文件路径success: res => {// 返回文件 IDconsole.log(res.fileID)},fail: console.error})}})}

上传图片并展示（根据文件ID获取临时路径）

 uploadFile(){wx.chooseImage({success: (res) =>{const tempFilePaths = res.tempFilePaths;wx.cloud.uploadFile({cloudPath: 'example.png', // 上传至云端的路径filePath: tempFilePaths[0], // 小程序临时文件路径success: res => {// 返回文件 IDwx.cloud.getTempFileURL({fileList: [res.fileID],success: res => {// fileList 是一个有如下结构的对象数组// [{//    fileID: 'cloud://xxx.png', // 文件 ID//    tempFileURL: '', // 临时文件网络链接//    maxAge: 120 * 60 * 1000, // 有效期// }]console.log(res.fileList[0].tempFileURL)this.setData({imgUrl:res.fileList[0].tempFileURL})console.log(this.data.imgUrl)},fail: console.error})},fail: console.error})}})}```
上传视频
```javascriptuploadFile(){wx.chooseVideo({sourceType: ['album','camera'],maxDuration: 60,camera: 'back',success:(res)=> {wx.showLoading({title: '上传中',})console.log(res.tempFilePath)wx.cloud.uploadFile({cloudPath: 'video.mp4', // 上传至云端的路径filePath: res.tempFilePath, // 小程序临时文件路径success: res => {// 返回文件 IDconsole.log(res.fileID)wx.cloud.getTempFileURL({fileList: [res.fileID],success: res => {// fileList 是一个有如下结构的对象数组// [{//    fileID: 'cloud://xxx.png', // 文件 ID//    tempFileURL: '', // 临时文件网络链接//    maxAge: 120 * 60 * 1000, // 有效期// }]console.log(res.fileList)this.setData({videoSrc:res.fileList[0].tempFileURL})wx.hideLoading()},fail: console.error})},fail: console.error})}})}

上传文件

uploadFile(){wx.chooseMessageFile({count: 1,type: 'file',success: (res)=> {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilesconsole.log(tempFilePaths,'返回路径')wx.cloud.uploadFile({cloudPath: 'example.pdf', // 上传至云端的路径filePath: tempFilePaths[0].path, // 小程序临时文件路径success: res => {// 返回文件 IDconsole.log(res.fileID)},fail: console.error})}})},

下载图片

 downloadFile(){wx.cloud.downloadFile({fileID: 'cloud://cloud1-0gxssm592d3c3558.636c-cloud1-0gxssm592d3c3558-1256078064/example.png', // 文件 IDsuccess: res => {// 返回临时文件路径console.log(res.tempFilePath,'下载')wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:(res)=> { console.log(res,'保存')}})},fail: console.error})}

下载文件并打开

downloadFile(){wx.cloud.downloadFile({fileID: 'cloud://cloud1-0gxssm592d3c3558.636c-cloud1-0gxssm592d3c3558-1256078064/example.pdf', // 文件 IDsuccess: res => {// 返回临时文件路径console.log(res.tempFilePath,'下载')wx.openDocument({filePath: res.tempFilePath,success: (res)=> {console.log('打开文档成功')}})},fail: console.error})},

删除文件

deleteFile(){wx.cloud.deleteFile({fileList: ['cloud://cloud1-0gxssm592d3c3558.636c-cloud1-0gxssm592d3c3558-1256078064/example.png'],success: res => {// handle successconsole.log(res.fileList)},fail: console.error})}

4、云函数

4-1、新建云函数

在云函数根目录上右键，在右键菜单中，可以选择创建一个新的 Node.js 云函数add

add.js(云函数)

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({env:'cloud1-0gxssm592d3c3558'
})
// 云函数入口函数
exports.main = async (event, context) => {return event.a + event.b
}

页面js中调用云函数

// pages/cloundfn/cloundfn.js
Page({data:{sum:0,},onLoad(options) {wx.cloud.callFunction({// 云函数名称name: 'add',// 传给云函数的参数data: {a: 1,b: 2,},}).then(res => {console.log(res.result) // 3this.setData({sum:res.result})}).catch(console.error)},
})

右键单击云函数点击上传并部署（云安装依赖，不上传node_modules）
然后在云开发控制台就可以看到上传的云函数了

点击本地测试，弹出云函数本地测试弹框，点击右侧开启本地测试，安装node_modules依赖，重新编译一下页面代码即可看到返回值

展示返回结果

4-2、云函数获取小程序用户信息

 <button type="primary" bindtap="getUserInfo">获取用户信息</button>

getUserInfo(){wx.cloud.callFunction({// 云函数名称name: 'getOpenId',}).then(res => {console.log(res,'用户信息') // this.setData({openId:res.result.OPENID,appId:res.result.APPID,})}).catch(console.error)}

新建getOpenId云函数，右键上传并部署

本地测试

调试器返回

页面展示

4-3、云函数调用数据库

1、云函数获取书籍列表
页面js获取数据

  onLoad (options) {this.getBooks()},getBooks(){wx.cloud.callFunction({// 云函数名称name: 'getBooks',}).then(res => {console.log(res,'书籍信息') //this.setData({books:res.result.data}) }).catch(console.error)},

新建getBooks云函数，上传并部署

const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
exports.main = async (event, context) => {// collection 上的 get 方法会返回一个 Promise，因此云函数会在数据库异步取完数据后返回结果return db.collection('books').get()
}

本地调试

调试器输出

2、云函数新增书籍
页面js方法

 addBook(){wx.cloud.callFunction({// 云函数名称name: 'addBook',data:{name:this.data.bookName,price:parseInt(this.data.bookPrice),author:this.data.bookAuthor,}}).then(res => {console.log(res,'新增书籍信息') //}).catch(console.error)}

新增书籍云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {const {name,price,author} = eventconsole.log(name,price,author,'传递过来的数据')return db.collection('books').add({// data 字段表示需新增的 JSON 数据data: {name,price,author,}}).then(res => {console.log(res,'新增')})}

注意

cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})

要在

const db = cloud.database()

之前初始化否则报错

结果：
云函数本地调试弹框

调试器：

3、云函数删除书籍
新建deleteBooks的云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {//删除价格为150的数据return  db.collection('books').where({price: 150}).remove().then(res => {console.log(res,'删除')})
}

页面方法调用：

deleteBook(){wx.cloud.callFunction({// 云函数名称name: 'deleteBooks',}).then(res => {console.log(res,'信息') //}).catch(console.error)},

云函数本地调试返回

调试器返回

4-4、云函数中调用存储

假设我们要上传在云函数目录中包含的一个图片文件（demo.jpg）：

const cloud = require('wx-server-sdk')
const fs = require('fs')
const path = require('path')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})exports.main = async (event, context) => {const fileStream = fs.createReadStream(path.join(__dirname, 'demo.jpg'))return await cloud.uploadFile({cloudPath: 'demo.jpg',fileContent: fileStream,})
}

在云函数中，__dirname 的值是云端云函数代码所在目录

4-5、云函数中调用其他云函数

const cloud = require('wx-server-sdk')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})exports.main = async (event, context) => {return await cloud.callFunction({name: 'sum',data: {x: 1,y: 2,}})
}

4-6、在云函数中访问第三方服务器

在云函数终端安装依赖 cnpm install got

调用其他三方接口可以用node的request库
需安装request 、request-promise

4-7、在云函数中生成小程序码

4-8、在云函数中推送模板消息

依赖wx-js-utils库，先安装依赖

模板消息Id在小程序后台选择

4-9、云函数调用微信支付
小程序方法

云函数：（依赖tenpay库,需先安装tenpay库）

其他：

5、商城笔记

工具类asyncWX.js

/*** 显示加载框*/
export const ml_showLoading = () => {return new Promise((resolve) => {wx.showLoading({title: 'Loading...',success: resolve})})
}
/*** 隐藏加载框*/
export const ml_hideLoading = () => {return new Promise((resolve) => {wx.hideLoading({success: resolve})})
}/*** 消息提示框*/
export const ml_showToast = (title) => {return new Promise((resolve) => {wx.showToast({title,icon :'none',success: resolve})})
}/*** 消息提示框 -成功*/export const ml_showToastSuccess = (title) => {return new Promise((resolve) => {wx.showToast({title,success: resolve})})
}/***  发起支付*/export const ml_payment = (pay) => {return new Promise((resolve,reject) => {wx.requestPayment({...pay,success: resolve,fail: reject})})
}

5-1、首页(轮播、列表（上拉加载、下拉刷新、添加购物车、设置tabbar右上角数字）)

// 获取数据库
const db = wx.cloud.database()
// 获取集合
const goods_col = db.collection('goods')
const carts_col = db.collection('carts')// 引入 异步操作
import {ml_showLoading,ml_hideLoading,ml_showToast,ml_showToastSuccess
} from '../../utils/asyncWX.js'Page({data: {goods: [], // 商品列表数据_page: 0,hasMore: true, // 是否有更多数据可加载swipers :[]},onLoad() {this.setTabBar()this.loadSwipersData()this.loadListData()},// 加载轮播图数据// 需求 : 请求访问量前三的商品  count// 限制  :3个// 排序 : 降序async loadSwipersData(){let res = await goods_col.orderBy('count','desc').limit(3).get() console.log('轮播图',res)this.setData({swipers : res.data})},// 加载列表数据async loadListData() {// 1 2 3 4 5    6 7 8 9 10    11 ... const LIMIT = 5let {_page,goods} = this.data // 0// 显示加载框await ml_showLoading()let res = await goods_col.limit(LIMIT).skip(_page * LIMIT).get()// 隐藏加载框await ml_hideLoading()// 手动停止下拉刷新wx.stopPullDownRefresh()console.log('列表数据', res.data)this.setData({goods: [...goods, ...res.data],_page: ++_page, // 1hasMore: res.data.length === LIMIT})},// 上拉刷新async onReachBottom() {// 没有更多数据的情况if (!this.data.hasMore) {await ml_showToast('没有更多数据了')return console.log('没有数据了')}console.log('上拉刷新')this.loadListData()},// 下拉刷新onPullDownRefresh() {console.log('下拉刷新')//1. 重置this.setData({goods :[],_page :0,hasMore : true})//2. 加载最新的数据this.loadListData()},// 加入到购物车async addCart(e){//1. 拿到该商品let { item } = e.currentTarget.dataset// 2. 判断该商品在不在购物车里面//  根据 _id 尝试从购物车里面获取数据, 看能不能获取到try{let res = await carts_col.doc(item._id).get()console.log('有值')// 有值, 把购物车里面的该商品 的 num值累加await carts_col.doc(item._id).update({data : {num : db.command.inc(1)}})  }catch(err){console.log('没有值')//没有值 把该商品添加到购物车里面去await carts_col.add({data : {_id :item._id,imageSrc : item.imageSrc,price :item.price,title :item.title,num : 1,selected : true}})}this.setTabBar()await ml_showToastSuccess('下单成功') },// 修改tabBar 右上角数字async setTabBar(){let total = 0let res = await carts_col.get()res.data.forEach(v => {total += v.num})if(total === 0)  return wx.setTabBarBadge({index: 1,text: total+'',})}
})

5-2、商品详情

const db = wx.cloud.database()const goods_col = db.collection('goods')Page({data :{detail : {}},onLoad(options){let { id } = optionsthis.loadDetailData(id)},// 加载详情数据async loadDetailData(id){// 拿到数据库的商品let ins = goods_col.doc(id)//+1await ins.update({data :{count : db.command.inc(1)}})// 获取let res =  await ins.get()// 赋值this.setData({detail : res.data})// count +1//  await goods_col.doc(id).update({//   data : {//     count : db.command.inc(1)//   }// })// // 获取详情数据// let res = await goods_col.doc(id).get()// console.log('商品信息',res)// this.setData({//   detail : res.data// })}
})

5-3、购物车页面

const db = wx.cloud.database()
const carts_col = db.collection('carts')import { ml_showToastSuccess, ml_payment } from '../../utils/asyncWX.js'Page({data :{carts :[],  // 购物车数据totalCount :0,totalPrice :0},onLoad(){this.loadCartsData()},// 加载购物车数据async loadCartsData(){let res = await carts_col.get()console.log('购物车数据',res)this.setData({carts : res.data})// 统计总价格和总数量this.setCart(res.data)},// 统计总价格和总数量setCart(carts){let totalCount = 0let totalPrice = 0carts.forEach(v => {totalCount += v.numtotalPrice += v.num * v.price})this.setData({totalCount,totalPrice})},// 点击 + async addCount(e){//1. 获取 id let id = e.currentTarget.dataset.id//2. 修改num +1 let res = await carts_col.doc(id).update({data : {num : db.command.inc(1)}})console.log('+1',res)// 3.1 +1 成功后 再次重新刷新// this.loadCartsData()// 3.2 +1 成功后 修改当前data里面的carts数据let newCarts = this.data.cartslet goods = newCarts.find(v => v._id == id)goods.num += 1this.setData({carts: newCarts})//4. 提示 累加成功await ml_showToastSuccess('累加成功')//5. 再次统计this.setCart(newCarts)},// 点击 当前页面对应的tabonTabItemTap(){wx.setTabBarBadge({index: 1,text: '',})},// 开始支付async startpay(){//1. 发起订单 => 获取订单号  => 未支付let res1 = await wx.cloud.callFunction({name : 'makeOrder',data : {carts : this.data.carts}})await ml_showToastSuccess('发起订单成功')const { order_number } = res1.resultconsole.log('发起订单', order_number)  //2. 预支付  => 获取支付所需要的5个参数let res2 = await wx.cloud.callFunction({name : 'pay',data : {order_number}})console.log('预支付',res2)//3. 发起支付await ml_payment(res2.result)await ml_showToastSuccess('支付成功')//4. 更新支付状态  => 已支付 let res3 = await wx.cloud.callFunction({name :'updateStatus',data : {order_number}})console.log('更新状态',res3)//5. 清空购物车let res4 = await wx.cloud.callFunction({name : 'clearCarts'})console.log('清空购物车',res4) this.setData({carts : [],totalCount :0,totalPrice : 0})// 跳转到订单页面wx.navigateTo({url: '/pages/orders/orders',})}
})

5-4、云函数

1、clearCarts（清除购物车）

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()const db = cloud.database({env: 'prod-hswqx'
})
const carts_col = db.collection('carts')// 云函数入口函数
exports.main = async (event, context) => {// 清空购物车let res = await carts_col.where({selected : true}).remove()return res
}

2、makeOrder（创建订单）

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()const db = cloud.database({env:'prod-hswqx'
})
const orders_col = db.collection('orders')// 云函数入口函数
exports.main = async (event, context) => {//1. 创建一个随机订单号, 组成一个对象let obj = {order_number : Date.now(),carts : event.carts,status : 0  // 0-未支付  1-已支付}//2. 添加到 orders 集合里面let res = await orders_col.add({data: obj})return {res,order_number : obj.order_number}
}

3、updateStatus（更新订单状态）

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()const db = cloud.database({env: 'prod-hswqx'
})
const orders_col = db.collection('orders')// 云函数入口函数
exports.main = async (event, context) => {// 更新 statuslet res = await orders_col.where({order_number : event.order_number}).update({data : {status : 1}})return res
}

4、支付（依赖tenpay）

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()
//1. 引入 tenpay
const tenpay = require('tenpay');
//2. 配置
const config = {appid: '************',//小程序appidmchid: '**************',//商户号partnerKey: '******************',//商户秘钥notify_url: '',spbill_create_ip: ''
};// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()//3. 初始化const api = tenpay.init(config);//4. 获取支付参数let result = await api.getPayParams({out_trade_no: event.order_number + '',body: '这是一次支付',total_fee: 1,openid: wxContext.OPENID});return result
}

readMe

/**
--------------清理工作--------------
1. 把 app.json 里面的pages/logs/logs 删除了  顺便把 logs 页面也给删除了
2. 把 index 页面 里面的 index.js / .wxml / .wxss 里面的内容也清除掉了
3. app.js , onLuanch() 里面也清除了
--------------准备工作-------------------
1. 配置tabBar  创建 index 和  cart页面- 导入 assets 引入两种图标2. 导入数据2.1 创建商品集合 goods  2.2 从数据文件夹里面导入 `goods-支付.json` 里面的数据-------------展示首页列表数据-----------------
1. 获取数据- 获取全部数据 17条- 把 17条数据保存到 goods
2. wxml 结构 (拷贝)
3. wxss 样式 (拷贝)--------------上拉刷新---------------
1. 先限制 请求的条数 为 5条  limit(5)
2. 钩子 onReachBottom()
3. const LIMIT = 5
4. 分页let { _page, goods } = this.datalet res = await goods_col.limit(LIMIT).skip( _page * LIMIT).get()this.setData({goods : [...goods,...res.data],_page : ++_page})   --------------没有更多数据可加载的情况 (节流)--------------
1. 初始值  hasMore : true  // 判断是否有更多数据
2. 请求数据成功之后, 就知道有没有更多数据this.setData({hasMore : res.data.length === LIMIT})
3. 节流if(!this.data.hasMore) {return }   --------------加载框和提示框的封装----------------------->> 参考 utils/asyncWx.js --------------下拉刷新-----------------------
1. 开启配置"enablePullDownRefresh": true,"backgroundTextStyle": "dark"
2. onPullDownRefresh()2.1 重置2.2 再次调用 加载数据
3. 手动停止下拉刷新 wx.stopPullDownRefresh()  -----------------  轮播图数据   -------------------------
1. 加载轮播图数据
2.  需求 : 请求访问量前三的商品  count限制  :3个排序 : 降序
3. 代码 :let res = await goods_col.orderBy('count','desc').limit(3).get()-----------------   跳转到详情页  -------------------------
1. 在商品外面套一个 navigator 导航组件 url='/pages/detail/detail?id={{item._id}}'
2. 在 detail.js 里面 根据 id 获取商品详情信息
3. 获取该id的商品信息 goods_col.doc(id).get()
4. 累加访问量-----------------    点击下单   -------------------------
>> 把该商品加入到购物车里面
- 注册点击事件  catchtap : 不允许冒泡- 加入购物车逻辑
1. 拿到点击要添加入到购物车的`商品`
2. 判断该商品在不在购物车里面
3. 如果不在, 把该商品添加到购物车里面, 并且新加一个字段 num = 1
4. 如果在,  修改改商品的num值 累加-----------------  设置 tab 右上角数字   -------------------------
1. wx.setTabbarBadge({index : 1,text  :  ''
})2. 点击 购物车 tabItem的时候, 触发的钩子,
// 点击 当前页面对应的tabonTabItemTap(){wx.setTabBarBadge({index: 1,text: '',})}
-----------------  进入到购物车   -----------------------
1. 添加自定义编译模式 刷新自动切换到购物车页面
2. 在购物车里面加载购物车 数据 展示
3. 拷贝 wxml + wxss
4. 设置一下总价格 和总数量
5. 点击+1 累加数据累加完之后更新数据-----------------  点击支付   -------------------------
>> 准备工作- appId- 商户号- 秘钥>> 具体步骤   1. 发起订单 => 获取订单号 2. 预支付 => 获取支付所需要的5个参数3. 支付   => wx.requestPayment(..)4. 更新支付状态 => 未支付 => 已支付5. 清空购物车 (清空 carts 集合 里面的数据)*/