微信小程序开发图解案例教程课件 第6章 微信小程序云开发_第1页
微信小程序开发图解案例教程课件 第6章 微信小程序云开发_第2页
微信小程序开发图解案例教程课件 第6章 微信小程序云开发_第3页
微信小程序开发图解案例教程课件 第6章 微信小程序云开发_第4页
微信小程序开发图解案例教程课件 第6章 微信小程序云开发_第5页
已阅读5页,还剩80页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第6章微信小程序云开发为方便开发者开发小程序,微信小程序提供了云开发功能。这对于小程序开发者来说是一个好消息,因为并非所有开发者都精通后端开发语言(如Java、PHP、Python、Go等)、数据库的使用,以及服务器的部署运维。云开发功能让开发者只需要聚焦于小程序开发,后端的业务逻辑和数据处理可以放在云开发上进行,从而降低了小程序开发者的学习成本,大大提高了开发效率。本章导读Thechapter’sintroduction目录导航6.1认识小程序云开发6.3云函数应用6.5云开发数据库6.6沙场大练兵:地址管理云开发6.2云开发控制台的使用6.4云开发文件存储6.7小结6.1.1传统开发和云开发小程序传统开发和云开发的区别如下。在效率上云开发只需关心自身业务逻辑实现,聚焦于小程序开发,效率更高;而传统开发既需要关注小程序开发,又需要提供小程序业务相关接口,效率难以提升。在成本上云开发提供免费的配额,如需要提升配额,可按需付费;而传统开发需要自己购置服务器,自己运维部署。在开发部署速度上云开发可以快速开发、快速发布;而传统开发需要小程序开发者和后端开发者进行前后端联调,然后才能发布上线。在生态上云开发与微信使用私有协议天然鉴权,原生集成微信SDK;而传统开发不具备这样的优势,需要自己实现产品相关逻辑。在运维上云开发底层上由腾讯云提供专业支持;而传统开发需要自行维护系统,学习成本高,运维难度大。1.小程序传统开发和云开发6.1.1传统开发和云开发2.云开发优势不需要管理证书、签名、密钥,可直接调用微信API;复用微信私有协议及链路,保证业务安全性。免登录、免鉴权调用微信开放服务支持环境共享,一个后端环境中可开发多个小程序、公众号、网页等,便捷复用业务代码与数据,进一步提高了开发效率。统一开发多端应用支持按量计费模式,后端资源根据业务流量自动扩容,先使用后付费,无须为闲置资源付费,显著降低了成本。按量计费,成本更低只需使用平台提供的各项能力,无须搭建服务器,即可快速开发业务。无须搭建服务器6.1.2创建小程序云开发项目下面我们一起创建一个小程序云开发项目(实例位置:源码\第6章\clouddev)。01OPTION创建一个“clouddev”云开发项目,AppID不能使用测试号,如图所示。创建云开发项目6.1.2创建小程序云开发项目创建测试环境dev02OPTION创建clouddev云开发项目后,在工具栏区域中单击“云开发”按钮,会进入“创建新环境”界面。新用户有一个月的免费体验期。环境名称只能包含数字、小写字母和-;只能以小写字母开头,最多包含20个字符。比如可以创建测试环境“dev”、测试环境“test”、线上环境“release”。创建测试环境dev如图所示。6.1.2创建小程序云开发项目微信开发者工具窗口创建测试环境dev之后,回到微信开发者工具窗口,可以看到云开发示例、云函数开发、小程序开发区域,如右图所示。03OPTION04OPTION云开发可以配置多个环境,在cloudfunctions文件夹上单击鼠标右键,在弹出的快捷菜单里选择“当前环境:dev”→“dev”,如下图所示。选择环境目录导航6.1认识小程序云开发6.3云函数应用6.5云开发数据库6.6沙场大练兵:地址管理云开发6.2云开发控制台的使用6.4云开发文件存储6.7小结6.2.1运营分析运营分析包含以下3方面内容。用户访问可以查看今日活跃用户、本周活跃用户、本月活跃用户,同时可以查看访问用户列表。当用户授权后,可以查看用户头像。监控图表可以查看数据库监控,包含数据库读取次数、数据库写入次数;可以查看存储监控,包含存储上传调用次数、存储下载调用次数、CDN流量、CDN回源流量。资源使用可以查看数据库容量、本日数据库读请求数、存储容量、本月CDN流量、本月云函数资源使用量。6.2.2数据库微信小程序云开发提供了一个JSON数据库,数据库中的每条记录都是一个JSON格式的对象。一个数据库可以有多个集合(相当于关系数据库中的表),一个集合可看作一个JSON数组,数组中的每个对象就是一条记录,记录的格式是JSON。JSON数据库如下图所示。6.2.2数据库12单击“集合名称”区域的+号可以创建新的集合。输入集合的名称。集合名称支持大小写英文字母、数字、-和_。添加集合记录。首先要选中需要添加记录的集合,然后单击“添加记录”按钮。文档ID可以自动生成,也可以自己填写。再输入需要添加的字段,比如学生的姓名字段name,字段类型有string、number、boolean、null、array、object、date和geopoint,字段类型如右图所示。字段类型3数据库支持导入集合和导出集合,导出集合支持JSON格式和CSV格式。6.2.2数据库索引管理可以用来提高数据查询效率。按业务查询的字段可以创建唯一索引和非唯一索引,同时可以指定升序、降序,如下左图所示。45数据库权限设置设置分为5种:“所有用户可读,仅创建者可读写”“仅创建者可读写”“所有用户可读”“所有用户不可读写”和“自定义安全规则”,如下右图所示。索引管理数据库权限设置6.2.3存储“存储”页面的“存储管理”选项卡在云开发控制台的“存储”页面可以查看已上传的文件,还可以进行上传文件或文件夹、新建文件夹、删除文件等操作。“存储”页面的“存储管理”选项卡如下图所示。1.存储管理6.2.3存储“存储”页面的“存储管理”选项卡针对文件可以进行存储权限管理,云开发控制台共提供了5种文件存储权限,分别是“所有用户可读,仅创建者可读写”“仅创建者可读写”“所有用户可读”“所有用户不可读写”和“自定义安全规则”。“存储”页面“存储权限”选项卡如右图所示。2.存储权限6.2.3存储“存储”页面“存储配置”选项卡存储配置用来配置文件缓存,比如可以按文件扩展名(如.jpg、.png、.css)进行配置,也可以按指定文件或者指定目录进行配置,这样可以加快文件的访问速度。如下图所示。3.存储配置图片处理可用于快速设置图片的裁剪、缩放等样式,在上传、下载图片时进行转换操作。4.图片处理6.2.4云函数云函数列表在云开发控制台的“云函数”界面中可以查看云函数列表,如图所示。微信小程序创建的云函数,可以上传部署到云端,然后在云函数列表里显示。同时可以在云开发控制台创建云函数,进行本地调试、云端测试、版本与配置、删除等操作。6.2.5设置“设置”页面在“设置”页面里可以创建新环境、查看已有的环境、加入告警群等,如下图所示。目录导航6.1认识小程序云开发6.3云函数应用6.5云开发数据库6.6沙场大练兵:地址管理云开发6.2云开发控制台的使用6.4云开发文件存储6.7小结6.3.1云函数介绍微信小程序使用云开发创建项目后,会生成云函数目录区域,从中可以看到cloudfunctions是云函数的根目录。在项目根目录project.config.json文件中配置cloudfunctionRoot

字段指向的文件目录作为云函数的本地根目录。云函数根目录的图标会变成云目录图标。云函数根目录下的第一级目录(云函数目录)名称与云函数名称相同。如果对应的线上环境存在该云函数,则会用一个特殊的图标在文件夹上标明,如图所示。云函数目录区域6.3.1云函数介绍在云函数根目录或者云函数目录上,通过快捷菜单可以完成以下操作。查看当前环境,切换环境。当选定环境之后,云函数的操作都是基于此环境进行。新建Node.js云函数。使用开发者工具在本地创建云函数目录和3个文件(index.js、package.json和config.json),同时在线上环境中创建出对应的云函数。下载云函数。在一个云函数目录上单击鼠标右键可以在弹出的快捷菜单中选择下载该云函数,云函数代码会被下载到指定目录。同步云函数列表。将线上环境中的云函数列表同步到本地。开发者工具会根据云函数的名字,在本地创建出对应的云函数目录。上传并部署。在云函数目录上单击鼠标右键,可以将云函数整体打包上传并部署到线上环境中。有两种方式:云端安装依赖(不上传nodemodules)和所有文件(上传node_modules文件夹第三方依赖库)。6.3.2云函数的使用下面我们来创建一个云函数,用于两个数相加,并且在小程序端进行调用。01OPTION在云函数根目录上单击鼠标右键,在弹出的快捷菜单中选择创建一个新的Node.js云函数,将该云函数命名为“add”。修改add云函数目录下的index.js文件。代码如下//云函数入口文件constcloud=require('wx-server-sdk')//使用当前云环境cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext()return{event,openid:wxContext.OPENID,appid:wxContext.APPID,unionid:wxContext.UNIONID,}}6.3.2云函数的使用02OPTION在小程序端业务逻辑处理文件里,调用云函数add。需要使用wx.cloud.callFunction来调用云函数。示例代码如下Page({onLoad:function(){wx.cloud.callFunction({//云函数名称

name:'add',//传给云函数的参数

data:{a:1,b:2,},success:function(res){console.log(res)console.log(res.result.sum)},fail:function(res){console.log(res)console.error}})}})6.3.2云函数的使用03OPTION调用云函数前,需要先将add云函数部署到云端。在add云函数目录上单击鼠标右键,选择对应的选项,如下图所示,将云函数整体打包上传并部署到线上环境中。04OPTION云函数的调用支持Promise风格返回值形式。示例代码如下:Page({onLoad:function(){wx.cloud.callFunction({//云函数名称

name:'add',//传给云函数的参数

data:{a:1,b:2,}}).then(res=>{console.log(res.result.sum)}).catch(console.error)}})创建并部署add云函数6.3.3Promise风格Promise对象常用方法如下。(1)then()。语法:Ptotype.then(onFulfilled,onRejected)。.then()接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败)。.then()返回一个新的Promise实例,所以它可以链式调用。如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行;如果返回其他任何值,则会立即执行下一级.then()。(2)catch()方法。语法:Ptotype.catch(onRejected)。.catch()用于指定发生错误时的回调函数,自动捕获内部异常,并交给rejected响应函数处理。6.3.3Promise风格示例代码如下。(3).resolve()方法。语法:Promise.resolve(value)。.resolve()的作用是将Promise对象的状态从“未完成”变为“已成功”(即从pending变为fulfilled)。在异步操作成功时调用,并将异步操作的结果作为参数传递出去。示例代码如下:promise.then(function(data){console.log('success');}).catch(function(error){console.log('error',error);});/*******等同于*******/promise.then(function(data){console.log('success');}).then(undefined,function(error){console.log('error',error);});Promise.resolve('Success');/*******等同于*******/newPromise(function(resolve){resolve('Success');});6.3.3Promise风格(4).reject()方法。语法:Promise.reject(reason)。reject方法的作用是将Promise对象的状态从“未完成”变为“失败”(即从pending变为rejected)。在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去。示例代码如下。Promise.reject(newError('error'));/*******等同于*******/newPromise(function(resolve,reject){reject(newError('error'));});6.3.3Promise风格Promise对象可以用来返回异步结果。01OPTION在云函数根目录上单击鼠标右键,选择创建一个新的Node.js云函数,将该云函数命名为“sum”。修改sum云函数目录下的index.js文件。代码如下://云函数入口文件constcloud=require('wx-server-sdk')cloud.init()//云函数入口函数exports.main=async(event,context)=>{returnnewPromise((resolve,reject)=>{//在3秒后返回结果给调用方(小程序/其他云函数)

setTimeout(()=>{resolve(event.a+event.b)},3000)})}6.3.3Promise风格02OPTION在小程序业务逻辑处理文件里调用云函数sum,需要使用wx.cloud.callFunction来调用云函数。示例代码如下。Page({onLoad:function(){wx.cloud.callFunction({//环境IDconfig:{env:"dev-3gamfbff1a0e0796"},//云函数名称name:'sum',//传给云函数的参数data:{a:1,

b:2,}}).then(res=>{console.log(res)}).catch(console.error)}})6.3.4npm的安装与使用01OPTION在Node.js官方网站下载相应版本的Node的镜像或者安装包,比如下载Windows64位版本镜像node-v12.16.1-x64.msi,然后一步一步安装。在Windows上安装时务必选择全部组件,包括勾选“AddtoPath”。02OPTION在Windows环境下,打开命令提示符,然后输入node-v命令,如果安装正常,可以看到Node的安装版本。Node安装完成后,npm也顺带安装完成,可以通过npm-v命令来查看版本。如右图所示。03OPTION在小程序根目录(miniprogram)打开命令符窗口,使用npm来安装一个第三方vantui库。执行如下命令。npmivant-weapp-S--production查看npm的版本04OPTION使用npm安装完vantui第三方依赖库后,在命令提示符窗口中进行初始化操作。执行如下命令。npminit-y6.3.4npm的安装与使用05OPTION在“开发者工具”→“工具”下拉列表里选择“构建npm”。构建完成后根目录(miniprogram)下会显示miniprogram_npm文件夹,同时可以看到vantui库vant-weapp。06OPTION引入vantui库之后,可以在小程序页面上使用vantui库。在.JSON文件中引用需要使用的组件如下。{"usingComponents":{"van-button":"vant-weapp/button"}}在.WXML文件中直接使用如下组件。<van-buttontype="primary">主要按钮</van-button>6.3.5云函数本地调试01OPTION在云函数上单击鼠标右键,在弹出的快捷菜单里选择“开启云函数本地调试”命令,如图所示。02OPTION在“云函数本地调试”窗口里,单击“add”云函数,接着勾选“开启本地调试”复选框。有可能会碰到开启本地调试失败的错误,如图所示。开启本地调试失败选择“开启云函数本地调试”命令6.3.5云函数本地调试解决办法:在“add”云函数目录下,打开命令符操作窗口,执行如下命令。npminstall--savewx-server-sdk@latest在使用npminstall安装第三方依赖包时,会碰到类似如下网络错误。npminstallthisisaproblemrelatedtonetworkconnectivity解决办法:将代理设置为空,然后重新设置。npmconfiggetproxynpmconfiggethttps-proxy如果返回值不为null,将其设置为null:npmconfigsetproxynullnpmconfigsethttps-proxynullnpmconfigsetregistry/6.3.5云函数本地调试03OPTIONnpminstall--savewx-server-sdk@latest执行成功后,单击需要调试的云函数“add”并勾选“开启本地调试”复选框,会看到用于输出云函数本地调试信息和输入调用云函数参数的区域,如图所示。“云函数本地调试”窗口6.3.6云函数定时器

云函数提供了定时器配置。如果云函数需要定时执行,需要在云函数目录下新建文件config.json,内容如下。{//triggers字段是触发器数组,目前仅支持一个触发器,即数组只能添加一个,不可添加多个"triggers":[{//name为触发器的名称"name":"myTrigger",//type为触发器类型,目前仅支持定时触发器timer"type":"timer",//config为触发器配置。在定时触发器下,config格式为cron表达式"config":"0021***"}]}6.3.6云函数定时器1245定时触发器名称(name):最大支持60个字符,支持a~z、A~Z、0~9、-和_。必须以字母开头,且一个函数下不支持同名的多个定时触发器。触发器类型(type):目前仅支持定时触发器timer。corn表达式同时支持通配符配置。,(逗号):代表取用逗号隔开的字符的并集。例如:在“小时”字段中1,2,3表示1点、2点和3点。-(破折号):包含指定范围的所有值。例如:在“日”字段中,1-15包含指定月份的1号到15号。*(星号):表示所有值。在“小时”字段中,*表示每个小时。/(正斜杠):指定增量。在“分钟”字段中,输入1/10以指定从第1分钟开始,每隔10分钟重复。示例配置。*/5******:表示每5s触发一次。0021***:表示在每月的1日的凌晨2点触发。0010,14,16****:表示在每天上午10点、下午2点、4点触发。0*/309-17****:表示在每天上午9点到下午5点内每半小时触发。3定时触发器触发周期(config):指定的函数触发时间。目录导航6.1认识小程序云开发6.3云函数应用6.5云开发数据库6.6沙场大练兵:地址管理云开发6.2云开发控制台的使用6.4云开发文件存储6.7小结6.4.1wx.clouduploadFile文件上传API

uploadFile将本地资源上传至云存储空间,如果上传至同一路径则是覆盖写。参数cloudPath,为云存储路径,必传参数;参数filePath,为要上传文件资源的路径,必传参数;参数config,为配置env使用的环境ID,填写后忽略init指定的环境,非必传参数。文件上传后可以在云开发控制台存储模块里查看上传的文件。示例代码如下Page({onLoad:function(){//选择图片

wx.chooseImage({count:1,sizeType:['compressed'],sourceType:['album','camera'],success:function(res){constfilePath=res.tempFilePaths[0]

//上传图片

constcloudPath='my-image'+filePath.match(/\.[^.]+?$/)[0]6.4.1wx.clouduploadFile文件上传API

wx.cloud.uploadFile({cloudPath,filePath,success:res=>{console.log('[上传文件]成功:',res)app.globalData.fileID=res.fileIDapp.globalData.cloudPath=cloudPathapp.globalData.imagePath=filePath},fail:e=>{console.error('[上传文件]失败:',e)}})},fail:e=>{console.error(e)}})}})6.4.2wx.clouddownloadFile文件下载API

downloadFile从云存储空间下载文件。参数fileID,为云文件ID,必传参数;参数config,为配置env使用的环境ID,填写后忽略init指定的环境,非必传参数。示例代码如下。Page({onLoad:function(){wx.cloud.downloadFile({fileID:'cloud://test-wiswd.7465-test-wiswd-1253222435/my-image.jpg',success:res=>{console.log(res.tempFilePath)},fail:err=>{console.log(err)}})}})6.4.3

wx.clouddeleteFile文件删除APIdeleteFile从云存储空间删除文件,一次最多删除50个。参数fileList:string[]表示云文件ID字符串数组。示例代码如下。Page({onLoad:function(){wx.cloud.deleteFile({fileList:['cloud://test-wiswd.7465-test-wiswd-1253222435/my-image.jpg'],success:res=>{console.log(res.fileList)},fail:err=>{console.log(err)}})}})6.4.4

wx.cloudgetTempFileURL获取文件临时路径API

getTempFileURL用来获取文件临时路径,用云文件ID换取真实链接。公有的文件获取的链接不会过期,私有的文件获取的链接有10分钟有效期。一次最多获取50个文件链接。参数fileList:string[]表示云文件ID字符串数组。示例代码如下。Page({onLoad:function(){wx.cloud.getTempFileURL({fileList:['cloud://test-wiswd.7465-test-wiswd-1253222435/my-image.jpg'],success:res=>{console.log(res.fileList)},fail:err=>{console.log(err)}})}})目录导航6.1认识小程序云开发6.3云函数应用6.5云开发数据库6.6沙场大练兵:地址管理云开发6.2云开发控制台的使用6.4云开发文件存储6.7小结6.5.1数据库介绍JSON数据库提供了数据库database、集合collection(相当于表table)、记录record/doc(相当于行row)、字段field(相当于表列column)。

云开发数据库提供了数据类型:String(字符串)、Number(数字)、Object(对象)、Array(数组)、Bool(布尔值)、Date(时间,精确到毫秒)、Geo(多种地理位置类型)、Null(占位符,字段存在但是值为空)。示例代码如下。[{"_id":"Wzh76lk5_O_dt0vO","title":"微信小程序图解案例教程","name":"小刚","characters":["组件","API","案例"],"publishInfo":{"year":2020,"country":"中国"}},{"_id":"Wzia0lk5_O_dt0vR","_openid":"ohl4L0Rnhq7vmmbT_DaNQa4ePaz0","title":"微信小程序开发全案精讲","author":"小刚","characters":["仿酷狗音乐小程序","仿京东小程序","仿猫眼电影小程序"],"publishInfo":{"year":2019,"country":"中国"}}]6.5.2数据库初始化constdb=wx.cloud.database()

使用数据库API进行数据操作前,需要先获取数据库的实例引用。

微信小程序可以调用获取默认环境的数据库的引用。constdb=wx.cloud.database({env:'dev-3gamfbff1a0e0796'})

微信小程序也可以指定环境来创建数据库的实例引用,通过env字段指定要使用的云环境ID。以下代码假设环境名为“dev”,它用作测试环境。6.5.3数据新增操作Page({onAdd:function(){constdb=wx.cloud.database()db.collection('counters').add({data:{count:1},success:res=>{wx.showToast({title:'新增记录成功',})console.log('[数据库][新增记录]成功')},

通过调用add方法,可以向集合counters中插入一条数据。集合counters需要在云开发控制台里创建。示例代码如下fail:err=>{wx.showToast({icon:'none',title:'新增记录失败'})console.error('[数据库][新增记录]失败:',err)}})}})6.5.4数据查询操作Page({onQuery:function(){constdb=wx.cloud.database()//查询当前用户所有的countersdb.collection('counters').get({success:res=>{console.log('[数据库][查询记录]成功:',res)},fail:err=>{wx.showToast({icon:'none',title:'查询记录失败'})console.error('[数据库][查询记录]失败:',err)}})}})通过调用get方法,可以获取集合counters中的一条数据或者多条数据。示例代码如下。6.5.4数据查询操作Page({onQuery:function(){constdb=wx.cloud.database()//查询当前用户所有的countersdb.collection('counters').where({name:'小刚'}).get({success:res=>{console.log('[数据库][查询记录]成功:',res)},fail:err=>{console.error('[数据库][查询记录]失败:',err)}})}})查询数据时,可以通过调用where方法设定条件来进行查询。示例代码如下6.5.4数据查询操作Page({onQuery:function(){constdb=wx.cloud.database()//分页查询用户数据

db.collection('counters').field({description:true,done:true,progress:true,}).where({name:'小刚'}).orderBy('id','asc').skip(10).limit(20).get({success:res=>{console.log('[数据库][查询记录]成功:',res)},fail:err=>{console.error('[数据库][查询记录]失败:',err)}})}})

可通过组合使用skip和limit方法来实现分页功能,skip是指定那条数据开始查询,limit是指定查询条数。示例代码如下。6.5.5数据修改操作Page({onUpdate:function(){constdb=wx.cloud.database({env:'dev-3gamfbff1a0e0796'})db.collection('counters').doc('10').update({data:{count:2},success:res=>{console.log('[数据库][更新记录]成功:',res)},fail:err=>{icon:'none',console.error('[数据库][更新记录]失败:',err)}})}})01OPTION通过调用update方法更新指定字段的数据值。示例代码如下。6.5.5数据修改操作Page({onUpdateSet:function(){constdb=wx.cloud.database({env:'dev-3gamfbff1a0e0796'})db.collection('counters').doc('10').set({data:{description:"learnclouddatabase",due:newDate("2018-09-01"),tags:["cloud","database"],style:{color:"skyblue"},location:newdb.Geo.Point(113,23),done:false}})}})02OPTION通过调用set方法更新整条记录的数据值。示例代码如下。代码中,通过调用doc方法获取集合中指定记录的引用。doc方法接收id参数,它指定需引用的记录的id,并根据这个值找到对应记录,然后进行修改操作。6.5.6数据删除操作Page({onDelete:function(){constdb=wx.cloud.database()db.collection('counters').doc('10').remove({success:function(res){console.log(res.data)}})}})通过调用remove方法,可以删除一条数据记录。示例代码如下。Page({onDeleteWhere:function(){constdb=wx.cloud.database({env:'dev-3gamfbff1a0e0796'})db.collection('counters').where({done:true}).remove({通过调用where方法,可以设定条件同时删除多条数据记录。示例代码如下。01OPTION02OPTION

success:function(res){console.log(res.data)}})}})6.5.7数据库操作符Page({onCommand:function(){constdb=wx.cloud.database({env:'dev-3gamfbff1a0e0796'})const_=manddb.collection('counters').where({//gt方法用于指定一个“大于”条件,此处_.gt(30)是一个“大于30”的条件progress:_.gt(30)}).get({success:function(res){console.log(res.data)}})}})

数据库操作符用来处理查询更新操作指令,比如eq为等于、gt为大于等于。通过mand获取实例。示例代码如下。6.5.7数据库操作符数据库操作符提供如下方法。Command.addToSet(value:any|Object):数组更新操作符。Command.all(values:any[]):数组查询操作符。Command.and(expressions:any[]):查询操作符。Command.bit(object:Object):更新操作符。Command.elemMatch(condition:Object|Command):用于数组字段的查询筛选条件。Command.eq(value:any):查询筛选条件。Command.exists(value:boolean):判断字段是否存在。Command.expr(aggregateExpression:Expression):查询操作符,用于在查询语句中使用聚合表达式。该方法接收一个参数,该参数必须为聚合表达式。Command.geoIntersects(options:Object):找出给定的地理位置图形相交的记录。Command.geoNear(options:Object):按从近到远的顺序,找出字段值在给定点的附近的记录。Command.geoWithin(options:Object):找出字段值在指定区域内的记录,无排序。指定的区域必须是多边形(Polygon)或多边形集合(MultiPolygon)。6.5.7数据库操作符Command.gt(value:any):查询筛选操作符,表示需大于指定值。可以传入Date对象用于进行日期比较。Command.gte(value:any):查询筛选操作符,表示需大于或等于指定值。可以传入Date对象用于进行日期比较。Command.in(value:any[]):查询筛选操作符,表示要求值在给定的数组内。Command.inc(value:number):更新操作符。原子操作。用于指示字段自增。Command.lt(value:any):查询筛选操作符。表示需小于指定值。可以传入Date对象用于进行日期比较。Command.lte(value:any):查询筛选操作符,表示需小于或等于指定值。可以传入Date对象用于进行日期比较。Command.max(value:any):更新操作符。给定一个值,只有该值大于字段当前值才进行更新。Command.min(value:any):更新操作符。给定一个值,只有该值小于字段当前值才进行更新。Command.mod(divisor:number,remainder:number):查询筛选操作符。Command.mul(value:number):更新操作符。原子操作。用于指示字段自乘某个值。Command.neq(value:any):查询筛选条件,表示字段不等于某个值。Command.nin(value:any[]):查询筛选操作符。表示要求值不在给定的数组内。Command.nor(expressions:any[]):查询操作符。用于表示逻辑“都不”的关系,表示需不满足指定的所有条件。如果记录中没有对应的字段,则默认满足条件。6.5.7数据库操作符Command.not(command:Command):查询操作符。用于表示逻辑“非”的关系,表示需不满足指定的条件。Command.or(expressions:any[]):查询操作符。用于表示逻辑“或”的关系,表示需同时满足多个查询筛选条件。“或”指令有两种用法,一是可以进行字段值的“或”操作;二是也可以进行跨字段的“或”操作。Command.pop():数组更新操作符。对一个值为数组的字段,将数组尾部元素删除。Command.pull(value:any):数组更新操作符。Command.pullAll(value:any):数组更新操作符。Command.push(values:Object):数组更新操作符。Command.remove():更新操作符,用于表示删除某个字段。Command.rename(value:string):更新操作符。字段重命名。Command.set(value:any):更新操作符。用于设定字段等于指定值。Command.shift():数组更新操作符。对一个值为数组的字段,将数组头部元素删除。Command.size(value:string):更新操作符。用于数组字段的查询筛选条件。要求数组长度为给定值。Command.unshift(values:any[]):数组更新操作符。对一个值为数组的字段,往数组头部添加一个或多个值。若字段原为空,则创建该字段并设数组为传入值。目录导航6.1认识小程序云开发6.3云函数应用6.5云开发数据库6.6沙场大练兵:地址管理云开发6.2云开发控制台的使用6.4云开发文件存储6.7小结6.6沙场大练兵:地址管理云开发地址管理是我们经常会用到的功能,例如在购买商品的时候,需要填写收货地址。可以查看自己的地址列表、新增地址、编辑地址及删除地址,如图所示。地址列表页面新增地址页面编辑地址页面6.6.1数据库设计地址管理需要数据存储,在云开发控制台上新建集合“address”,字段属性如表所示。字段类型说明_idstring主键id,使用系统自动生成的ID_openidstring微信用户身份的唯一标识personNamestring姓名addressstring详细地址citystring省市县三级,例如北京市、北京市、西城区contactNumberstring联系电话gendernumber性别:0表示男,1表示女houseNumberstring门牌号createTimedate创建时间updateTimedate修改时间6.6.2地址列表及删除地址云开发(1)创建地址管理云开发项目“addressManage”(实例位置:源码\第6章\addressManage),如图所示。创建项目6.6.2地址列表及删除地址云开发"pages/address/address","pages/addressAdd/addressAdd",(2)在app.json文件里配置“address”地址列表目录。代码如下。{"navigationBarTitleText":"地址管理"}(3)在pages/address/address/address.json文件里配置导航栏标题。代码如下。//app.jsApp({onLaunch:function(){if(!wx.cloud){console.error('请使用2.2.3版本或以上的基础库以使用云能力');}else{wx.cloud.init({//env参数说明:(4)在app.js里配置云开发环境ID。示例代码如下。6.6.2地址列表及删除地址云开发//env参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环

境的资源//此处请输入环境ID,环境ID可用于打开云开发控制台进行查看//如不输入则使用默认环境(第一个创建的环境)env:'dev-3gamfbff1a0e0796',traceUser:true,});}this.globalData={};}});(5)在pages/address/address/address.wxml文件里进行页面布局设计。示例代码如下。<viewclass="content"><viewclass="hr"></view><blockwx:for="{{addresses}}"><viewclass="item"><viewclass="info{{flag==index?'select':'normal'}}"id="{{index}}"data-id="{{item.id}}"bindtap="switchNav">6.6.2地址列表及删除地址云开发<viewclass="name"><text>{{item.personName}}</text><text>{{item.contactNumber}}</text></view><viewclass="address"><text>{{item.city}}</text><text>{{item.address}}</text><text>{{item.houseNumber}}</text></view></view><viewclass="opr"bindtap='editAddress'id="{{item._id}}">

编辑</view><viewclass="opr"bindtap='deleteAddress'id="{{item._id}}">

删除</view></view>

<viewclass="line"></view></block><viewclass="bg"><viewclass="newAddress"bindtap="addAddress">

+新增地址</view></view></view>6.6.2地址列表及删除地址云开发.content{font-family:"MicrosoftYaHei";height:700px;background-color:#F9F9F8;}.hr{height:20px;}.item{background-color:#ffffff;display:flex;flex-direction:row;height:75px;padding:10px;}.info{width:80%;line-height:35px;border-right:1pxsolid#f2f2f2;}(6)在pages/address/address/address.wxss文件里进行页面布局样式渲染。示例代码如下。.name{margin-left:20px;font-size:15px;color:#999999;}.nametext{margin-right:10px;}.address{margin-left:20px;font-size:13px;color:#999999;line-height:20px;}.addresstext{margin-right:10px;}.opr{line-height:85px;6.6.2地址列表及删除地址云开发width:10%;text-align:center;font-size:13px;color:blue;margin-left:5px;text-decoration:underline;}.line{height:1px;width:100%;background-color:#cccccc;opacity:0.2;}.select{border-left:5pxsolid#ff0000;}.bg{background-color:#ffffff;height:55px;border:1pxsolid#f2f2f2;position:fixed;bottom:0px;width:100%;}.newAddress{border:1pxsolid#f2f2f2;width:220px;height:35px;background-color:#ff0000;line-height:35px;text-align:center;border-radius:5px;margin:0auto;margin-top:10px;font-size:16px;color:#ffffff;}6.6.2地址列表及删除地址云开发varapp=getApp();Page({data:{flag:0,addresses:[]},onLoad:function(e){this.loadAddress();},loadAddress:function(){ //加载地址列表wx.cloud.callFunction({ //调用云函数name:'getAddresses',success:res=>{console.log('[云函数][getAddresses]地址列表:',res);varaddresses=res.result.data;this.setData({addresses:addresses});},(7)在pages/address/address/address.js文件里添加如下代码,用来实现地址列表获取、新增地址页面跳转、编辑地址页面跳转、删除地址及选中地址。6.6.2地址列表及删除地址云开发fail:err=>{console.error('[云函数][getAddresses]调用失败',err);}})},addAddress:function(e){ //新增地址页面跳转wx.navigateTo({url:'../addressAdd/addressAdd'})},editAddress:function(e){ //编辑地址页面跳转wx.navigateTo({url:'../addressAdd/addressAdd?addressId='+e.currentTarget.id})},deleteAddress:function(e){ //删除地址varthat=this;wx.cloud.callFunction({ //调用云函数name:'deleteAddress',data:{id:e.currentTarget.id},6.6.2地址列表及删除地址云开发success:res=>{console.log('[云函数][deleteAddress]地址删除返回信息:',res);varcount=res.result.stats.removed;if(count==1){wx.showToast({title:'成功',icon:'success',duration:2000,success:function(){that.loadAddress();}})}},fail:err=>{console.error('[云函数][deleteAddress]调用失败',err);}})},switchNav:function(e){ //选中地址varindex=e.currentTarget.id;this.setData({flag:index});}})6.6.2地址列表及删除地址云开发//云函数入口文件constcloud=require('wx-server-sdk')//使用指定云环境cloud.init({env:'dev-3gamfbff1a0e0796'})constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();varresult=awaitdb.collection('address').where({_openid:wxContext.OPENID //输入当前用户openid}).get();returnresult;}(8)在cloudfunctions目录上单击鼠标右键,在弹出的快捷菜单中选择“新建Node.js云函数”,创建获取地址的云函数getAddresses。在index.js文件中编写获取地址逻辑。示例代码如下。6.6.2地址列表及删除地址云开发//云函数入口文件constcloud=require('wx-server-sdk')//使用指定云环境cloud.init({env:'dev-3gamfbff1a0e0796'})constdb=cloud.database()//云函数入口函数exports.main=async(event,context)=>{varid=event.id;console.log(id);varresult=db.collection('address').doc(id).remove();returnresult;}(9)在cloudfunctions目录上单击鼠标右键,在弹出的快捷菜单中选择“新建Node.js云函数”,创建删除地址的云函数deleteAddress。在index.js文件中编写删除地址逻辑。示例代码如下。6.6.3新增地址及编辑地址云开发地址管理可以新增地址及对已有的地址进行编辑。下面我们一起进行地址新增和编辑的云开发。6.6.3新增地址及编辑地址云开发"pages/addressAdd/addressAdd",(1)在app.json文件里配置addressAdd,新增和编辑地址目录。新增和编辑可以用一个页面进行控制显示。代码如下。{"navigationBarTitleText":"地址管理"}(2)在pages/addressAdd/addressAdd/addressAdd.json文件里配置导航栏标题。代码如下。<viewclass="content"><viewclass="hr"></view><viewclass="bg"><formbindsubmit="formSubmit"bindreset="formReset"><viewclass="item"><viewclass="name">联系人</view><viewclass="value"><inputtype="text"placeholder="收货人姓名"placeholder-class="holder"name="userName"value="{{userName}}"/></view>(3)在pages/addressAdd/addressAdd/addressAdd.wxml文件里进行页面布局设计。代码如下。6.6.3新增地址及编辑地址云开发</view><viewclass="line"></view><viewclass="item"><viewclass="name">性别</view><viewclass="value"><radio-groupclass="radin-group"bindchange="radioChange"name="sex"><radiovalue="0"checked="{{sex==0}}">先生</radio><radiovalue="1"checked="{{sex==1}}">女士</radio></radio-group></view></view><viewclass="line"></view><viewclass="item"><viewclass="name">手机号码</view><viewclass="val

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论