视频课我会在B站免费提供给大家,欢迎关注,欢迎三连。
https://space.bilibili.com/419474640/video
配套笔记会在csdn上免费给到大家,欢迎关注,笔记会持续更新。
https://blog.csdn.net/qiushi_1990
目前源码和配套的一些资源暂时不免费,如果有需要的同学可以私聊石头哥,拿米来换。
笔记我也有整理一套电子书,大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。
另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥
石头哥目前可以解答如下问题
小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。
开发者无需搭建服务器,可免鉴权直接使用平台提供的API进行业务开发
小程序
云开发又简称tcb,是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含:云数据库,云函数,云存储,云调用。后面章节会具体给大家讲解这几个。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
云开发相对于传统服务器的优势如下表
通过上面的对比,我们可以看出,如果你想快速创建一个小程序的后台,用云开发是不错的选择。
工欲善其事必先利其器,我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。
第一次进入时,如下
我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们接下来要讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.
微信小程序注册地址:https://mp.weixin.qq.com/
进去以后点击立即注册
进入注册页面时,跟着提示一步步来就可以了
今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项
我们要开通云开发服务,必须先要进入小程序开发者工具才可以。
由于云开发官方更新的太快,有些同学可能会遇到下面这样的问题
如果你出现上面的问题,再看这节,如果没出现这样的问题,直接跳过就行。
在app.js里写入环境id,注意这里要用你自己的云开发环境id
初始化云开发环境前,先去云开发控制台,拿到云开发环境id,如下图
拿到环境id以后,就去app.js里做云开发环境初始化,如下
用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可.
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html
我们这里以新建一个商品列表为例
要想让用户查询到我们创建的商品数据,需要把权限改为所有用户可读
doc是用来查询单条数据的。比如商品详情页。
doc里面用到的参数就是我们数据里的_id字段
通过add可以实现数据的添加,
修改数据库里已存在的数据,结合doc进行修改单条数据
删除数据,结合doc删除单条数据
用户输入新价格,调用update方法进行更新数据
用户删除数据是一个危险操作,所以操作之前最好给用户一个友好提示。
官方弹窗文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
如果这条商品不是你创建的,当你对这条商品做删除或者更新操作时,虽然也会返回成功,但是可以看到我们更新或者删除的条数是0。
其实这个时候也意味着没有更新或者删除成功,这里是因为操作权限的问题,因为这条数据不是你创建的。所以你只能对这条数据做查询操作,而不能做修改和删除操作。要想解决这个问题,就要借助云函数了。后面云函数讲解的部分,我会做具体讲解的。
我们还是先接着学习数据库操作的高级操作
我们在开发时为了提高代码编写效率,通常会使用一些快捷键。我们小程序开发工具里常用的快捷键如下。
设置—》快捷键设置
快捷键组合 | 描述 |
---|---|
Ctrl+a | 全选 |
Ctrl+c | 复制选中内容 |
Ctrl+v | 粘贴复制的内容 |
Ctrl+z | 撤销当前编辑 |
Ctrl+s | 保存并编译项目 |
Ctrl+b | 重新编译项目 |
Ctrl+x | 截切选中的内容 |
Ctrl+/ | 添加注释 |
Ctrl+Shift+k | 删除当前行 |
Ctrl+Shift+f | 全局搜索 |
Ctrl+f | 当前页面内搜索 |
Ctrl+Shift+h | 全局搜索并替换文本 |
Ctrl+h | 当前页面内搜索并替换文本 |
Shift+Alt+F | 格式化代码 |
Shift+Alt+⬆ | 向上复制当前行 |
Shift+Alt+⬇ | 向下复制当前行 |
Alt+⬆ | 把当前行向上移动一行 |
Alt+⬇ | 把当前行向下移动一行 |
有的电脑上快捷键可能会有细微差距,以开发者工具默认自带的快捷键为准。
orderBy方法在做排序的时候,接受两个参数
如我们根据商品价格从低到高升序排列
limit用来指定查询结果集数量上限,比如我们有100条数据,只想返回前20条,我们可以通过limit(20)来指定只返回20条数据。
例如,只返回3条数据的写法如下
skip指定查询返回结果时从指定序列后的结果开始返回,常用于分页。比如我们有100条数据,想从第10条开始返回数据,可以通过skip(10)来实现
比如我们有100条数据,每次返回20条数据。那么就可以分5页返回。
我门上面学完了数据库的增删改查,但是这些都是最基础最简单的操作,如果我们想实现复杂的数据查询操作,该怎么办呢
比如
我们如果想实现上面这些复杂的操作,就需要用到数据库里的 Command数据库操作符,就是下面这位
比如查询价格大于5的所有商品
比如查询大于等于5元的商品
比如查询价格小于5的所有商品
比如查询价格小于等于5元的所有商品
比如查询价格大于5小于10元的所有商品
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html
我们先来看下官方给出的云函数简介
我们下面以获取openid为例,来看看云函数,php,Java的实现对比
Java获取openid和上面的php步骤一样,也是需要上面7步。而我们用云函数获取openid呢,就只需要简单的3步就行了,代码量也能显著减少
用云函数的话,只需要3步
来看下云函数代码,只需要10行代码,即可轻松搞定
我们用云函数和上一章的云数据库进行下对比
操作 | 云函数 | 云数据库 |
---|---|---|
返回数据上限 | 100条 | 20条 |
更新数据 | 都可以更新 | 只有自己创建的才可以更新 |
删除数据 | 都可以删除 | 只有自己创建的才可以删除 |
运行环境 | 运行在云端Node.js环境 | 运行在小程序本地 |
实现功能丰富度 | 非常丰富 | 只能实现数据库增删改查 |
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html
调用云函数有两种写法
注意:云函数只要有变动,就要重新部署,否则云函数不生效。
遇到了一个问题,如下
本地小程序直接调用数据库修改会有问题
只能修改自己创建的数据,别人创建的数据,就没有办法修改了。
如何解决呢? 用云函数来修改就可以解决这个问题啦。
1,先创建云函数update0129
2,调用云函数就行修改
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
首先来看下官方对云存储的介绍:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html
控制台也可以很方便的管理文件。
我们上传图片之前需要先选择图片,所以这里用到一个图片选择的功能
我们既然已经学完图片上传功能了,那么我们就可以改造下我们之前的商品列表了,给我们的商品列表添加商品图片。
上传视频之前同样需要先选择视频,选择视频的代码如下
选择文件的时候记得把type设置为file
在上面选择好文件以后,我们还是要调用uploadFile进行文件上传
使用wx.cloud.downloadFile下载文件
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/downloadFile.html
使用wx.openDocument打开文件
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
我们需要在app.json获取页面对应的json里设置enablePullDownRefresh属性为true来开启下拉刷新。
我们在下拉刷新时,刷新动画一般很久才结束,正常情况下应该是数据请求成功后就结束刷新动画。所以我们通过wx.stopPullDownRefresh()方法来结束刷新动画。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html
小程序数据库api和云函数调用数据的限制
小程序端直接调用云数据库时,每次最多可以获取20条,云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。
我们做分页加载时,主要用到了skip和limit方法,对应的官方文档如下
其实这个skip和limit我在数据库的那一节有做初步讲解,这一节我们就借助具体分页加载的案例来做综合讲解
这108条数据是石头哥提前为付费用户/年卡用户准备好的,如果你没有付费,可以自己去数据库里创建108条数据即可。
我这里导入到num数据表,导入成功如下:
把数据表(集合)的权限改为所有用户可读,仅创建者可读写。
我们的列表滑动到最后一个数据时,会执行下面的方法
直接调用数据库每次最多只能加载20条数据
wx.showLoading({
title: '加载中...',
})
wx.hideLoading()
通过云函数调用数据库,每次最多可以加载100条数据.
今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。
比如我这里有如下的一些数据
我们想实现如下搜索需求
我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。
我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。
代码如下
由于我们要查询多个字段,所以我们这里用到了command高级操作符里的or
由于我们要查询多个字段,所以我们这里用到了command高级操作符里的and
代码如下:
查询结果:
为例方便大家使用,我把完整的代码贴到这里,后面大家使用时,直接复制这里的代码,略微改造下就可以了。
//我这里简单起见就把搜索词写死,正常应该用户输入的
let searchKey = '小石头'
let db = wx.cloud.database()
let _ = db.command
db.collection('news')
.where(_.or([
{//标题
title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
regexp: searchKey,
options: 'i', //大小写不区分
}),
},
{//描述
desc: db.RegExp({
regexp: searchKey,
options: 'i',
}),
}
])).get()
.then(res => {
console.log('查询成功', res)
})
.catch(res => {
console.log('查询失败', res)
})
开通cms需要你云开发里使用按量付费,如果你是第一次开通云开发,记得做如下选择。
之前的通过formid发送模板消息推送,将在2020年1月10日下线,所以我们不得不使用订阅消息了。
我们先来看下订阅消息的官方简介。
这一步和我们之前的模板消息推送是一样的,也是先添加模板,然后拿到模板id
我们做订阅消息授权时,只能是用户点击或者支付完成后才可以调起来授权弹窗,官方是这么要求的:
这里用户允许后,我们就可以给用户推送消息了,接下来我们来借助云开发的云函数来实现消息推送功能。
先来看官方爸爸是怎么说的。
我们只需要创建一个云函数如下,然后填入用户的openid,要跳转的小程序页面链接,模板内容,模板id即可。通常这些数据都应该传进来,简单起见,我就把这里的模板内容写成固定的。
注意:我在编写上面的代码时,推送内容的key必须和小程序模板里的key保持一致,否则就会报如下错误。
到这里我们就完整的实现模板消息推送功能了,下面我把主要代码贴给大家,大家也可以私信我获取完整源码。
<button bindtap="shouquan" type='primary'>获取订阅消息授权</button>
<button bindtap="getOpenid">获取用户的openid并推送消息</button>
//编程小石头wechat:2501902696
Page({
//获取授权的点击事件
shouquan() {
wx.requestSubscribeMessage({
tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //这里填入我们生成的模板id
success(res) {
console.log('授权成功', res)
},
fail(res) {
console.log('授权失败', res)
}
})
},
//获取用户的openid
getOpenid() {
wx.cloud.callFunction({
name: "getopenid"
}).then(res => {
let openid = res.result.openid
console.log("获取openid成功", openid)
this.send(openid)
}).catch(res => {
console.log("获取openid失败", res)
})
},
//发送模板消息到指定用户,推送之前要先获取用户的openid
send(openid) {
wx.cloud.callFunction({
name: "sendMsg",
data: {
openid: openid
}
}).then(res => {
console.log("推送消息成功", res)
}).catch(res => {
console.log("推送消息失败", res)
})
}
})
//编程小石头wechat:2501902696
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async(event, context) => {
try {
const result = await cloud.openapi.subscribeMessage.send({
touser: event.openid, //要推送给那个用户
page: 'pages/index/index', //要跳转到那个小程序页面
data: {//推送的内容
thing1: {
value: '小程序入门课程'
},
thing6: {
value: '杭州浙江大学'
},
thing7: {
value: '第一章第一节'
}
},
templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id
})
console.log(result)
return result
} catch (err) {
console.log(err)
return err
}
}
后面我会分享更多小程序相关的知识出来,请持续关注。
注意:授权一次,只能发送一条消息。
//发送订阅消息给多个用户
sendAll() {
if (name == null || name == '') {
wx.showToast({
icon: "none",
title: '请输入课程名',
})
return
}
let users = [
"oc4sa0Vp_s65LEItm4JSWT5WFQds",
"oc4sa0dZ-pSCu95djiLCt7jo97bY"
]
users.forEach(item => {
console.log("for循环", item)
this.sendFun(item, name)
})
},
//封装的方式方法
sendFun(openid, name) {
wx.cloud.callFunction({
name: "fasong",
data: {
openid: openid,
name: name
}
}).then(res => {
console.log("发送单条成功", res)
}).catch(res => {
console.log("发送单条失败", res)
})
}
普通短信
今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜。
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html
进入官方文档一看,云开发给咱们开发者的福利还真不小。
不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。
废话不多说了,咱们直接来撸代码
这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。
上面条件都满足以后,我们就可以来愉快的撸代码了。
年卡福利
感兴趣可以加石头哥微♥ 2501902696 备注年卡
如果你不开通静态网站,直接调用短信发送,会报如下错误。
这里开通云开发我们借助小程序开发者工具来实现快速开通。
这里我就不再多说了,只有注册过小程序的appid才可以开通云开发
小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》
这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下
其实上面静态网站功能开通以后,我们不用上传网站资源,就可以直接来使用短信功能了。
下面我们就来使用云开发的云函数功能来做短信发送功能。
老规矩先看效果图
新建一个和pages平级的目录cloud,用于存放云函数
右键cloud目录,新建Node.js云函数
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.cloudbase.sendSms({
env: 'xiaoshitou-zfl2q',
content: '编程小石头发布了新的能力',
phoneNumberList: [
"+8615611823564"
]
})
return result
} catch (err) {
return err
}
}
上面云函数编写好了,一定要记得部署下云函数。右键sendSms然后点击下面箭头所示的即可。
我们上面云函数编写并部署成功以后,就可以来调用这个云函数,发送短信了。
在wxml文件里写一个button按钮,编写一个bindtap点击事件
在js文件里实现上面button的点击事件,然后调用云函数
点击发送短信
老规矩,先看效果图
页面比较简单,就两个输入框和两个按钮
js里主要是获取用户输入的手机号,然后发送验证码,发送验证码调用云函数实现短信验证码发送功能。用户输入验证码以后进行校验即可。
用户输入手机号以后,点击发送,可以看到我们手机上收到了如下短信。
到这里我们就实现了验证码发送功能了。
我这里把生成随机验证码的方法贴给大家。
//获取随机验证码,n代表几位
generateMixed(n) {
let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let res = "";
for (var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 35);
res += chars[id];
}
return res;
}
//获取随机验证码,n代表几位
generateMixed(n) {
let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let res = "";
for (var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 9);
res += chars[id];
}
return res;
}
我们上面给单个手机发送验证码的功能实现了,接下来就教大家如何群发短信。
老规矩,先看效果图
这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。
上面条件都满足以后,我们就可以来愉快的撸代码了。
年卡福利
感兴趣可以加石头哥微♥ 2501902696 备注年卡
简单起见,我这里只定义一个输入手机号的输入框和一个button按钮
我这里以*来分割手机号,如下图所示。
我们分割字符串用到的是字符串的split()方法
去除字符串里的回车键语法如下
字符串.replace(/[\r\n]/g, "")
可以看到我们只需要调用字符串.replace方法即可,后面括号里跟的是回车键对应的正则表达式。这里不需要记住,后面用的时候来我笔记这里复制就行了。
如果你有仔细阅读官方文档,可以看到我们群发的手机号前面必须以+86开头。并且每次群发的手机号不能超过1000条。
那么我们接下来要做的就是实现群发功能了。我们这里要想成功的实现群发,需要两个元素
关于手机号和群发内容都有要求
这里其实就是一个input来获取用户输入的内容就行了。我不再多讲,直接把代码贴出来。
短信内容和群发的手机号都已经成功拿到了,我们接下来就要来编写群发的云函数了。
云函数编辑好,记得重新部署下。
上面云函数编辑好了,也部署好了,接下来就是要调用云函数实现短信群发了。
接下来我们就要验证自己的劳动成果了。如下,我发这样的内容给两个手机号。为什么是两个呢,我这里是学习,要节省短信条数。官方只送我们1000条。所以要省着点用。
其实群发两个手机号,和群发1000个没区别,只要群发两个成果,那么群发1000个也一样的。
终于等到了第二天8点47,下面我们把昨天的群发短信再演示一遍,看这次能不能成功。
先来看我们的日志
第二个手机号是苹果手机
联系客服