微信小程序云开发实战

本文详细介绍了如何在微信小程序中使用云开发功能,包括开通云开发、新建云函数、本地调试、上传部署、数据库操作以及云函数调用。通过实例展示了创建数据库表、添加记录、修改云函数以获取数据库数据的过程,并提供了小程序端调用云函数的代码示例。
摘要由CSDN通过智能技术生成

1. 开通微信云开发

首先需要准备以下环境
  • 微信小程序(含真实AppID)
  • 小程序开发工具

2. 新建云函数

在小程序项目根目录找到 project.config.json 文件,新增 cloudfunctionRoot 字段,指定云函数的本地根目录,如下:

{
   "cloudfunctionRoot": "./functions/"
}

然后在小程序下建立对应的目录./functions/
完成后该目录会如下显示:
在这里插入图片描述
右键点击functions目录,选择“新建Node.js云函数”,输入云函数名称(例如:newTest),然后等待数秒,右上角会提示如下:
在这里插入图片描述
此时云函数就自动上传并部署在远程服务端上了,新建的newTest目录及结构就会变成如下所示:
在这里插入图片描述
打开index.js,会看到官方提供的的云函数样例。

3. 本地调试

本地调试云函数,相当于在本地搭建了一套云函数服务端,可以直接调用本地的云函数进行测试

右键点击云函数,选择“开启云函数本地调试”。会进入云函数本地调试页面。如下图所示:
在这里插入图片描述
此时点击右边的开启本地测试,会提示:node modules 未安装,是否忽略并继续?
在这里插入图片描述
点击确定,会弹出报错窗口。
解决方法如下:

  • 首先,你要先安装好node
  • 然后右键点击云函数,选择“在外部终端窗口打开”
  • 输入 npm install,等待安装
  • 安装成功后会在云函数目录下多出一个目录“node_modules”
  • 此时再重新打开本地调试,则会显示如下:
    在这里插入图片描述
    此时本地调试就已经开启了,但是云函数还没有被调用,这里调用云函数有两种方式,第一种是默认的模拟器触发:就是直接在代码中调用云函数,则会直接调用本地的进行测试。第二种就是手动触发,操作如下:
  • 请求方式选择手动触发
  • 点击下方的“调用”按钮
  • 观察中间的console窗口,会提示函数触发执行的日志,则执行成功!

4. 上传并部署

当我们新建云函数的时候,工具就会自动同步本地云函数到线上。
可以在云函数里的index.js中编写逻辑代码,编写完后需要更新部署到线上,则右键选择“上传并部署,云端安装依赖”。这样,云函数就部署到线上了。

5. 云数据库

	微信云开发提供的JSON 数据库很简单,这里直接引用官方原话

数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。
关系型数据库和 JSON 数据库的概念对应关系如下表:

关系型文档型
数据库 database数据库 database
表 table集合 collection
行 row记录 record / doc
列 column字段 field

如下图:我们点击“+”号,在当前环境新建一张表“goods”
在这里插入图片描述
下面列表中会显示已经建好的表,我们选中刚刚新增的“goods”,点击新增记录,如下图:
在这里插入图片描述
弹出的页面如下,文档id就是记录的主键,我们用系统默认的不需要修改。
在这里插入图片描述
点击下边的“+”号,第一个字段我们输入name,值为“小米手机”;继续点击下面的“+”号,追加字段:value,值为2999。点击确定。
在这里插入图片描述
一条记录就添加好了,结果如下:
在这里插入图片描述
同学们可能发现,我从创建表名到添加记录,中间并没有设计表结构的过程,而是通过添加记录直接生成了表数据,这时有同学可能会想,如果我再添加一条结构不一样的记录会怎样?马上试试:
在这里插入图片描述
这次我添加了三个字段的记录,也添加成功了,说明小程序云开发json数据库并不强制要求每条记录的数据结构一致。

	在小程序端拉取云数据库数据,js代码如下:
//初始化云函数的sdk,这里需要填写你的环境ID,可以在环境设置里看到环境ID
wx.cloud.init({env:'这里填环境ID'})

const db = wx.cloud.database()//这里还没有拉取数据
const watcher = db.collection('goods')
const promise = watcher.get();//这里异步获取数据
promise.then(res=>{
  console.log(res)
});
  

执行结果如下:
在这里插入图片描述

6. 云函数调用

现在我们修改一下之前的云函数,使其能够获取我们刚刚新建的数据库记录

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 1. 获取数据库引用
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  // get 方法会触发网络请求,往数据库取数据, 返回promise对象
  const promise = db.collection('goods').get()
  // 必须等待请求返回后才return
  return promise.then(res=>{
    return res
  })
}

本地调试一下,成功会返回如下信息
在这里插入图片描述

接下来我们编写小程序端调用的代码:

在util目录下新建一个cloudFS.js,专门用来调用云函数,代码如下:

//初始化云函数的sdk,这里需要填写你的环境ID,可以在环境设置里看到环境ID
wx.cloud.init({env:'这里填环境ID'})

const test=()=>{
  wx.cloud.callFunction({
    name: 'newTest'
  }).then(res=>{console.log(res)})
}

module.exports = {
  test:test,
}

在页面js中调用这个方法:

var util = require('../../utils/cloudFS.js')
Page({
  test:function(){
    util.test()
  },
})

wxml的代码:

<view ><button style="margin:100rpx;" type="primary" bindtap="test">测试</button></view>

点击“测试”按钮即可调用云函数,控制台打印结果如下:
在这里插入图片描述

提示:云函数更新后记得重新上传部署到服务端哦
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值