【微信小程序云开发】从陌生到熟悉

前言

微信小程序在9月10号正式上线了云开发的功能,弱化后端和运维概念,以前开发一个小程序需要申请一个小程序,准备一个https的域名,开发需要一个前端一个服务端,有了云开发只有申请一个小程序,一个前端就能搞定,真的是零成本。

云开发三大基础能力

  • 云函数:运行在微信服务器上的函数,处理微信相关操作有天然优势,如获得用户信息异常方便(以前服务端解析很麻烦)
  • 数据库:一个小程序可以直接操作的JSON数据库,可以直接操作数据库,不在需要服务端了。
  • 存储:用来存储文件和图片

阅读本文之前最好对微信小程序有基本的了解,这个能够更加方便理解,如果能有一点点数据库知识那就更好了,如果没有数据库知识也不用担心,因为真的很简单

相关的代码地址 https://github.com/AmosXu/library-mini-program

第一个云开发小程序

新建小程序,勾选云开发快速启动模板,注意无游客模式,也不能用测试号

创建成功后,我们看到的目录如下图,project.config.json 中增加了字段 cloudfunctionRoot 用于指定存放云函数的目录,如图中的cloudfunctions

右键点击“创建并部署”,跟着提示一步步操作,把函数部署到微信的服务器上去,这时候快速启动项目就可以启动运行了,跟着项目一步一步可以体验一下小程序云开发的功能,这里就不详细介绍了。

正式学习操作数据库

1.初始化

在小程序端开始使用云能力前,需先调用 wx.cloud.init 方法完成云能力初始化,如果要使用云能力,通常我们在小程序初始化时即调用这个方法。

//app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error(‘请使用 2.2.3 或以上的基础库以使用云能力‘)
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }
  }
})

wx.cloud.init详情文档请点击

2.在数据库中新建book表

打开“云开发控制台” -> “数据库” -> “添加集合”, 输入表名“book”就行

3.增加书籍

增加一本名为“JavaScript高级程序设计(第3版)”书

const db = wx.cloud.database()
db.collection(‘book‘).add({
  data: {
    author: "[美] Nicholas C. Zakas",
    pubdate: "2012-3-29",
    image: "https://img3.doubanio.com/view/subject/m/public/s8958650.jpg",
    publisher: "人民邮电出版社",
    title: "JavaScript高级程序设计(第3版)",
    summary: "本书是JavaScript 超级畅销书的最新版。ECMAScript 5 和HTML5 在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript..."
    price: "99.00元"
  }
}).then(() => {
  wx.showToast({
    title: "添加成功"
  })
})

直接调用add方法,在add方法中的data参数中填写我们的参数即可,在数据中新增一条数据,其中_id为数据自动分配的id,_openid为操作者的openId

4.查询数据

获得_id为“W6G5GDPMTZMHGaOG”的书籍详情

const db = wx.cloud.database()
db.collection(‘book‘).doc(‘W6G5GDPMTZMHGaOG‘).get().then(res => {
  console.log(res.data)
})

当已知_Id的情况下,直接用doc() + get()就能获得到书籍详情

获得书名为“JavaScript高级程序设计(第3版)”的书籍详情

const db = wx.cloud.database()
db.collection(‘book‘).where({
  "title": "JavaScript高级程序设计(第3版)"
}).get().then(res => {
  console.log(res.data)
})

_id以为的查询都用where() + get()进行查询,和其他的数据库非常像,返回的是一个数组

分页获得书籍列表,这应该是前端比较常见的一个需求

db.collection(‘book‘)
  .skip(10) // 跳过结果集中的前 10 条,从第 11 条开始返回
  .limit(10) // 限制返回数量为 10 条
  .get()
  .then(res => {
    console.log(res.data)
  })

skip()指定序列后的结果开始返回,limit()指定查询结果集数量上限,如果没有指定 skip,则默认从第 0 条记录开始取,如果没有指定 limit,则默认最多取 20 条记录

5.更新数据

将_id为“W6G5GDPMTZMHGaOG”的书价格改为“88.00元”

db.collection(‘book‘).doc(‘W6G5GDPMTZMHGaOG‘).update({
  // data 传入需要局部更新的数据
  data: {
    // 表示将价格 字段置为 88
    price: "88.00元"
  }
}).then(res => {
  console.log(res)
})

doc()传入_id update()更新单条数据,也可以用where() + update()更新多条数据

接下来介绍set()方法,指定_id,当存在时就更新数据,不存在就增加数据

const db = wx.cloud.database()
db.collection(‘book‘).doc(‘W6G5GDPMTZMHGaOG‘).set({
  data: {
    author: "[美] Nicholas C. Zakas",
    pubdate: "2012-3-29",
    image: "https://img3.doubanio.com/view/subject/m/public/s8958650.jpg",
    publisher: "人民邮电出版社",
    title: "JavaScript高级程序设计(第3版)",
    summary: "本书是JavaScript 超级畅销书的最新版。ECMAScript 5 和HTML5 在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript...",
    price: "99.00元"
  }
}).then(res => {
  console.log(res)
})

6.删除数据

删除_id为“W6G5GDPMTZMHGaOG”的书

db.collection(‘book‘).doc(‘W6G5GDPMTZMHGaOG‘).remove().then(console.log)

在小程序暂时只支持一次删除一条数据,所以用doc + remove来删除,如果需要一次删除多条数据,请在云函数端操作即可

总结

暂时只介绍了在小程序端的操作,都是简单易懂的,其实在云函数端和小程序端非常相似,只是在云函数端能够很方便的获得到用户的信息,有些操作只支持云函数,比如批量删除,但是云函数调试麻烦,操作麻烦,且云函数有调用的限制,所以我建议能在小程序完成的尽量在小程序端完成。下次我可以介绍下云函数。在我 GitHub的代码中 也有相关在云函数中操作的功能,有兴趣的可以看看。

原文地址:https://www.cnblogs.com/mianbaodaxia/p/9663015.html

时间: 2024-08-05 15:17:39

【微信小程序云开发】从陌生到熟悉的相关文章

微信小程序云开发

使用微信小程序云开发,可以不需要后端的参与,前端直接使用数据库. 第一步,新建一个空的云开发项目 在project.config.json 文件可以看见 "miniprogramRoot": "miniprogram/",   表示为小程序页面的文件 "cloudfunctionRoot": "cloudfunctions/", 表示云函数文件,即 在云端定义一些函数,运行环境为 nodejs, 可以做一些运算操作,然后将结果

微信小程序云开发-从0打造云音乐全栈小程序

第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过本章的学习,能够使大家对本门课程有一个整体的了解.... 第2章 云开发介绍以及从0构建项目本章会详细介绍小程序云开发与Serverless,并介绍如何开通小程序云开发及控制台的功能,并且初始化项目代码,讲解airbnb/javascript代码规范. 第3章 播放列表功能实现本章完成歌单列表与歌曲

微信小程序云开发入门到发布上线

初始化项目 起步说明[非小白教程] 适合人群[建议快速看文档,对着写一遍] 看过官方文档,并简单的写过 起步教程 云开发文档 熟悉vue/es6 小程序注册[微信公众平台] 获取appid[微信公众平台-开发-开发设置] 新建小程序云开发项目 新建项目选择一个空目录,填入 AppID(使用云开发能力必须填写 AppID) 勾选创建 "小程序云开发 " 点击新建即可得到一个展示云开发基础能力的示例小程序. 该小程序与普通 QuickStart 小程序有以下不同需注意: 无游客模式.也不可

微信小程序云开发更换云开发环境

小程序云开发环境初始化默认是第一个环境,但是我们可以指定环境id //app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ env: "kindear-fd77cd", traceUser: true, }) } this.globalData = {} } }) 就可以成功更换云开发环境. 原文地址:

微信小程序云开发之云函数创建

云函数 云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写.一键上传部署即可运行后端代码. 小程序内提供了专门用于云函数调用的 API.开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid.openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid). 1. 云函数创建 根据官网提示,创建一个云函数,命名为 add, 功能是将 a , b 两数相加,步骤如下: 在文件夹 cloud

第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页

下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点爆内容,只显示文字点爆内容. 音爆:筛选出语音点爆内容,只显示语音点爆内容. 爆榜:将点爆内容取出前20名进入排行. [实现页面内数据列表的滚动和导航切换后,每个导航下数据列表都在顶部] 由于我们使用的头部导航栏是通过数据绑定在同一页面进行切换,所以当一个页面内数据列表向下滚动后,切换导航后页面的s

微信小程序云开发--数据库操作

在app.json中开通云服务功能: "cloud":true, 在app.js中找到对应的云开发环境: 一般可以有两个环境 App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 ') } else { wx.cloud.init({ env:'partyassistant-bdd77f', traceUser: true, }) } this.globalData = { } } }) 在需要使

微信小程序云开发导入json数据报错:导入数据库失败, Error: Poll error, 导入数据任务(id:528440)异常,错误信息:line 1, column 750: bare " in non-quoted-field

错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:528440)异常,错误信息:line 1, column 750: bare " in non-quoted-field 导入数据库失败, Error: Poll error, 导入数据任务(id:528445)异常,错误信息:解析json文档错误,请检查导入文件格式,错误详情如下:invalid character ',' looking for beginning of value 导入JSON格式

微信小程序 云开发天然鉴权获取手机号

<!--miniprogram/pages/my/info/modify/cellphone/cellphone.wxml--> <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号码</button> 2,js cellphone.js Page({ /** * 页面的初始数据 */ data: { }, getPhoneNumber