微信小程序云开发入门

写在前面：

参考的课程是咸虾米老师在b站的课：2.2.在页面展现云数据库的内容_哔哩哔哩_bilibili

云开发官方文档：微信开放文档

1、什么是云开发？

用自己的话来说就是把服务器和后台都搭在腾讯开发的服务器上。

云开发的主要特点包括：

1. 无需搭建服务器： 开发者无需关心服务器的搭建和维护，可以专注于小程序前端和云端的逻辑。

2. 云数据库： 提供了一种方便的数据库服务，支持类似 MongoDB 的文档型数据库，开发者可以在小程序端直接操作数据库。

3. 云存储： 提供了简单的文件存储服务，可以用于存储用户上传的图片、音频等文件。

4. 云函数： 允许开发者编写在云端执行的 JavaScript 代码，用于实现一些需要在服务器执行的逻辑。

5. 安全稳定： 微信小程序云开发提供了一系列安全机制，保障用户数据的安全性和隐私。

2、如何开通云开发？

打开微信开发者工具新建项目之后点击云开发，第一次开通有一个月免费试用，或者花19.9买一个月，现在好像是涨到39.9了还是多少我忘了。

3、云开发中如何建立数据库(表)？

然后再往相应的数据表中填数据

并且把权限给打开

4、云开发中如何和数据库相连？

参考一下官方文档：

step1、先获取数据库引用

step2、再连接数据库

getData(){
console.log(123);
db.collection("demolist");
//collection是要指定数据库的名字
},

查询操作：

使用get方法：

获取数据库数据方法一：

res 参数是成功回调函数的参数，包含从数据库获取的数据。

getData(){
db.collection("demolist").get({
  success:res=>{
    console.log(res);
  }
})
},

点击获取数据，这样就成功获得数据了

获取数据库数据方法二：（这种叫es6的promise写法）

db.collection("demolist").get().then(res=>{
  console.log(res);
})
},

查询特定条件：

加一个doc:

注意：doc中只能放id 

getData(){
db.collection("demolist").doc("34e8707565d9537300cd08be7802b145").get({
  success:res=>{
    console.log(res);
  }
})
},

此时打印台：

查询指定数据：

db.collection("demolist").where({author:"琳琳"}).get().then(res=>{
  console.log(res);
})
},

如何把查询到的数据在页面展示：

step1、首先在data中定义初始数据对象

  data: {
    dataObj:""
  },

step2、在方法里请求数据，this.setData({ dataObj: res.data }); 将获取到的数据 res.data 更新到页面的 dataObj 中。这样，一旦数据更新，与 dataObj 相关联的页面部分就会重新渲染，以反映最新的数据。

getData(){
db.collection("demolist").doc("34e8707565d9537300cd08be7802b145").get({
  success:res=>{
    // console.log(res);
this.setData({
  dataObj:res.data
})
  }
})
},

step3、在index.wxml中展示数据

<button type="primary" bindtap="getData">点击获取数据</button>
<view>{{dataObj.title}}-{{dataObj.author}}</view>

多条数据展示：

如果您有多条数据需要展示,因为数据库中的表内数据都是以数组的形式存储的，所以在wxml中需要用到wx:for,并且把之前的对象名改成item

<button type="primary" bindtap="getData">点击获取数据</button>
<view wx:for="{{dataObj}}">{{item.title}}-{{item.author}}</view> 

注意：所有在控制台手动添加的数据，用代码只有读的权限，没有删除修改的权限。

插入数据

通过表单添加数据，这时候您需要去了解一下form和button的官方文档。

step1、在index.wxml中写好样式表单

<form bindsubmit="btnSub">
<input name="title" placeholder="请输入标题"></input>
<input name="author" placeholder="请输入作者"></input>
<textarea name="content" placeholder="请输入内容"></textarea>
<button type="primary" form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>           

step2、在js中写方法，一共有三种方法

方法一：

//提交表单添加进数据库
btnSub(res){
  // var {title,author,content}=res.detail.value;
  var title=res.detail.value.title;
  var author=res.detail.value.author;
  var content=res.detail.value.content;
  db.collection("demolist").add({
    data:{
      title:title,
      author:author,
      content:content
    }
  }).then(res=>{
    console.log(res);
  })
},

方法二：

//提交表单添加进数据库
btnSub(res){
  var {title,author,content}=res.detail.value;
  db.collection("demolist").add({
    data:{
      title:title,
      author:author,
      content:content
    }
  }).then(res=>{
    console.log(res);
  })
},

方法三

//提交表单添加进数据库
btnSub(res){
 var resVlu=res.detail.value
  db.collection("demolist").add({
    data:resVlu
  }).then(res=>{
    console.log(res);
  })
},

输入数据再点提交，输出台有这样提示就算成功了。

再去数据库里看

更新数据操作

加入我们要修改第三条记录里的author

wxml代码：

<button type="primary" bindtap="updateData">更新一条数据</button>

js代码：

updateData(){
  db.collection("demolist").doc("97843aa265d9aa4e01dbed066e01ad37").update({
    data:{
  author:"蓬蓬"
    }
  }).then(res=>{
    console.log(res);
  })
},

看到console台报status：1就代表更新成功了。

如果是根据单个属性来修改的话那就是用where

修改作者名叫蓬蓬的人为nq

js代码：

updateData(){
  db.collection("demolist").where({author:"蓬蓬"}).update({
    data:{
  author:"nq"
    }
  }).then(res=>{
    console.log(res);
  })
},

这样就可以更新成功

update还可以新增数据,新增一个修改时间，posttime

如果您使用set，最后结果只会留下你更新代码里的那一项和id号，其他的全部都会被删掉，如果您有覆盖数据的需求可以用它。

删除

wxml代码：

<button type="primary" bindtap="delData">删除一条数据</button>

在demo1.js中最顶部还要加一个全局变量

// pages/demo1/demo1.js
const db=wx.cloud.database();
//在最外侧定义一个全局变量
var myVlu="";
Page({

  //获取输入的内容
  myIpt(res){
    var vlu=res.detail.value;
    myVlu=vlu
  },
  //删除记录
delData(){
  db.collection("demolist").doc(myVlu).remove(
    
  ).then(res=>{
    console.log(res);
  })
},

这样就可以完美删除一条记录了。

云函数

之前我们进行数据库操作时候的代码太多了，所以就有了云函数的存在。

而且在小程序端写代码操作数据库权限太低，但是在云函数端是可以操作的。

如何使用云函数进行数据库增删改查？

step1、新建云函数

再回到控制台去看是否创建成功：

step2、在新建的云函数的index.js文件里获取数据

因为发送网络请求是异步的，所以用了await，意思是等待异步完成，等待异步请求完成之后再return出去。

event是接收前端传来的数据。

写完之后记得在新建的云函数里点击右键选择上传并部署：云端安装依赖(不上传node_modules)

或者点击index.js选择云函数增量上传也可以

如果想要更新云函数，右键点击同步，如果点击同步

如果还是没有数据，那么再点击下载。

如果您要在删除之前创建过的云函数，同时在控制台也要再删除一遍。

step3、在需要获取数据的页面请求数据（之前写的方法都删掉，在onload:function里去请求云函数，然后云函数再请求数据库。

此时前后端分离概念得到了诠释，让我们专注前端逻辑。

把之前写的请求数据的方法都清掉，顶部和数据库连接的代码也清掉（清不清掉问题不大）。

// pages/demo1/demo1.js
// const db=wx.cloud.database();
//在最外侧定义一个全局变量
var myVlu="";
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

//   //获取输入的内容
//   myIpt(res){
//     var vlu=res.detail.value;
//     myVlu=vlu
//   },
//   //删除记录
// delData(){
//   db.collection("demolist").doc(myVlu).remove(
    
//   ).then(res=>{
//     console.log(res);
//   })
// },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options){
wx.cloud.callFunction({
  name:"getData"
}).then(res=>{
  console.log(res);
})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

step4、云函数中如何有条件的传递参数？

比如只要查询两条数据

demo1.js：

  onLoad:function(options){
wx.cloud.callFunction({
  name:"getData",
  data:{
    num:2
  }
}).then(res=>{
  console.log(res);
})
  },

云函数端index.js，云函数端写完之后别忘记点更新上传。

// 云函数入口函数
exports.main = async (event, context) => {
  var num=event.num
return await db.collection("demolist").limit(num).get()
}

再刷新页面，就只显示两条数据了。

从此以后我们把云函数端口写的代码就叫后端，页面部分的代码就叫前端。

云函数案例触底刷新获取数据:

触底刷新获取数据，用户在访问数据时，如果一次性返回大量数据会导致页面卡顿，而且有时不需要那么多数据。

step1、新建一个demo2的页面，先写wxml页面。

<view class="row" wx:for="{{dataList}}" wx:key="index">
<view class="title">{{index+1}}、{{item.title}}</view>
<view>阅读量：333</view>
</view>

step2、wxss代码：

.row{padding:100rpx 30rpx;border-bottom:1px solid #ccc;}
.row .title{font-size:50rpx;}

step3、demo2.js代码：

// pages/demo2/demo2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
dataList:[]
  },
getData(num=5,page=0){
wx.cloud.callFunction({
  name:"demoGetList",
  data:{
    num:num,
    page:page
  }
}).then(res=>{
  // console.log(res);
  var oldData=this.data.dataList
  var newData=oldData.concat(res.result.data);
  //concat是拼接的意思
  this.setData({
    dataList:newData
  })
})
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
this.getData()
  },

 



  /**
   * 页面上拉触底事件的处理函数
   */
  
  onReachBottom:function(){
var page=this.data.dataList.length //获取data数据的个数
this.getData(3,page) //每次刷新的时候就获取三条数据
  },

 
})

然后再新建一个云函数叫demoGetList：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
const db=cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
var num=event.num;
var page=event.page;
return await db.collection("demolist").skip(page).limit(num).get()
//skip里放数据个数
}

即可实现。

云存储：

云存储的两种方式：

1、在控制台手动上传

2、在小程序端通过调用方法写代码来上传

这里着重讲一下如何在小程序端通过点击事件来上传文件。

可以在文档里看到不同的方法的介绍（一定要养成多看文档的习惯，因为这里上传图片的方法已经更新了）

例子：点击上传图片，实现从本地上传图片到云端。

控制台：

wxml：

<button type="primary" bindtap="clickBtn">上传文件</button>

js：

// pages/demo3/demo3.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  // 点击上传按钮的事件处理函数
  clickBtn: function() {
    // 选择本地图片或视频文件
    wx.chooseMedia({
      count: 1, // 最多选择的文件数量，这里选择1个
      mediaType: ['image', 'video'], // 文件类型，可以同时选择图片和视频
      sourceType: ['album', 'camera'], // 文件选择的来源，可以从相册选择或使用相机拍摄
      maxDuration: 60, // 视频最长拍摄时间，单位秒
      sizeType: ['compressed'], // 是否压缩所选文件
      success: res => {
        // 选择成功后，获取临时文件路径
        const tempFilePath = res.tempFiles[0].tempFilePath;
        // 调用云存储 API 将文件上传到云端
        wx.cloud.uploadFile({
          cloudPath: 'photos/' + Date.now() + '.png', // 指定上传到云端的路径和文件名
          filePath: tempFilePath, // 本地临时文件路径
          success: res => {
            // 上传成功后，打印上传后的文件 ID
            console.log('上传成功', res.fileID);
            // 这里可以添加其他的处理逻辑，比如更新页面显示上传成功的提示信息等
          },
          fail: err => {
            // 上传失败时的处理逻辑
            console.error('上传失败', err);
          }
        });
      },
      fail: err => {
        // 选择失败时的处理逻辑
        console.error('选择文件失败', err);
      }
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

云后台

也是可视化直接手动添加后台管理系统里的东西，点击云后台开通服务。

开通好了之后会有一个访问地址，然后自己再在账号权限管理里添加账号。

然后点击新建模型

以我之前建好的massage模型为例，模型名称：hutong就对应了数据库里的集合名称，展示名称你自己随便取。

再然后您在这一条模型里随意增加文本、字符串之类的东西。

然后在内容集合中点击新增数据即可，新增的数据在数据库里都能看到。

1