最近微信小店開放了，趕著微信全面開放之前，把自己的小程序開源出來給大家使用～

小程序效果

開發(fā)心得

如何在項(xiàng)目中集成云開發(fā)

一開始項(xiàng)目并非基于 云開發(fā) 而開發(fā)的，目前考慮用云開發(fā)，因此，需要在項(xiàng)目中開啟云開發(fā)的相關(guān)選項(xiàng)。

首先，在小程序文件夾中建立 cloud 文件夾，并在package文件中配置，建立用戶登錄的云函數(shù)并上傳到微信小程序云中。相關(guān)的操作可以參考 官方文檔 。

我在項(xiàng)目目錄中添加了 cloud 和 miniprogram 兩個(gè)目錄，并在 project.config.json 文件夾進(jìn)行配置

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

開通云開發(fā)

配置完成后,可以點(diǎn)擊控制臺(tái)中的「云開發(fā)」來開通云開發(fā)。

在云開發(fā)的界面中配置，并開通云開發(fā)。

開通數(shù)據(jù)庫(kù)集合

云開發(fā)不會(huì)自動(dòng)創(chuàng)建數(shù)據(jù)庫(kù)集合，因此，你需要手動(dòng)創(chuàng)建集合。分別創(chuàng)建 店鋪表 Seller 、分類表 Category 、商品表 Food 、訂單表 Order 、地址表 Address 、用戶表 _User 。

數(shù)據(jù)操作

有了數(shù)據(jù)庫(kù)的表后，就可以在代碼中對(duì)數(shù)據(jù)進(jìn)行操作了。

下方是我進(jìn)行目錄操作的代碼。

const db = wx.cloud.database()
const { showModal } = require('../../utils/utils')

Page({
  onLoad: function(options) {
    // 管理員認(rèn)證
    getApp().auth()
    if (options.objectId) {
      // 緩存數(shù)據(jù)
      this.setData({
        isEdit: true,
        objectId: options.objectId
      })
      // 請(qǐng)求待編輯的分類對(duì)象
      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: '請(qǐng)?zhí)顚懛诸惷Q',
        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() {
    // 確認(rèn)刪除對(duì)話框
    wx.showModal({
      title: '確認(rèn)刪除',
      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()
            })
        }
      }
    })
  }
})

聯(lián)表查詢

在使用數(shù)據(jù)庫(kù)時(shí)，難免要進(jìn)行聯(lián)表查詢， 云開發(fā)支持在云函數(shù)側(cè)進(jìn)行聯(lián)表查詢 ，你可以參考我的代碼，來實(shí)現(xiàn)聯(lián)表查詢的功能。

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

// 云函數(shù)入口函數(shù)
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
}

文件上傳

在小程序的操作中，難免會(huì)遇到需要進(jìn)行圖片上傳的場(chǎng)景。在進(jìn)行圖片上傳時(shí)，云開發(fā)提供了方便的云存儲(chǔ)供我們查詢數(shù)據(jù)。

在獲取到文件的本地路徑后，調(diào)用 wx.cloud.uploadFile 即可上傳文件。

chooseImage() {
    wx.chooseImage({
      count: 1, // 默認(rèn)9
      sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
      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保存到數(shù)據(jù)庫(kù)表中
          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: '上傳失敗'
            })
          })
        })
      }
    })
  }

微信支付邏輯的實(shí)現(xiàn)

作為一個(gè)商城，難免會(huì)有微信支付相關(guān)邏輯的實(shí)現(xiàn)。在這種情況下，可以借助云開發(fā)提供的微信支付云調(diào)用功能實(shí)現(xiàn)快速的 API 調(diào)用和接口的實(shí)現(xiàn)。

綁定商戶

在使用云開發(fā)提供的微信支付時(shí)，需要先執(zhí)行微信支付的綁定，在云開發(fā)控制臺(tái)添加相應(yīng)的商戶號(hào)

添加后微信會(huì)發(fā)來通知

根據(jù)提示，開通賬號(hào)即可。

函數(shù)代碼調(diào)用

配置完成后，只需要在云函數(shù)中調(diào)用微信支付的接口，就可以實(shí)現(xiàn)相關(guān)調(diào)用的能力

const cloud = require('wx-server-sdk')

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

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  console.log('請(qǐng)求中')
  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' 指的就是支付成功后，微信支付那側(cè)給我的回調(diào)信息，后面我們就用它來更新我們的訂單狀態(tài)

小程序端代碼調(diào)用

調(diào)用云函數(shù)后，會(huì)獲得微信支付所需要的各種參數(shù)，

這個(gè)時(shí)候，就可以在小程序端調(diào)用微信支付接口，進(jìn)行支付，相關(guān)代碼可以參考

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: () => {
          // 跳轉(zhuǎn)訂單詳情頁
          wx.navigateTo({
            url: '/order/detail/detail?objectId=' + order._id
          })
        }
      })
    },
...

微信支付回調(diào)處理

微信統(tǒng)一下單里一個(gè)pay_cb回調(diào)函數(shù)，它是一個(gè)云函數(shù)，后續(xù)微信支付的支付信息將會(huì)發(fā)送在這個(gè)函數(shù)中，相應(yīng)的，我們需要編寫處理的方法

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

cloud.init({
  // API 調(diào)用都保持和云函數(shù)當(dāng)前所在環(huán)境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  console.log('支付回調(diào)')
  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 }
  }
}

總結(jié)

云開發(fā)體驗(yàn)下來，優(yōu)點(diǎn)自不必多說，微信登錄與支付原生支持，調(diào)用與調(diào)試都很方便，特別是不用啟本地服務(wù)開發(fā)，真的好用；

這個(gè)小程序的源碼我已經(jīng)開源了，你可以 訪問云開發(fā)社區(qū)官網(wǎng) 獲取源碼，自行使用～

作者：黃秀杰，16年開始從事小程序開發(fā)與技術(shù)布道，同名個(gè)人公眾號(hào)「黃秀杰」。

云開發(fā)（Tencent CloudBase，TCB）是騰訊云提供的云原生一體化開發(fā)環(huán)境和工具平臺(tái)，為開發(fā)者提供高可用、自動(dòng)彈性擴(kuò)縮的后端云服務(wù)，包含計(jì)算、存儲(chǔ)、托管等serverless化能力，可用于云端一體化開發(fā)多種端應(yīng)用（小程序，公眾號(hào)，Web 應(yīng)用，F(xiàn)lutter 客戶端等），幫助開發(fā)者統(tǒng)一構(gòu)建和管理后端服務(wù)和云資源，避免了應(yīng)用開發(fā)過程中繁瑣的服務(wù)器搭建及運(yùn)維，開發(fā)者可以專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)，開發(fā)門檻更低，效率更高。

產(chǎn)品文檔： https://cloud.tencent.com/product/tcb

技術(shù)文檔： https://cloudbase.net

技術(shù)交流加Q群：601134960