开源一波效果演示集成云开发旧项目是非
2023-07-16 15:03:45 欢乐点

#摘要

在官方的微信小店全开放前开源一波

疗效演示

集成云开发

旧项目是非基于云开发的，构建cloud文件夹，并在文件中配置，构建用户登入的云函数并上传到微信小程序云中

构建云函数文件夹，并在..json配置为云函数目录

文档详见：[

](

)

构建页面文件夹，，将旧小程序项目的pages文件夹一并移入该文件夹中，并配置在..json中，{…“”:“/”…}

开通云开发

创建数据表

分别创建

店面表、分类表、商品表Food、订单表Order、地址表、用户表_User

如何构建用户表

用户表是不是须要自己创建，不存在类似于Bmob、这些云储存那样默认存在_User表

数据表的特点当数据是从小程序端创建数据的，天然就带有数组添加数据必须保证数据表早已存在，不存在就创建集合这跟之前用过的Bmob、一类的云储存不同，前者碰到引用不存在集合是会手动创建集合的创建云函数

写完云函数本地调试完毕后，要将远程的也更新一下

上传增量更新

本地调试

假如没有安装依赖的，要切换到云函数目录，运行npm安装它

表数据的权限问题

外卖开发程序小结怎么写_外卖小程序开发_开发外卖小程序的步骤

如果没权限，.get恳求数据，得到的数据是空白的，而不是报错无权限

这么就是权限没有，默认是仅创建人可读可写

更改文档也是一样，准备更改店面资料，但从返回信息看是更改成功，实则数据未改成功过，这是就自定义权限，read/write都设置为true了。

更改权限可以按如下形式更改

数据的增删改查

引入constdb=wx.cloud.()后，就是一系列关键字，get/doc/add//这种了

看下边这个分类表的操作

/*
 *
 * 关注订阅号【huangxiujie85】，第一时间收到教程推送
 *
 * @author 黄秀杰
 */
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()
            })
        }
      }
    })
  }
})

表关联

商品表关联分类表

做联表查询时，报错

:-|:

Error::-|:

版本要求：wx--sdk1.3.0或以上不支持在小程序端使用

好坑，提示是权限问题，发觉是原本就不支持，联表查询下，还要在云上写

老老实实地写云函数吧

// 云函数入口文件
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
}

这样能够使用.().作联表查询了

图片上传

图片上传重点是取出，它可以直接形参给的src属性就是渲染到页面上了，微信一家就是如此好说话

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: '上传失败'
            })
          })
        })
      }
    })
  }

微信支付

优点，都不用开启前端服务，有点要调试发觉前端都还没怎样就跑上去了，这些觉得之前没有的，很不习惯

调用简单

不用提供小程序的appid支付的32位key，这种都在开发工具设置中绑定好了的，惟一提供的是商户的mchId就可以

由于本地无法得到微信支付的通知反弹，在原先魔改路由，配花生壳域名，远程到服务器写代码，这都经历过，为的就是让反弹被通知到微信支付的消息。

子商户号，不晓得从何而至，我这儿就是传的自己申请到的商户号

传统写支付要用的mchidkey为何这儿不须要，只要绑定就好

绑定微信支付商户

外卖开发程序小结怎么写_开发外卖小程序的步骤_外卖小程序开发

如右图先添加商户号添加

添加后微信会发来通知

按提示开通就好

假如不绑定外卖小程序开发，将报“理关系不存在”的错误

配置成功后，云函数中发起统一下单

// 云函数入口文件
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 }
  }
}

为了更好地调试微信支付给我的反弹信息，可以步入云函数面板，日志标签页，哪里给把我们云函数.log()复印结果显示下来，如右图

使用第三方库实现

这个是通用解决方案，不用原生的云开发微信支付，自己写node.js前端就是如此干的

//云开发实现支付
const cloud = require('wx-server-sdk')
cloud.init()
//1，引入支付的三方依赖
const tenpay = require('tenpay')
//2，配置支付信息
const config = {
  appid: 'wx6f3d3xxx20b1678f', //
  mchid: '1447716902', //
  partnerKey: '21f0ce9b272ecfbaxxxf83994c438f39', //
  notify_url: 'https://mp.weixin.qq.com', //支付回调网址,这里可以先随意填一个网址
  spbill_create_ip: '127.0.0.1'
}
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  let { orderId, amount, body } = event
  //3，初始化支付
  const api = tenpay.init(config)
  let result = await api.getPayParams({
    out_trade_no: orderId,
    body: body,
    total_fee: amount, //订单金额(分),
    openid: wxContext.OPENID //付款用户的openid
  })
  return result
}

缺点是难以反弹通知支付结果:‘’，由于我们没有自己的前端服务器，也就无法提示这个url了，最多就是在后端协程订单就支付状态从而改自己的订单的状态了。

总结

云开发体验出来，优点自毋须多说，微信登陆与支付原生支持，调用与调试都很便捷，非常是不用启本地服务开发外卖小程序开发，真的好用；最大的不足就是小程序端不支持联表查询，必须写云函数被小程序调用，期盼尽快能像Bmob、一类的云储存那样得到支持。

源码下载

[

](

上一篇：美团外卖微信小程序课设概要设计：系统架构、前端设计

下一篇：食堂订餐系统 天源网络科技：餐馆疫情中保驾护航，乘风破浪

免责声明：部分文章信息来源于网络以及网友投稿，本站只负责对文章进行整理、排版、编辑，出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性，如本站文章和转稿涉及版权等问题，请作者在及时联系本站，我们会尽快为您处理。

欢乐点

相关文章
您可能感兴趣
河南理工大学食堂外卖服务日订千单，1 元到寝受欢迎

河南理工大学食堂外卖服务日订千单，1 元到寝受欢迎
打造高效同城外卖跑腿小程序：云快卖解决方案

打造高效同城外卖跑腿小程序：云快卖解决方案
微信点餐小程序：功能多样，优势明显，你知道有哪些吗？

微信点餐小程序：功能多样，优势明显，你知道有哪些吗？
美团饿了么与校园外卖跑腿的用户群体及服务场景差异分析

美团饿了么与校园外卖跑腿的用户群体及服务场景差异分析
打造成功外卖平台：云快卖助力快速部署

打造成功外卖平台：云快卖助力快速部署
国防科技大学食堂推出一键点餐装置，解决学生选择困难症

国防科技大学食堂推出一键点餐装置，解决学生选择困难症

资讯中心

热门资讯

小编推荐

留言咨询

×