微信小程序--云开发学习

这两周因为没有布置任务，主要进行微信小程序云开发的学习

·················
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

云函数	无需自建服务器	在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库	一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

云开发配置

首先需要注册自己的一个appID，具备云开发的功能，在新建项目时需要使用自己的appID进行新建，并且在项目选择不使用云服务。为什么使用云开发却不用云服务呢？因为直接使用微信平台的云开发模板会自动生成很多我们不需要的冗余代码，所以直接爱项目中进行配置会使代码更简洁。
··········
首先初始化云开发，在app.js中加入如下代码

 onLaunch: function () {
    //云开发环境初始化
    wx.cloud.init({
      env:"yunkaifa-fp3py"
    })
  },

env的数值是云开发中的环境ID，点击云开发—>设置—>查看环境ID

云函数的初始化要在以上基础上，再加入以下内容"cloudfunctionRoot": "cloud"，并且在根目录下新建一个同名的文件夹，若无错误，文件夹会出现云的符号，意味着连接到了云开发的云函数。

至此，云开发的初始化结束

云数据库

数据库新增集合

点击＋号可以进行集合的添加，就类似于正常数据库的表，输入集合名就可以创建

数据库新增数据

点击添加记录可以新增数据，需要注意的是要自己填写字段名，核对每一条数据的字段名相同，否则会出现意想不到的错误。一般默认系统自动生成ID。


···在代码中新增数据
首先数据库的使用，需要获取数据库的集合并赋值给一个变量，方便后面的使用
const db = wx.cloud.database().collection("list")

wxml中设置输入框和添加数据按钮，输入数据后点击按钮可以进入js调用函数将数据存入数据库

<!-- 添加数据 -->
<input placeholder="输入名字" bindinput="addName"></input>
<input placeholder="输入年龄" bindinput="addAge"></input>
<button bindtap="addData" type="primary">添加数据</button>

首先需要在后台获取前端输入框输入的信息，将数据赋值给初始化的变量

let name=""
let age=""
 addName(event){
    name=event.detail.value
  },  
  addAge(event){
    age=event.detail.value
  },

调用数据库的add函数进行新增，需要设置data，主要data中的数据名需要设置好，将输入框获取的数据赋给name和age

//添加数据
  addData(){
    db.add({
      data:{
        name:name,
        age:age
      },
      success(res){
        console.log("添加成功",res)
      },
      fail(res){
        console.log("添加失败",res)
      },
    })
  },

云数据库所能使用的API如下图

数据库删除数据

需要在输入框输入数据的ID，通过ID来对数据进行删除

<!-- 删除数据 -->
<input placeholder="输入ID" bindinput="delDataInput"></input>
<button bindtap="delData" type="primary">删除数据</button>

获取输入框的数据

  delDataInput(event){
    id=event.detail.value
  },

db.doc(id)为获取集合中指定记录的引用，也就是获取到括号内id对应的那一条数据，然后用remove进行移除。id为输入框所输入的对应id数值

 //删除数据
  delData(){
    db.doc(id).remove({
      success(res){
        console.log("删除成功",res)
      },
      fail(res){
        console.log("删除失败",res)
      },
    })
  },

数据库修改数据

修改数据同样需要id，并且获取修改后的数据，对数据库数据进行修改

<!-- 更新数据 -->
<input placeholder="输入ID" bindinput="upDataInput"></input>
<input placeholder="输入年龄" bindinput="upAge"></input>
<button bindtap="upData" type="primary">更新数据</button>

获取输入框的数据

upDataInput(event){
    id=event.detail.value
  },
  upAge(event){
    age=event.detail.value
  },

找到id对应的数据，data中的数据需要注意名称和数据库中的字段名相同，否则会找不到字段，修改不了

  //修改数据
  upData(){
    db.doc(id).update({
      data:{
        id:id,
        age:age
      },
      success(res){
        console.log("更新成功",res)
      },
      fail(res){
        console.log("更新失败",res)
      },
    })
  }

数据库查询数据

查询只需要定义一个按钮，点击按钮可以将数据库数据输出在控制台进行查看

<!-- 查询数据 -->
<button bindtap="getData" type="primary">查询数据</button>

db.get获取全部的数据

  //查询数据
  getData(){
    db.get({
      success(res){
        console.log("查询成功",res)
      }
    })
  },

云函数

学习了一些简单函数的使用，了解了云函数的使用方法
在初始化创建的cloud文件夹中右键选择以下选项，创建一个新的云函数

创建的云函数中会有一些默认代码，这些是云函数必要的代码，不得删除

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
//在此处进行功能的编写
}

需要注意每次修改云函数后要右键部署，将云函数上传

加法函数

<button bindtap="qiuhe" type="primary">云函数获取加法</button>

调用云函数，name为自己设置的云函数的名字，data为会传入云函数进行使用的参数，名称需要和云函数中的变量名相同

qiuhe(){
    wx.cloud.callFunction({
      name:"add",
      data:{
        a:10,
        b:3
      },
      success(res){
        console.log("操作成功",res)
      },
      fail(res){
        console.log("操作失败",res)
      },
    })
  },

云函数中参数都是从event传入的，返回a+b的值

exports.main = async (event, context) => {
 let a=event.a;
 let b=event.b;
 return a+b;
}

获取用户的openID

用户的openID相当于用户在微信小程序中的唯一辨识，身份证一样的存在，在用户登录等操作中，需要用到
新创建一个云函数时，系统默认带的代码就是获取openid等数据的

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

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

在按钮响应函数中调用云函数，获取其返回值中的openid变量数据并输出在控制台

  //获取用户openID
  getopenID(){
    wx.cloud.callFunction({
      name:"getOpenID",
      success(res){
        console.log("获取openID成功",res.result.openid)
      },fail(res){
        console.log("获取openID失败",res.result.openid)
      }
    })
  },

获取数据库数据

云函数获取数据库数据和直接使用数据库API获取有什么区别？主要为以下区别

想解释以下第二条是什么意思，数据库api只能操作自己添加的数据，如果在数据库界面添加数据，在小程序界面中就不能对该条数据进行操作，需要设置一些权限才可以进行操作。而云函数没有这样的问题，不受权限的限制，进行数据的操作，在一些新闻等的小程序中，就可以比较方便地对新闻进行评论，点赞等操作。

  //云函数获取数据
  yunhanshu(){
    wx.cloud.callFunction({
      name:"getData",
      success(res){
        console.log("云函数获取数据成功",res)
      },fail(res){
        console.log("云函数获取数据失败",res)
      }
    })
  }

云函数中的数据库调用其实和直接使用数据库API是一样的，所以云函数只是起到中转的作用，就可以使数据库数据的操作更加灵活

exports.main = async (event, context) => {
  return cloud.database().collection("users").get(); 
}

云存储

上传图片

点击按钮选择图片后展示在image组件中

<button bindtap="upload" type="primary">上传图片</button>
<image src="{{imgUrl}}"></image>

js中在按钮响应函数中首先调用wx.chooseImage进行图片的选择，若选择成功则获取该图片的链接，将连接传递给云存储函数wx.cloud.uploadFile，cloudPath为上传到云端后图片的名字，filePath为图片的临时路径，也就是刚才选择图片成功后所获得的链接，成功存储之后，将返回的云存储中的图片链接用this.setData赋值给wxml中的图片src，使图片展示

  //上传图片
  upload(){
    let that=this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        that.uploadImg(tempFilePaths[0]);
      }
    })
  },
  uploadImg(fileUrl){
    wx.cloud.uploadFile({
      cloudPath: new Date().getTime()+'.png', // 上传至云端的路径
      filePath: fileUrl, // 小程序临时文件路径
      success: res => {
        // 返回文件 ID
        console.log("上传成功",res)
        this.setData({
          imgUrl:res.fileID
        })
      },
      fail: console.error
    })
  },

注意：that.uploadImg(tempFilePaths[0]);为什么使用that而不是this？wx.chooseImage是异步函数，直接用this，是作用于在chooseImage里，使用this找不到需要的uploadImg函数，需要将作用于放大到page层面，所以需要let that=this;，之后使用that就可以找到对应的函数，若使用指针方式的success判断success: res =>，则没有这种问题

上传视频

点击按钮选择视频后展示在video组件中

<button bindtap="uploadvideo" type="primary">上传视频</button>
<video src="{{videoUrl}}"></video>

跟上传图片类似，首先选择视频，调用云存储函数，设置其在云端的名称和选择视频后的链接进行视频的上传，之后将返回的链接赋值给wxml中的视频src进行展示

  //上传视频
  uploadvideo(){
    let that=this;
    wx.chooseVideo({
      camera: 'back',
      success(res) {
        console.log(res.tempFilePath)
        wx.cloud.uploadFile({
          cloudPath: '视频.mp4', // 上传至云端的路径
          filePath: res.tempFilePath, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log("上传视频成功",res)
            that.setData({
              videoUrl:res.fileID
            })
          },
          fail: console.error
        })
      }
    })
  },

上传excel文件

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

因为ecxel文件没有特定的选择函数，所以使用最通用的文件选择，可以选择多种格式的文件，如word，pdf，excel等
选择文件后，设置名称，链接，上传至云端，打印语句测试是否成功上传

 //上传excel文件
  uploadexcel(){
    wx.chooseMessageFile({
      count: 1,
      type: 'all',
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFiles
        wx.cloud.uploadFile({
          cloudPath: '表格.xlsx', // 上传至云端的路径
          filePath: res.tempFiles[0].path, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log("上传excel成功",res)
           
          },
          fail: console.error
        })
      }
    })
  },

下载并打开excel文件

<button  bindtap="openexcel" type="primary">下载并打开excel文件</button>

调用云开发的下载函数wx.cloud.downloadFile，对云端资源进行下载，需要设置其链接ID，才能下载正确的资源，若下载成功，调用小程序打开文件函数wx.openDocument打开链接即下载后返回的临时路径，若在手机上测试，会直接在下载成功后打开该文件

//下载并打开excel文件
  openexcel(){
    wx.cloud.downloadFile({
      fileID: 'cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/表格.xlsx', // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)
        wx.openDocument({
          filePath: res.tempFilePath,         
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      },
      fail: console.error
    })
  }

以上就是云开发的基础内容学习，还要进行进一步的学习，并且将这些知识运用到实际项目中去，之后还会再进行学习和项目实现。