（小程序效果开发心得）如何在项目中集成云开发

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

（小程序效果开发心得）如何在项目中集成云开发

采用云开发实现的开源外卖小程序现已来了

近日，微信商店已开业。 在微信完全开放之前，我会把自己的小程序开源给大家使用~

小程序效果

如何在项目中融入云开发开发经验

项目一开始并不是基于云开发来开发。 现在正在考虑使用云开发。 因此，需要在项目中启用云开发相关选项。

首先在小程序文件夹中创建一个cloud文件夹，在文件中进行配置，创建用户登录的云功能，上传到微信小程序云。 相关操作请参考官方文档。

我将 cloud 和两个目录添加到项目目录中，并在 ..json 文件夹中配置它们

{
   "miniprogramRoot": "./miniprogram"
   "cloudfunctionRoot": "./cloud/"
}

复制

启用云开发

配置完成后，您可以在控制台点击“云开发”来激活云开发。

在云开发界面进行配置微信小程序外卖开发，启用云开发。

开放数据库集合

云开发不会自动创建数据库集合，因此需要您手动创建集合。 分别创建店铺表、品类表、商品表Food、订单表Order、地址表、用户表_User。

数据操作

获得数据库表后，您可以在代码中对数据进行操作。

下面是我的目录操作代码。

const db = wx.cloud.database()
const { showModal } = require('../../utils/utils')
Page({
  onLoad: function(options) {
    // 管理员认证
    getApp().auth()
    if (options.objectId) {
      // 缓存数据
      this.setData({
        isEdit: true,
        objectId: options.objectId
      })
      // 请求待编辑的分类对象
      db.collection('Category')
        .doc(options.objectId)
        .get()
        .then(res => { 
        // 获取分类信息
          this.setData({
            category: res.data
          })
        })
    }
  },
  add: function(e) {
    var form = e.detail.value
    if (form.title == '') {
      wx.showModal({
        title: '请填写分类名称',
        showCancel: false
      })
      return
    }
    form.priority = Number.parseInt(form.priority)
    // 添加或者修改分类
    // 修改模式
    if (this.data.isEdit) {
      const category = this.data.category
      db.collection('Category')
        .doc(category._id)
        .update({
          data: form
        })
        .then(res => {
          console.log(res)
          showModal()
        })
    } else {
      db.collection('Category')
        .add({
          data: form
        })
        .then(res => {
          console.log(res)
          showModal()
        })
    }
  },
  showModal() {
    // 操作成功提示并返回上一页
    wx.showModal({
      title: this.data.isEdit ? '修改成功' : '添加成功',
      showCancel: false,
      success: () => {
        wx.navigateBack()
      }
    })
  },
  delete: function() {
    // 确认删除对话框
    wx.showModal({
      title: '确认删除',
      success: res => {
        if (res.confirm) {
          const category = this.data.category
          db.collection('Category')
            .doc(category._id)
            .remove()
            .then(res => {
              console.log(res)
              wx.showToast({
                title: '删除成功'
              })
              wx.navigateBack()
            })
        }
      }
    })
  }
})

复制

联表查询

在使用数据库的时候，不可避免的要进行联表查询。 云开发支持云功能侧联表查询。 你可以参考我的代码实现联表查询功能。

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  const result = await db.collection('Food')
    .aggregate()
    .lookup({
      from: 'Category',
      localField: 'category',
      foreignField: '_id',
      as: 'categories'
    })
    .end()
    // .orderBy('priority', 'asc')
    // .get()
    console.log(result)
    return result.list
}

复制

上传文件

小程序运行过程中，难免会遇到需要上传图片的场景。 在上传图片时，云开发为我们查询数据提供了方便的云存储。

获取文件本地路径后，调用wx.cloud。 上传文件。

chooseImage() {
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: res => {
        const tempFilePaths = res.tempFilePaths
        const file = tempFilePaths[0]
        const name = utils.random_filename(file) //上传的图片的别名，建议可以用日期命名
        console.log(name)
        wx.cloud.uploadFile({
          cloudPath: name,
          filePath: file, // 文件路径
        }).then(res => {
          console.log(res)
          const fileId = res.fileID
        // 将文件id保存到数据库表中
          db.collection('Seller').doc(this.data.seller._id)
          .update({
            data: {
              logo_url: fileId
            }
          }).then(() => {
            wx.showToast({
              title: '上传成功'
            })
            // 渲染本地头像
            this.setData({
              new_logo: fileId
            })
          }, err => {
            console.log(err)
            wx.showToast({
              title: '上传失败'
            })
          })
        })
      }
    })
  }

复制

微信支付逻辑的实现

作为商城，难免会有微信支付相关逻辑的实现。 这种情况下，您可以使用云开发提供的微信支付云调用功能来实现快速的API调用和接口实现。

绑定商户

使用云开发提供的微信支付时，您​​需要先绑定微信支付（小程序效果开发心得）如何在项目中集成云开发，并在云开发控制台添加对应的商户号。

添加后微信会发送通知

按照提示开设账户。

如果不绑定，会报“验收关系不存在”的错误。

功能码调用

配置完成后，只需调用云函数中的微信支付接口即可实现相关调用能力。

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
  console.log('请求中')
  console.log(cloud.getWXContext().ENV)
  let { orderId, amount, body } = event
  const wxContext = cloud.getWXContext()
  const res = await cloud.cloudPay.unifiedOrder({
    body: body,
    outTradeNo: orderId,
    spbillCreateIp: '127.0.0.1',
    subMchId: '1447716902',
    totalFee: amount,
    envId: 'dinner-cloud',
    functionName: 'pay_cb'
  })
  return res.payment
}

复制

这里：''指的是支付成功后微信支付发给我的回调信息。 稍后我们将使用它来更新我们的订单状态。

小程序代码调用

调用云函数后，会获取微信支付所需的各种参数。

此时，您可以在小程序上调用微信支付接口进行支付。 可以参考相关代码。

const { result: payData } = res
  wx.requestPayment({
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.package,
    signType: 'MD5',
    paySign: payData.paySign,
    success: res => {
      console.log('支付成功', res)
      wx.showModal({
        title: '支付成功',
        showCancel: false,
        success: () => {
          // 跳转订单详情页
          wx.navigateTo({
            url: '/order/detail/detail?objectId=' + order._id
          })
        }
      })
    },
...

复制

微信支付回调处理

微信统一点餐中有回调函数。 这是一个云功能。 后续微信支付的支付信息都会发送到该函数。 因此，我们需要编写一个处理方法。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  console.log('支付回调')
  console.log(event)
  console.log(cloud.getWXContext().ENV)
  const orderId = event.outTradeNo
  const resultCode = event.resultCode
  if (resultCode === 'SUCCESS') {
    const res = await db
      .collection('Order')
      .doc(orderId)
      .update({
        data: {
          status: 1
        }
      })
    console.log(res)
    return { errcode: 0 }
  }
}

复制

总结

经历了云开发，优势就不用多说了。 原生支持微信登录和支付，调用和调试非常方便。 尤其是在不启用本地服务开发下，确实好用；

我已经开源了这个小程序的源代码。 您可以访问社区官网获取源码并自行使用~

作者：黄秀杰。 自2016年起从事小程序开发和技术布道，拥有同名个人公众号“黄秀杰”。

云开发（TCB）是腾讯云提供的云原生集成开发环境和工具平台。 为开发提供高可用、自动弹性伸缩的后端云服务，包括计算、存储、托管等能力，可用于云开发多种终端应用（小程序、公众号、网页应用、客户端等），帮助开发统一构建和管理后端服务和云资源，避免应用开发过程中繁琐的服务器搭建和运维。 ，开发可以专注于业务逻辑的实现，开发门槛更低，效率更高。

产品文档：

技术文档：

技术交流加Q群：

*新资讯关注微信公众号【腾讯云开发】

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等