关于前端:实战丨如何制作一个完整的外卖小程序已开源

38次阅读

共计 4833 个字符,预计需要花费 13 分钟才能阅读完成。

最近微信小店凋谢了,赶着微信全面凋谢之前,把本人的小程序开源进去给大家应用~

小程序成果

开发心得

如何在我的项目中集成云开发

一开始我的项目并非基于云开发而开发的,目前思考用云开发,因而,须要在我的项目中开启云开发的相干选项。

首先,在小程序文件夹中建设 cloud 文件夹,并在 package 文件中配置,建设用户登录的云函数并上传到微信小程序云中。相干的操作能够参考官网文档。

我在我的项目目录中增加了 cloudminiprogram 两个目录,并在 project.config.json 文件夹进行配置

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

开明云开发

配置实现后, 能够点击控制台中的「云开发」来开明云开发。

在云开发的界面中配置,并开明云开发。

开明数据库汇合

云开发不会主动创立数据库汇合,因而,你须要手动创立汇合。别离创立 店铺表 Seller、分类表 Category、商品表 Food、订单表 Order、地址表 Address、用户表 _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.uploadFile 即可上传文件。

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
}

这里 functionName: 'pay_cb' 指的就是领取胜利后,微信领取那侧给我的回调信息,前面咱们就用它来更新咱们的订单状态

小程序端代码调用

调用云函数后,会取得微信领取所须要的各种参数,

这个时候,就能够在小程序端调用微信领取接口,进行领取,相干代码能够参考

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})
        }
      })
    },
...

微信领取回调解决

微信对立下单里一个 pay_cb 回调函数,它是一个云函数,后续微信领取的领取信息将会发送在这个函数中,相应的,咱们须要编写解决的办法

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

总结

云开发体验下来,长处自不用多说,微信登录与领取原生反对,调用与调试都很不便,特地是不必启本地服务开发,真的好用;

这个小程序的源码我曾经开源了,你能够拜访云开发社区官网 获取源码,自行应用~

作者:黄秀杰,16 年开始从事小程序开发与技术布道,同名集体公众号「黄秀杰」。

云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、主动弹性扩缩的后端云服务,蕴含计算、存储、托管等 serverless 化能力,可用于云端一体化开发多种端利用(小程序,公众号,Web 利用,Flutter 客户端等),帮忙开发者对立构建和治理后端服务和云资源,防止了利用开发过程中繁琐的服务器搭建及运维,开发者能够专一于业务逻辑的实现,开发门槛更低,效率更高。

产品文档:https://cloud.tencent.com/product/tcb

技术文档:https://cloudbase.net

技术交换加 Q 群:601134960

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

正文完
 0