微信小程序云开发学习笔记_const cloud = require('wx-server-sdk')

（官网）

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 = {}
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

获取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,
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
      })
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

 onLoad (options) {
    const _ = db.command
    db.collection('books').where({
      // gt 方法用于指定一个 "大于" 条件，此处 _.gt(80) 是一个 "大于 80" 的条件
      price: _.gt(80)
    })
    .get().then(res=>{
          this.setData({
            books:res.data
          })
        })
    },
1
2
3
4
5
6
7
8
9
10
11
12

##3、 逻辑指令and、 or

 const _ = db.command
    db.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
          })
        })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

2-2、更新

局部更新update

updateBook(){
      db.collection('books').doc('8937eaa9611a05f604ef5b3065050162').update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 done 字段置为 true
          price: 120
        },
        success: function(res) {
          console.log(res,'更新')
          this.getBooks()
        }
      })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

updateBook(){
    const _ = db.command
    db.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 price 加10
          price:_.inc(10)
        }
      }).then(res=>{
        console.log(res,'更新');
        this.getBooks()
      })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

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

 updateBook(){
    db.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').set({
        // data 传入需要更新的数据
        data: {
          price:150,
          name:'一念永恒',
          author:'白小纯'
        }
      }).then(res=>{
        console.log(res,'更新');
        this.getBooks()
      })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

2-3、新增

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

 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,'新增')
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

 <button type="primary" bindtap="updateBook">更新</button>
 updateBook(){
      db.collection('books').doc('8937eaa9611a18ac04f2a1480028048e').update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 done 字段置为 true
          price: 120
        }
      }).then(res=>{
        console.log(res,'更新');
        this.getBooks()
      })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

2-4、删除

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

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

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

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

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

deleteBook(){
    db.collection('books').where({
      price: 150
    }).remove().then(res=>{
      console.log(res,'删除');
      this.getBooks()
    })
  },
1
2
3
4
5
6
7
8

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

const db = wx.cloud.database()  //获取数据库的引用
const _ = db.command     //获取数据库查询及更新指令
db.collection("china")  //获取集合china的引用
  .where({              //查询的条件指令where
    gdp: _.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)
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

分页查询

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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 => {
            // 返回文件 ID
            console.log(res.fileID)
          },
          fail: console.error
        })
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

 uploadFile(){
    wx.chooseImage({
      success: (res) =>{
        const tempFilePaths = res.tempFilePaths;
        wx.cloud.uploadFile({
          cloudPath: 'example.png', // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            wx.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
        })
      }
    })
  }```
上传视频
```javascript
  uploadFile(){
    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 => {
            // 返回文件 ID
            console.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
        })
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

上传文件

uploadFile(){
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success: (res)=> {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFiles
        console.log(tempFilePaths,'返回路径')
        wx.cloud.uploadFile({
          cloudPath: 'example.pdf', // 上传至云端的路径
          filePath: tempFilePaths[0].path, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
          },
          fail: console.error
        })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

下载图片

 downloadFile(){
    wx.cloud.downloadFile({
      fileID: 'cloud://cloud1-0gxssm592d3c3558.636c-cloud1-0gxssm592d3c3558-1256078064/example.png', // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath,'下载')
        wx.saveImageToPhotosAlbum({
          filePath:res.tempFilePath,
          success:(res)=> { 
            console.log(res,'保存')
          }
        })
      },
      fail: console.error
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

下载文件并打开

downloadFile(){
    wx.cloud.downloadFile({
      fileID: 'cloud://cloud1-0gxssm592d3c3558.636c-cloud1-0gxssm592d3c3558-1256078064/example.pdf', // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath,'下载')
        wx.openDocument({
          filePath: res.tempFilePath,
          success: (res)=> {
            console.log('打开文档成功')
          }
        })
      },
      fail: console.error
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

删除文件

deleteFile(){
    wx.cloud.deleteFile({
      fileList: ['cloud://cloud1-0gxssm592d3c3558.636c-cloud1-0gxssm592d3c3558-1256078064/example.png'],
      success: res => {
        // handle success
        console.log(res.fileList)
      },
      fail: console.error
    })
  }
1
2
3
4
5
6
7
8
9
10

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
}
1
2
3
4
5
6
7
8
9

页面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) // 3
      this.setData({
        sum:res.result
      })
    })
    .catch(console.error)
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

展示返回结果

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

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

getUserInfo(){
    wx.cloud.callFunction({
      // 云函数名称
      name: 'getOpenId',
    })
    .then(res => {
      console.log(res,'用户信息') // 
      this.setData({
        openId:res.result.OPENID,
        appId:res.result.APPID,
      })
    })
    .catch(console.error)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

新建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)
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

新建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()
}
1
2
3
4
5
6
7
8
9

本地调试

调试器输出

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)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

新增书籍云函数

// 云函数入口文件
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} = event
  console.log(name,price,author,'传递过来的数据')
  return db.collection('books').add({
    // data 字段表示需新增的 JSON 数据
    data: {
     name,
     price,
     author,
    }
  })
  .then(res => {
    console.log(res,'新增')
  })
  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注意

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
1
2
3

要在

const db = cloud.database()
1

之前初始化否则报错

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

调试器：

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,'删除')
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

页面方法调用：

deleteBook(){
    wx.cloud.callFunction({
      // 云函数名称
      name: 'deleteBooks',
    })
    .then(res => {
      console.log(res,'信息') //
    })
    .catch(console.error)
  },
1
2
3
4
5
6
7
8
9
10

云函数本地调试返回

调试器返回

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,
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在云函数中，__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,
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
      })
   
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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 = 5
    let {
      _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, // 1
      hasMore: 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 = 0
    let res = await carts_col.get()

    res.data.forEach(v => {
      total += v.num
    })

    if(total === 0)  return 

    wx.setTabBarBadge({
      index: 1,
      text: total+'',
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

5-2、商品详情

const db = wx.cloud.database()

const goods_col = db.collection('goods')

Page({
  data :{
    detail : {}
  },
  onLoad(options){

    let { id } = options

    this.loadDetailData(id)
  },
  // 加载详情数据
  async loadDetailData(id){

    // 拿到数据库的商品
    let ins = goods_col.doc(id)

    //+1
    await 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
    // })

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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 = 0
    let totalPrice = 0

    carts.forEach(v => {
      totalCount += v.num
      totalPrice += 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.carts
    let goods = newCarts.find(v => v._id == id)
    goods.num += 1
    this.setData({
      carts: newCarts
    })

    //4. 提示 累加成功
    await ml_showToastSuccess('累加成功')

    //5. 再次统计
    this.setCart(newCarts)

  },

  // 点击 当前页面对应的tab
  onTabItemTap(){
    
    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.result
    console.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',
   })

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

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 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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) => {
  
  // 更新 status
  let res = await orders_col.where({
    order_number : event.order_number
  }).update({
    data : {
      status : 1
    }
  })

  return res
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

4、支付（依赖tenpay）

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
//1. 引入 tenpay
const tenpay = require('tenpay');
//2. 配置
const config = {
  appid: '************',//小程序appid
  mchid: '**************',//商户号
  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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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.data

   let 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的时候, 触发的钩子,
// 点击 当前页面对应的tab
  onTabItemTap(){

    wx.setTabBarBadge({
      index: 1,
      text: '',
    })
  }
-----------------  进入到购物车   -----------------------
1. 添加自定义编译模式 刷新自动切换到购物车页面
2. 在购物车里面加载购物车 数据 展示 
3. 拷贝 wxml + wxss
4. 设置一下总价格 和总数量
5. 点击+1 累加数据
   累加完之后更新数据

-----------------  点击支付   -------------------------
>> 准备工作
   - appId
   - 商户号
   - 秘钥

>> 具体步骤   
  1. 发起订单 => 获取订单号 
  2. 预支付 => 获取支付所需要的5个参数
  3. 支付   => wx.requestPayment(..)
  4. 更新支付状态 => 未支付 => 已支付
  5. 清空购物车 (清空 carts 集合 里面的数据)

 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121