微信小程序开发之十六 —— 云开发入门

学习前后

上一篇：微信小程序开发之十五—— 图片、文件与缓存
下一篇：微信小程序开发之十七 —— 云开发能力

瞎扯

前面的十五篇博文就是微信小程序开发的基础知识了，当然肯定还有些没讲完，不过就先到这了，以后遇到其他的记得多看官方文档就好了，云开发是之前没有了解过的，前面那些是之前多多少少了解过一些，所以这次再次看理解会快一些，而云开发的话可能理解起来会慢一点吧，看了下云开发，然后打下王者，运气爆表五个队友遇到两个挂机的，太难了，不知不觉明天就周末了呢，不过还是要继续加油呀，在升级打怪掉星的路上越走越远，哈哈哈，明天有点事可能也只能一更了，谁知道呢，总之，加油呀，坚持把小程序开发学完。

新建云开发模板项目

跟之前新建项目差不多，不过云服务好像不能使用测试号了，大家还是去注册一个账号，使用自己的APPID来创建。
官方文档：云开发

开通云服务

点击微信开发者工具上方的"云开发“图标，然后创建一个自己的云环境，环境名自己手动输入，而环境ID是自动生成的，云开发有基础配额而且是免费的，足够我们学习使用了。
在miniprogram的app.js里找到下面这个代码

wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        env: 'yq-mocuc',
        traceUser: true,
      })

在把env的值改成自己创建的环境ID，这里是我的环境ID

下载Node.js

下载地址：Node.js下载
安装时建议是不要修改路径，直接next就好了。
下载后在cmd的命令行中输入node --version npm --version 观察是否输入对应版本，如果不是就没安装成功。

部署上传云函数

cloudfuntions文件夹图标里有朵小云，表示这就是云函数根目录。而miniprogram文件夹则放置的是小程序的页面文件。这个不是固定的，是由project.config.json里的配置决定的。

{
	"miniprogramRoot": "miniprogram/",
	"cloudfunctionRoot": "cloudfunctions/",
}

在云函数目录下对应的云函数callback、echo、login、openapi右菜单中选择在终端中打开，打开后在终端中输入以下代码并按Enter回车执行 npm install 下载云函数依赖模块。
下载完成后，再右键login云函数目录，点击“创建并部署：所有文件”，这时会把本地的云函数上传到云端，上传成功后在login云函数目录图标会变成一朵小云。
每个云函数都进行的这样操作。
在开发者工具的工具栏上点击“云开发”图标会打开云开发控制台，在云开发控制台点击云函数图标，就能在云函数列表里看到我们上传好的“login”云函数啦。

获取openid与云函数login

点击“点击获取openid”按钮时观察控制台看跳转到了那个页面

可以看出开始页面是pages/index/index，点击获取openid后跳到了userConsole页面
我们先看index页面的index.wxml文件的该按钮绑定的事件

<button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>

知道了绑定事件是onGetOpenid，然后去index.js找到该函数看执行了啥。

onGetOpenid: function() {
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },

多了个没见过的函数wx.cloud.callFunction，然后呢？还用问吗。
官方文档：wx.cloud.callFunction

参数	类型	说明
name	String	必填，云函数名
data	Object	传递给云函数的参数
config	Object	局部覆写 wx.cloud.init 中定义的全局配置
success	Function	返回云函数调用的返回结果
fail	Function	接口调用失败的回调函数
complete	Function	接口调用结束的回调函数（调用成功、失败都会执行）

config 对象定义

字段	说明	数据类型
env	使用的环境 ID，填写后忽略 init 指定的环境	String

success返回参数/promise返回结果说明：

字段	类型	说明
errMsg	String	通用返回结果
result	String	UN函数返回的结果
requestID	String	云函数执行 ID，可用于在控制台查找日志

fail返回参数说明

字段	说明	数据类型
errCode	错误码	Number
errMsg	错误信息，格式 apiName:fail msg	String

现在前面那个函数看懂了吗，里面的name: 'login', 就是调用了云函数login，也就是cloindfunctions下的login目录下的内容，这里叫做云函数。
我们在success里面添加

console.log('调用login云函数返回的res',res)

可以在控制台查看内容了。

云函数login

login.js

exports.main = (event, context) => {}

这里使用了箭头函数的写法，我们可以在控制台打印一下看看，这个控制台不是开发工具的控制台，而是云服务里面的控制台，打开云开发控制台–云函数–日志，按函数名筛选，选择login云函数，可以看到云函数被调用的日志记录。

console.log('服务端打印的event',event)
console.log('服务端打印的context',context)

保存后一定要右键点击index.js文件，选择**云函数增量上传：(更新文件)**更新login云函数，这里跟我们之前的有点不太一样，习惯就好，这个云函数是部署在云端的，所以上传后我们在本地把文件删除掉云端的云函数还是存在的，调用的也是云端的函数。

我们看到login.js里面还有另外一个函数getWXContext()，添加控制台输出，保存之后，右键点击index.js文件，选择云函数增量上传:（更新文件）

const wxContext = cloud.getWXContext()
console.log('getWXContext返回结果',wxContext)

官方文档：getWXContext

云开发控制台输出结果：

新建云函数

鼠标右键cloudfunctions云函数根目录，选择新建Node.js云函数，随便输入个名称，这里输入sum，会发现创建出书名UN函数目录了，同时也会在线上环境中创建出对应的云函数。
在sum的index.js里面把多余的删掉，算了，都删了，改成下面这样，对比下差异

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

cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  console.log(event)
  console.log(context)
  return {
    sum: event.a + event.b,
  }
}

然后记得选择云函数增量上传:（更新文件），更新sum云函数。

运行程序，点击"快速新建云函数",看控制台，条道路addFunction页面，打开addFunction.wxml

<view class="list-item" bindtap="testFunction">
   <text>测试云函数</text>
</view>

  testFunction() {
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 1,
        b: 2
      },
      success: res => {
        wx.showToast({
          title: '调用成功',
        })
        this.setData({
          result: JSON.stringify(res.result)
        })
        console.log("sum云函数返回的对象", res)
        console.log("res.result是啥", res.result)
        console.log("JSON.stringify(res.result)是啥", JSON.stringify(res.result))
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '调用失败',
        })
        console.error('[云函数] [sum] 调用失败：', err)
      }
    })
  },

里面我添加了一些Console控制台输出，运行时看下控制台观察其值如下：

res.result是啥 {sum: 3}
addFunction.js? [sm]:50 JSON.stringify(res.result)是啥 {"sum":3}

上传图片到云存储

点击上传图片按钮，选择一张图片并打开，如果在文件存储指引页面显示上传成功和文件的路径以及图片的缩略图，说明你的图片就上传到云开发服务器里啦。

我们打款云端的存储管理页就可以看到我们上传的图片了，

发现会转到storageConsole页面，内容比较简单，都是之前了解过的组件，就不多介绍了。

体验前端数据操作

在miniprogram文件夹，打开pages文件下databaseGuide里的databaseGuide.js文件，在这里找到 onAdd: function (){}、 onQuery: function (){}、 onCounterInc: function (){}、 onCounterDec: function (){}、 onRemove: function (){}分别选中绿色的代码块，然后同时按快捷键Ctrl和/（Mac电脑的快捷键为Command和/），就可以批量取消代码的注释。
在云端的数据库管理页，点击集合名称右侧的**+号**图片，我们只需要添加一个counters到集合即可。

这个过程显示比较明显，运行一下就可以了解了。

wx.cloud

控制台输入wx.cloud 可以看到下面一下方法

CloudID: ƒ () //用于云调用获取开放数据
callFunction: ƒ () //调用云函数
database: ƒ () //获取数据库的引用
deleteFile: ƒ () //从云存储空间删除文件
downloadFile: ƒ () //从云存储空间下载文件
getTempFileURL: ƒ () //用云文件 ID 换取真实链接
init: ƒ ()  //初始化云开发能力
uploadFile: ƒ () //上传文件至云存储空间

然后就没了，云开发就先写到这吧，明天继续。