1、小程序云开发 1.1、云开发简介 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。开发者无需搭建服
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
云开发相对于传统服务器的优势如下表
通过上面的对比,可以看出,如果想快速创建一个小程序的后台,用云开发是不错的选择。
工欲善其事必先利其器,我们在开发小程序之前,首先需要安装小程序开发者工具。
当然了,也可以直接通过下面链接去下载
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
不管你是window还是Mac电脑,只需要双击安装包实现安装即可。
等待安装即可
安装完成
第一次进入时,如下
点击上图的加号,我们来创建一个新项目
完成上图的配置后,点击新建。即可创建项目。创建好以后的项目如下图所示。
这样我们就完成了小程序开发者工具的安装了,后面我们就可以开始小程序的代码编写了。
前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们接下来要讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.
官方注册文档:https://developers.weixin.qq.com/miniprogram/introduction/
微信小程序注册地址:https://mp.weixin.qq.com/
进去以后点击立即注册
进入注册页面时,跟着提示一步步来就可以了
今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项
开通云开发服务,必须先要进入小程序开发者工具才可以。
和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.
在app.js里写入环境id,注意这里要用你自己的云开发环境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方法进行更新数据
我们更新成功的时候,会有如下所示的日志打印。
只有stats里的updated是1的时候,才代表成功的更新了一条数据。
如果这条商品不是你创建的,当你对这条商品做更新操作时,打印的updated就是0。
这个时候代表没有更新成功。这是因为操作时的权限问题,要解决这个问题,就要借助云函数了,这里我们先放在这里,在后面云函数章节会做具体讲解。
用户删除数据是一个危险操作,所以操作之前最好给用户一个友好提示。
官方弹窗文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
如果这条商品不是你创建的,当你对这条商品做删除或者更新操作时,虽然也会返回成功,但是可以看到我们更新或者删除的条数是0。
其实这个时候也意味着没有更新或者删除成功,这里是因为操作权限的问题,因为这条数据不是你创建的。所以你只能对这条数据做查询操作,而不能做修改和删除操作。要想解决这个问题,就要借助云函数了。后面云函数讲解的部分,我会做具体讲解的。
我们还是先接着学习数据库操作的高级操作
我们在开发时为了提高代码编写效率,通常会使用一些快捷键。我们小程序开发工具里常用的快捷键如下。
设置—》快捷键设置
然后点击如下快捷键即可查看所有的快捷键
如果感觉默认的快捷键不喜欢,可以自己重新设置快捷键。由于自带的快捷比较多,我这里不一一列举了,我把一些常用的快捷键拿出来给大家大致讲一讲,我这里以window电脑为例,如果你mac电脑,可以自己去看下开发者工具默认的快捷键。多看几遍把常用的记住就行了。
快捷键组合 | 描述 |
---|---|
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数据库操作符,就是下面这位
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html
比如查询价格大于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环境 | 运行在小程序本地 |
实现功能丰富度 | 非常丰富 | 只能实现数据库增删改查 |
调用云函数有两种写法
注意:云函数只要有变动,就要重新部署,否则云函数不生效。
遇到了一个问题,如下
出现原因:如果你有两个云开发环境,偶尔会出现上图所示的问题。
解决问题:有两种
本地小程序直接调用数据库修改会有问题
只能修改自己创建的数据,别人创建的数据,就没有办法修改了。
如何解决呢? 用云函数来修改就可以解决这个问题啦。
1,先创建云函数update0129
2,调用云函数就行修改
解决方案如下:
使用DYNAMIC_CURRENT_ENV
代码片段
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
首先来看下官方对云存储的介绍:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html
说白了,云存储就是可以用来存储视频,音频,图片,文件的一个云存储空间。如果你的小程序需要用到视频播放,音频播放,图片展示,文件上传与下载功能,就可以用到我们的云存储了。
控制台也可以很方便的管理文件。
我们上传图片之前需要先选择图片,所以这里用到一个图片选择的功能
对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
然后调用文件上传的api接口即可
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html
云开发官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
小程序列表渲染文档:[Https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html?search-key=
背景颜色色值:#2db7f5
卡片布局:
<block wx:for="{{dataList}}" wx:key="item"> <view class='item-container'> <text class='item-name'>上传人:{{item.name}}text> <text class='item-name'>上传时间:{{item.time}}text> <image class='img' src='{{item.imgUrl}}'>image> view> block>
卡片列表样式:
page { background: #2db7f5; } .item-container { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; width: 92%; margin: 4%; display: flex; flex-direction: column; background: white; padding-top: 5pt; padding-bottom: 5pt; border-radius: 5px; } .item-name { font-size: 12px; margin-left: 15px; } .img { width: 100px; height: 100px; margin-top: 10px; margin-left: 20px; }
获取当前时间的方法:
//获取当前时间,返回时间格式:2018-09-16 15:43:36 getNowFORMatDate: function() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate; },
上传视频之前同样需要先选择视频,选择视频的代码如下
对应的官方文档如下:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
选择好视频以后,同样是调用文件上传api,因为视频也是一个文件。
选择文件的时候记得把type设置为file
对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html
在上面选择好文件以后,我们还是要调用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来开启下拉刷新。
由于我们的刷新动画默认是白色圆点,所以还要在json里设置页面背景色才可以看到动画。
在page里的onPullDownRefresh方法里监听下拉刷新
我们在下拉刷新时,刷新动画一般很久才结束,正常情况下应该是数据请求成功后就结束刷新动画。所以我们通过wx.stopPullDownRefresh()方法来结束刷新动画。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html
代码示例如下
小程序数据库api和云函数调用数据的限制
小程序端直接调用云数据库时,每次最多可以获取20条,云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。
我们做分页加载时,主要用到了skip和limit方法,对应的官方文档如下
其实这个skip和limit我在数据库的那一节有做初步讲解,这一节我们就借助具体分页加载的案例来做综合讲解
我这里导入到num数据表,导入成功如下:
把数据表(集合)的权限改为所有用户可读,仅创建者可读写。
我们的列表滑动到最后一个数据时,会执行下面的方法
所以我们的分页加载要在onReachBottom里做。
直接调用数据库每次最多只能加载20条数据
wxml里只做简单的列表数据显示就行了
wxss做个简单的样式
对应的效果如下
wx.showLoading({ title: '加载中...', })
wx.hideLoading()
通过云函数调用数据库,每次最多可以加载100条数据.
今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。
比如我这里有如下的一些数据
我们想实现如下搜索需求
我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。
我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html
代码如下
查询结果如下:
可以看到我们成功的查询到了标题里包含‘小石头的数据’
由于我们要查询多个字段,所以我们这里用到了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) })
注册主要用到了input组件获取用户输入,button组件实现注册功能,注册主要是把账号名和密码添加到云开发数据库。
登录主要是获取用户输入的账号和密码,然后从数据库里读取相应的数据,做账号和密码的比对,如果账号和密码都一样,就可以直接登陆成功
登录成功以后,会调整到首页
这里用了一个阿里巴巴矢量图库:https://www.iconfont.cn
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV})
如下图所示,直接点击开通内容管理(CMS)即可
开通cms需要你云开发里使用按量付费,如果你是第一次开通云开发,记得做如下选择。
如果你已经开通过云开发,记得把付费模式改为按量付费。如果你一开始云开发不是按量付费的模式。
点击完开通以后,会有如下弹窗,直接点击确定即可。不要被付费吓着,官方每月会送我们一定的免费额度的。学习得话基本上够用了。
上面点完确定后,我们只是开启了按量付费功能,因为cms得使用必须要开通按量付费才可以得。所以还要再点一次开通。如下图
点完开通后,会有如下弹窗,直接点击下一步即可。
然后我们需要设置登录内容管理后台得账号和密码,然后点击确定即可
然后我们就等待内容管理功能得开通了,需要等几分钟。
开通成功以后,我们就可以通过下面这个地址进入管理后台了。
后面我们统一称内容管理为cms
上面开通好以后,就可以通过后台地址登录管理后台了。如下
往内容模型里添加数据类型的时候可以选择如下一些类型
单行字符串、多行字符串、数字、布尔值、枚举、日期、日期与时间、文件、图片、多媒体、邮箱地址、电话号码、网址、富文本、markdown、关联、数组、JSON对象
可以对上面创建好的内容模型(集合)进行可视化的管理,这也是cms的优点,可以让我们对数据库进行可视化的管理。
结合cms和云开发数据库,实现一个简单的新闻小程序,有如下功能点
来源地址:https://blog.csdn.net/qq_44625715/article/details/128653047
--结束END--
本文标题: 微信小程序 - 云开发
本文链接: https://www.lsjlt.com/news/394364.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0