【Web前端基础知识】微信小程序之云开发

发布 : Web前端培训      来源:

2021-08-30 17:15:21

一、如何开通云开发

1、新建小程序模板,选择自己实际的AppId,选择云开发

2、进入编译器,点击云开发,即可进入购买,注意!!,云开发会免费赠送两套环境供用户使用。

3、查看环境ID,在云开发设置中查看

二、云能力初始化

创建完项目后,会有两个文件夹,cloudfunctions和miniprogram,cloudfunctions存放云函数的文件夹,而miniprogram为我们本地项目,我们在miniprogram中的app.js 初始云函数

  1. App({
  2. onLaunch: function () {
  3. if (!wx.cloud) {
  4. console.error('请使用 2.2.3 或以上的基础库以使用云能力')
  5. } else {
  6. wx.cloud.init({
  7. // env 参数说明:
  8. // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
  9. // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
  10. // 如不填则使用默认环境(第一个创建的环境)
  11. env: '自己的环境ID',//注意!!!在云开发设置中查看
  12. traceUser: true,
  13. })
  14. }
  15. }

三、云开发中基本的增删改查

1、添加数据,代码中users为数据库表的名字,data写想要添加的参数

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. db.collection("users").add({
  4. data:{
  5. //想添加的参数
  6. },
  7. success(res){
  8. console.log(res);//成功的回调
  9. }
  10. })

2、获取数据

(1)获取全部

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. //异步获取
  4. db.collection("users").get({
  5. success(res){
  6. console.log(res);
  7. }
  8. })
  9. // 同步获取--同步获取需要在方法前写async
  10. let res = await db.collection("users").get()

(2)通过条件获取

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. //异步获取
  4. db.collection("users").where( 查询的条件 ).get({
  5. success(res){
  6. console.log(res);
  7. }
  8. })
  9. // 同步获取--同步获取需要在方法前写async
  10. let res = await db.collection("users").where( 查询的条件 ).get()

3、修改数据

(1)通过id修改,获取完数据时自带id,可以通过自带的id修改

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. db.collection('users').doc(id).update({
  4. data: {
  5. userVal: "admins" //想要修改的内容
  6. }, //修改的内容
  7. success(res) {
  8. console.log(res)
  9. }
  10. })

(2)通过where条件修改

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. db.collection('users').where(条件--如:{userVal:admin}).update({
  4. data: {
  5. userVal: "admins"
  6. }, //修改的内容
  7. success(res) {
  8. console.log(res)
  9. }
  10. })

4、删除数据

(1)通过id删除

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. db.collection('users').doc(id).remove({
  4. success(res) {
  5. console.log(res)
  6. }
  7. })

(2)通过where删除 -- 注意!(在小程序端不能删除多条,必须在云端进行)

  1. //引入数据库
  2. let db = wx.cloud.database()
  3. db.collection('users').where(条件,如:{uesrVal:admin}).remove({
  4. success(res) {
  5. console.log(res)
  6. }
  7. })

四、应用云开发,上传用户名和密码小案例

1、index.wxml文件

  1. <input type="text" model:value="{{userVal}}" placeholder="用户名" />
  2. <input type="text" model:value="{{passVal}}" placeholder="密码" />
  3. <button bindtap="addUser">添加</button>

2、index.js文件

  1. let db = wx.cloud.database()//使用云数据库需要使用这个api调用
  2. Page({
  3. data: {
  4. userVal: "",
  5. passVal: ""
  6. },
  7. addUser() {
  8. //拿到表单里面的值
  9. let {
  10. userVal,
  11. passVal
  12. } = this.data
  13. //引用数据库
  14. // 数据库添加操作 -- 异步操作
  15. //users是云开发里面数据库的表名(数据库在云开发点加号自行创建),data里面为需要添加的参数,success回调函数可以查看是否成功
  16. db.collection("users").add({
  17. data: {
  18. userVal,
  19. passVal
  20. },
  21. success(res) {
  22. console.log(res);
  23. }
  24. })
  25. },
  26. })
THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

涉及方向有Java、Web前端、UI设计、软件测试、python等科目,内容包含学习路线、视频、源码等

点击申请领取资料

点击查看资料详情 

收起 


 相关推荐

问题解答专区
返回顶部