基于云开发的微信小程序实战教程
Posted 止喜
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于云开发的微信小程序实战教程相关的知识,希望对你有一定的参考价值。
上篇文章中,简单介绍了下微信开发者工具是怎么去用的,还介绍了项目的基础目录结构,以及每个文件的作用,还配带了一些例子说明。最后还剩下cloudfunctions目录,也就是云开发的文件夹介绍。
本章主要内容:小程序云开发的基础目录结构,cloudfunctions目录介绍;编写云函数;云开发的调试。
一、小程序云开发的目录结构介绍
上篇文章「基于云开发的微信小程序实战教程(二)」中已经介绍了大部分文件夹的作用,还剩下 cloudfunctions 目录,放在这里继续介绍。
cloudfunctions
目录介绍:
cloudfunctions
是存放我们所有的云函数的地方,也就是相当于我们进行数据存储、进行数据添加、删除、修改等操作的地方。
从下图可以看到,我们下载的 demo 中目前有 4 个文件夹,每个文件夹其实现在可以理解为,一个文件夹对应一个云函数,也就是已经有了 4 个云函数的例子。(和我下图的不太一样也没关系,这只是官网给提供的例子,只是参考看一眼他们怎么写的,最终也用不到这几个例子中的代码)
有了云开发的功能,我们直接在这里通过云函数,进而完成对数据的管理,实现页面和数据的交互,完成一个完整的小程序(也就是所谓的后台,服务器,就不需要我们再去申请了,非常方便)
二、什么是云函数
云函数也是一个 js 文件,用来操作你小程序中存储下来的数据,并把结果抛出来。
比如删除一条数据,我们需要从前端界面点击删除按钮发起请求,调用到云函数去处理数据,找到该条数据并把它从删除,抛出删除成功,这样我们前端的页面上就可以知道「这条数据已经被我们删除了,存储数据的数据库中已经没有这条数据了」
还有一个云函数的好处是,因为云开发是基于微信提供的服务,所以能够直接访问到一些微信对外提供的一些方法,比如微信登录、分享朋友圈、等等我们直接就能够调用到
看个例子,打开login
文件夹,可以看到有config.json
,index.js
,packge.json
三个文件,下面分别来介绍一下。
index.js
,云函数最主要的文件,里面需要写的就是我们的接口函数,也就是说,我们在这里对数据库存储的数据做处理(比如修改一条记录),处理完后再把最新的处理过的结果抛出返回。这样子我们前端页面交互调用到这个方法时,就能得到更新后的最新数据了。
看上面截图,我们随便打开一个login/index.js
,看下大概代码怎么写的。以下是关键代码,为方便理解,我去掉了它原本的注释,加了自己的一些理解和解释。
忘记了怎么开通云服务的,可以去看文章一「基于云开发的微信小程序实战教程(一)」
// 这句是必须写的,固定格式。没有为啥,规定就是这样用的
const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init(
env: cloud.DYNAMIC_CURRENT_ENV
// 配置env的值,默认也不用改。
// cloud.DYNAMIC_CURRENT_ENV 默认是当前所处的云环境,如果之前创建了多个云服务环境,就需要改。
// 一般初学咱们也不会创建好几个,因为一个账号只能开通一个免费版的基础云服务环境。
)
/**
* event,能够拿到前端传过来的数据,比如删除某条数据,从前端把这条数据的id传过来,使用event对象去拿到参数
* context,一般用不到
* 这个方法也是固定格式,按这个样子在里面写自己的逻辑就可以了
*/
exports.main = async (event, context) =>
// 获取 WX Context (微信调用上下文),包括 OPENID、APPID、及 UNIONID(需满足 UNIONID 获取条件)等信息
// OPENID比较常用于校验身份
// OPENID是用户的唯一身份标识,不管你改微信号、昵称、头像等等,这个值是不会变的,一个用户就一个值
const wxContext = cloud.getWXContext()
// 这里写你要做的逻辑,比如查询列表,调用到这里就是拿到存下来的数据,并把它 return 出去
// 使用 return 把你需要返回给前端的数据返回,这样页面就能拿到你的处理结果了
return
openid: wxContext.OPENID,
message: "我从云函数把数据带回来了"
看到这里莫着急,具体怎么看出来这段代码写的对不对呢,在下面的「云函数调试」模块再去检验
config.json
,配置文件,刚才提到我们可以用云函数很容易地调用到微信对外开放的一些API接口,但是你得按照它要求的格式来调用。这里的话,就是我们需要在config.json
中声明一下,我要调用微信的xx方法了,然后在index.js
中才能去用这个xx方法
pckage.json
,配置第三方依赖库的,和config.json
用法很像,不过这个更复杂一点,因为是想用别人的第三方的库,所以你得先把它下载下来。
啥时候需要用到一些插件库之类的,就在package.json
的dependencies
对象中加上该插件库名称和版本 ,然后需要用npm install
安装一下,接下来在我们的云函数index.js
最开头的位置require
引入一下,就可以用了
这里提及到的安装,涉及到了npm install 插件名
去安装,需要在电脑上安装一下node
才能够使用,如果没安装node,请参考官网这里进行下载安装。
三、创建云函数
大概了解了云函数的基础样子之后,我们尝试自己创建一个云函数。
在cloudfunctions
目录的位置,单击鼠标右键,会弹出上图中的框,选择「新建 Node.js 云函数」,起个名字比如 test,敲下回车也就是按下enter键后,会自动生成一个云开发的函数文件夹。
看下自动生成的代码,你会发现,和第二点内容「二、什么是云函数」中介绍的云函数结构是一样的。
四、云函数的调试
用我们刚刚创建的云函数,来了解下如何进行云函数的调试。
选择需要调试的云函数文件夹目录位置,右键单击,会弹出如上图所示的框,选择「开启云函数本地调试」,会打开一个新的窗口,即云函数调试界面。
这时候你会发现有个新的弹框,提示你没有安装node modules模块,这也就是和我们刚才提到了package.json
中的用到了依赖库需要下载安装的原因。
直接点击「确定」按钮,就会下载安装相关依赖。
下载需要时间,大概等待一会儿,你会发现原本只有3个文件的文件夹里多了一些东西。不过这些都是它自动生成的,都不用管,也不要去动它。
除了这种安装依赖项的方法,还有另一个安装依赖方式,也要顺带提一下。
还是右键单击云函数文件夹,选择「内置终端中打开」,在终端窗口输入命令npm install
,等待安装完毕
安装完成后,现在再打开我们云函数本地调试窗口。
大概样子见下图,其中「输出区域」我这里输出了一些警告,你们的可能没有。这些不用太关注,只是让大家了解下大概样子。
右侧的「请求方式」分为两种,分别是模拟器触发和手动触发,我们先来看手动触发
1、手动触发
手动触发,需要我们手动点击右下角的「调用」按钮,完成云函数的调用。
经常会用到的是「请求参数」,在这里模拟前端页面传过来的数据,这样点击调用的时候,执行云函数就能在event
对象中拿到你设置的值。
在代码里加入一句console.log(event)
,我们在调用到该云函数的时候,把event对象打印出来,看看它的值是什么,有没有拿到我们设置的值。
为方便查看结果,单独截个大图,可以看到我们调用成功了,并且拿到了传过来的参数。
2、模拟器触发
模拟器触发,也就是我们通过从小程序页面的交互来完成云函数的调用。
我们直接用现有的例子来看一看是怎么用的,顺带着回顾一下之前的几个小知识点。
首先,如果没开启左侧的模拟器界面,先单击左上角的「模拟器」按钮,让模拟器窗口出来。
接下来,打开app.json
,看下pages
数组中第一个路径是什么,进而找到我们的第一个页面。
我这里默认第一个页面是pages/index/index
,那我们首先就打开这个文件的index.wxml
,用页面中第一个列表项做例子吧,也就是找到「点击获取openid」这个元素。
找到之后,根据bindtap="onGetOpenid"
,代表着当你点击这块区域时,它就会触发onGetOpenid
这个方法。那我们就去index.js
中找到这个方法。
bindtap=“xx”,代表点击时会调用xx方法,也是固定语法。注意其中xx的名字是你自己取的方法名字,是可变的
简单的介绍下如何调用云函数,其实也是固定格式,直接看下方代码的例子。
wx.cloud.callFunction(
name: 'login', // 代表调用了哪个云函数
data: , // 参数放这里传递,云函数会通过event对象拿到
success: res =>
// res是调用云函数成功后,从云函数那里return的数据
console.log('[云函数] [login] 调用成功')
// 调用成功可执行一些操作
,
fail: err =>
// err是失败的原因
console.error('[云函数] [login] 调用失败')
// 调用失败可执行一些操作
)
回到刚刚那一点,根据onGetOpenid
方法的内容,可以看到它调用的云函数是login
这个云函数,我们打开看一下
这个文件刚刚在最开始被我稍微修改了下,不过不影响,关键代码都是一样的。为了方便观察界面和云函数的交互效果,我再在云函数中加一句输出语句console.log(event)
,将event对象即前端界面传过来的参数,打印出来。
接下来,鼠标右击,选择开启云函数本地调试,没有安装的先npm install
一下,注意这里开启本地调试的是login
这个云函数
接下来,点击页面中的「点击获取 openid」,查看云函数本地调试的情况。
放大看看,查看event的结果,发现是空的,因为我们调用的时候没传参数。
下面我们稍微修改下page/index/index.js
文件中的onGetOpenid
方法,调用云函数的时候传个参数看看效果。
在这里加上一个参数name: 123
,并保存代码。如下图所示
再次点击,查看效果,已经可以拿到值了。
这篇文章中主要介绍了云开发相关的功能使用,以及云函数编写的基础知识点,包括如何进行调试,从前端页面到云函数的交互到这里就串联了起来。
基础知识到这里就差不多了,也有很多地方提到了之前的知识点,也有部分只讲了重要的功能。还是那句话,记不住没关系,但是一定大概要有个印象。
后面文章更新应该会更加偏向实践了,要去实践,不断的用到,在练习中会记住的更深刻~
相关文章
基于云开发的微信小程序实战教程(一)
基于云开发的微信小程序实战教程(二)
基于云开发的微信小程序实战教程(三)
以上是关于基于云开发的微信小程序实战教程的主要内容,如果未能解决你的问题,请参考以下文章