实战篇笔记 扫码点餐小程序云开发小程序端(三)


创建云函数

创建uniapp项目时, 如果勾选了 启用uniCloud ,会创建一个uniCloud云开发环境,因为前面在创建项目的时候没有勾选 启用uniCloud 选项,所以这里需要自己创建云服务空间。

HBuilderX 编辑器打开 manifest.json 源码视图,在 mp-weixin 选项新增 cloudfunctionRoot 字段,指定本地已存在的目录作为云开发的本地根目录

"mp-weixin" : {
    "appid" : "APPID",
    "setting" : {
        "urlCheck" : false
    },
    "usingComponents" : true,
    "cloudfunctionRoot": "cloudfunctions/"  // +
}

HBuilderX 运行微信开发者工具,在微信开发者工具编辑器中新建 cloudfunctions 目录,然后右键 新建Node.js云函数

点击刚创建的云函数目录,右键 在内建终端打开,执行 npm install --save wx-server-sdk@latest 【文档:在云函数中使用 wx-server-sdk

cloudfunctions/Dish-manage/index.js 文件中编写云函数

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

cloud.init({
  env: '改为你自己的云环境id'
})

const db = cloud.database()
const _ = db.command
const category = db.collection('dishes-category')//菜品类目数据库
const dishes = db.collection('dishes-data')//菜品所有数据

// 云函数入口函数event:可以接到前端传来的值
exports.main = async (event, context) => {
// 1.请求数据库的菜品类目的数据
// 2.请求所有菜品的数据
  try {
      const res_cate = await category.where({count:_.gt(0)}).get()
      // console.log(res_cate.data)
      const res_dis = await dishes.where({onsale:true}).get()
      
      let newdata = {}
      res_dis.data.forEach((item,index)=>{
        let {category,cid,...data} = item
        if(!newdata[cid]){
          newdata[cid]  = {
            category,
            cid,
            good_query:[]
          }
        }
        newdata[cid].good_query.push(data)
      })
      let list = Object.values(newdata)
      console.log(list)

      return{
        res_cate:res_cate.data,
        res_dis:list
      }

  } catch (error) {
    return error
  }
}

右键 启动云函数本地调试

能正确返回结果即成功,再右键选择 上传并部署:云端安装依赖(不上传node_modules),查看云开发控制台中云函数列表是否部署成功

小程序端调用云函数

  1. 小程序端初始化

调用云函数、数据库、存储、云托管等 API 时,都需要指定所需访问的云环境 ID,意即指定访问哪个环境下的云函数/数据库/存储/云托管/…资源。有两种方式进行指定:1.使用默认示例 wx.cloud;2.为各个环境使用单独的实例

这里使用默认示例 wx.cloud 指定所需访问的云环境 ID

// App.vue
export default {
		onLaunch: function() {
			wx.cloud.init({
			  env: 云环境 ID,
			  traceUser: true,
			})
		}
	}
  1. 小程序端调用
// pages\home-page\page.vue
methods: {
  async dishEs () {
    const res = await wx.cloud.callFunction({
      name: '要调用的云函数名称', 
      data: {}, // 传递给云函数的参数
    })
    console.log(res)
  }
}

文章作者: April-cl
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 April-cl !
  目录