【小程序】小程序技术训练营学习笔记-part3

最新推荐文章于 2022-05-16 19:29:57 发布

dominic_z

最新推荐文章于 2022-05-16 19:29:57 发布

阅读量186

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/dominic_z/article/details/104709201

版权

web开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

个人笔记部分，无参考意义
云开发技术训练营

云开发快速入门

下载Nodejs

我下载的是二进制文件zip包，解压然后把目录添加到环境变量path即可

部署上传云函数

如果显示“npm不是内部或外部命令”
重启一下开发者工具也行

获取openid与云函数login

云函数的返回结果在日志的第一行
注意，回调函数的执行端在小程序端

新建云函数

在pages/addFunction/addFunction.wxml页面里，result是输出

体验云调用之服务端调用

发送模板消息这个功能需要一些配置，同时上传云函数的时候可以选择依赖上传，因为你可以查看package.json里的依赖，这个依赖在login里已经上传过了
在这里插入图片描述

体验前端操作数据库

页面里的模拟操作都在模拟器里

基础库与wx.cloud

云开发能力

这一节需要一个新项目，请按照上一节末尾从头搭建一个新的云开发项目

本地调试与云端测试

小程序端与服务端

小程序端与云端的初始化
这里提到了我们开发小程序的时候，一般会有两个环境，一个被用作测试，一个被用作生产。
例如我测试的云环境如下，是个免费版，生产我就弄个基础版的
在这里插入图片描述
那么如果我们完成了代码编写与测试任务，需要正式上线运行了，就需要吧我们的小程序丢到生产环境上去。这就需要我们修改初始化配置
例如，小程序的初始化是在app.js文件里使用wx.cloud.init来初始化

wx.cloud.init({
  env: 'my-env-id', //可以填写生产环境或者测试环境的环境ID
  traceUser: true,
})

这里的 env 只会决定小程序端API调用的云环境，就是小程序要调用哪个云环境（生产还是测试）下面的各种东西（如函数和数据库等），而不会决定云函数中的 API 调用的环境，个人理解：云函数里可能也会调用很多其他的API啊，这些API在哪个环境里运行，还需要配置的，怎么配置呢
云函数中的API调用的环境也可以使用初始化来设置。如下所示，就是在云函数的index.js页面

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})

在这里插入图片描述

获取用户信息和登录

使用open-type=”getUserInfo” 来获取用户信息的作用和 wx.getUserInfo API基本效果是一样的，区别在于wx.getUserInfo 这种方式最好是在用户允许获取公开信息（也就是res.authSetting[‘scope.userInfo’]的值为true）之后再调用，如果用户拒绝了授权就不会再有弹窗（除非用户删掉了你的小程序再使用），调用就会失败，而使用组件的方式是用户主动点击，用户即使拒绝了，再点击仍会弹出授权弹窗。所以推荐先使用组件来获取用户授权，然后再来使用wx.getUserInfo来获取用户信息。

注意大小写问题

getUserInfomation: function (event) {
    console.log('getUserInfomation打印的事件对象', event)
    let { avatarUrl, city, nickName}= event.detail.userInfo
    this.setData({
      avatarUrl,city, nickName
    })
  },

注意这种取值方式，通过大括号直接获取json对象的对应属性值

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({
        success: res => {
          let { avatarUrl, city, nickName } =res.userInfo
          this.setData({
            avatarUrl, city, nickName
          })
        }
      })
    }
  }
});

搞清楚这个this是谁

小程序端上传图片到云存储

微信里上传文件的API都是choose开头的
以及wx.cloud.uploadFile是小程序端API，可以自动上传到对应的云端，这是因为小程序配置了云端运行环境

渲染云存储图片到组件这一小节里，注意this是谁，以及用的是函数，还是箭头函数

我调用云函数的时候发现每次都不成功，然后日志里也没显示
在这里插入图片描述
后来发现是函数名没选，这个是Login这个函数的日志

在这里插入图片描述

教程里说

要本地调试需要使用npm install安装wx-server-sdk依赖

所以如果不打算本地调试，就不用install直接上传函数就行了

小程序端调用数据库，读取counters能成功，但是读取zhihu_daily就一直失败
我想了大概半个小时，解决了

文中提到了openid与数据库

在云开发控制台的数据库标签里，打开上一节内容里的counters集合，在这个集合里我们可以看到每条记录除了有_id字段以外，还有一个_openid字段用来标志每条记录的创建者（也就是小程序的用户）。但是在我们使用管理端（控制台和云函数）中创建的数据比如我们之前导入的zhihu_daily，就不会有 _openid 字段，因为这些记录属于管理员（不是用户）创建的记录。

也就是说counter集合里的数据的管理员就是小程序的用户，而zhihu_daily集合的管理员并不是小程序用户，所以小程序端如果要读取数据的话，需要修改权限，如下图所示
在这里插入图片描述

云数据库入门

感觉这一章好像漏了点东西

数据库的权限控制与安全规则

里面没讲这个配置在哪里啊，以后再说

一窥数据查询的全貌

在上一节我们已经将中国城市经济数据china.csv的数据导入到了集合china之中

并没有，好像被漏了，但是也比较好导入，
在这里插入图片描述
不是在index.js里写东西，而是在chinadata.js里写读取数据库代码

操作单个记录doc的字段值

doc指的就是以_id为key搜寻出来的一条记录，单个记录

存储、数组、对象

云存储与数据库的关系

云存储存储着图片等资源，数据库存着云存储里的数据的相关信息，比如说需要展示哪张图片啊，这张图片在云存储的什么位置啊是对应用户的信息啊

相信大家都应该在其他小程序体验过文件上传的功能，在交互上这个功能虽然看起来简单，但是在代码的逻辑上却包含着四个关键步骤：

首先把文件上传到小程序的临时文件，并获取临时文件地址以及文件的名称；
将临时文件上传到云存储指定云文件里，并q取到文件的FileID；
将文件在云存储的FileID和文件的名称上传到数据库；
获取文件夹内所有文件的信息。

建立用户与数据的关系

小程序 - 使用async出现regeneratorRuntime is not defined错误
async/await的使用说明里也有说

async 是“异步”的简写，async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，await 只能出现在 async 函数中。await 在 async 函数中才会有效。假设一个业务需要分步完成，每个步骤都是异步的，而且依赖上一步的执行结果，甚至依赖之前每一步的结果，就可以使用Async Await来完成
之前在写爬虫的时候接触过异步，Async标记异步函数，意思就是当这个函数内部出现等待的时候，CPU可以去执行其他的函数，而await的意思就是说，后面的函数是个异步函数，告诉cpu，我这个函数要等一段时间，你可以去干别的事儿了

将文件信息存储到数据库

  addFiles(fileID) {
    const name = this.data.files[0].name
    const _id= this.data.userData.data[0]._id
    db.collection('clouddisk').doc(_id).update({
      data: {
        'folders.0.files': _.push({
          "name":name,
          "fileID":fileID
        })
      }
    }).then(result => {
      console.log("写入成功", result)
      wx.navigateBack()
    }
    )
  }