编程语言
首页 > 编程语言> > 【小程序】犀牛鸟云开发训练day9

【小程序】犀牛鸟云开发训练day9

作者:互联网

今日视频链接1
今日视频链接2

视频1 P1

视频1 P2

视频1 P3

云存储用来存储图片
云数据库用来存储用户的一些数据以及图片路径之类的
云函数用来处理小程序端无法完成的逻辑
openid是当前用户的唯一标识

视频1 P5

微信小程序 没有找到可以构建的npm包
好像是得需要一个package.json

引入button,

{
  "usingComponents": {
    "van-button": "@vant/weapp/button"
  }
}

那个路径就是就是以miniprogram_npm为根目录的相对路径在这里插入图片描述
如何看Vant API
card api
其中property就是这个组件的属性,slot我不知道,外部样式类指的就是可以对组件内的东西自定义样式
另外,外部样式类无法覆盖框架内部样式的相同类目,因为虽然权重相同,页面样式先加载,框架样式后加载

视频1P7

云函数获取openid

const cloud = require('wx-server-sdk')

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

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

下面的需求是,如果数据库集合里没有当前用户(openid)的用户信息,那么就调用数据库API将当前用户的信息存储进云数据库中,如果有就不存,最后跳转到新的页面去
下面可以看到第一个then中的参数是一个方法,这个方法返回值还是一个promise对象(就是count()),这是异步函数的连续调用方法。第二个then接收的res就是count()的返回值

getUserInfo: function(res) {
	const db = wx.cloud.database();
	const userInfo = db.collection('userInfo');
    wx.cloud.callFunction({
      name: 'getOpenId'
    }).then(res => {
      let openid = res.result;
      return userInfo.where({
        _openid: openid
      }).count()
    }).then(res => {
      let countNum = res.total;
      if (countNum == 0) {
        userInfo.add({
          data: res.detail.userInfo,
        }).then(res => {
          console.log("添加用户信息成功");
        }).catch(err => {
          console.error(err);
        })
      }
      wx.navigateTo({
        url: '../add/add'
      });
    });
  }

视频1P8

promise风格连续then

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: 'mouse.jpg',
          filePath: tempFilePaths[0], // 文件路径
        }).then(res => {
          // get resource ID
          return photos.add({
            data: {
              image: res.fileID
            }
          })
        }).then(res => {
          console.log(res)
        })
      },
      fail: err => {
        console.error(err);
      }
    })

生成随机文件名,留意下面的`${Date.now()}``方法,即eval里面的值,然后以字符串形式返回

let cloudPath = `${Date.now()}-${Math.floor(Math.random(0, 1) * 1000)}` + filePath.match(/\.[^.]+?$/)

其中appdata可以看当前页面里的数据
在这里插入图片描述
wx.showLoading(Object object)需主动调用 wx.hideLoading 才能关闭提示框

为什么options里存着用户购的openid呢,这是因为这个页面是通过index进入的,而index页面进入到该页面的时候,使用的是<navigator url='../user/user?id={{item._openid}}'>

onLoad: function(options) {
    console.log(options)
    wx.showLoading({
      title: '数据加载中',
    })
    userInfo.where({
      _openid: options.id
    }).get().then(res => {
      this.setData({
        userInfo: res.data[0]
      })
    })
    photos.where({
      _openid: options.id
    }).get().then(res => {
      this.setData({
        photos:res.data
      })
    });
    wx.hideLoading();
  }

视频1P10

getTempFileURL可以promise风格

视频1P11

视频2P1

视频2P2

添加自定义组件一律都tm在app.json里加,别tm像老师那样在具体页面加,费死劲了
也不要像老师那样在每个页面的js里获取数据库引用,直接在app.js添加全局数据

App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明:
        //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境(第一个创建的环境)
        env: 'xly',
        traceUser: true,
      })
    
    }
    const db = wx.cloud.database();
    const products = db.collection('products');

    this.globalData = {
      products: products
    }
  }
})

然后再在具体页面获取

无论是云函数还是小程序,跟云数据库和云函数相关的操作,都要在cloud.init之后进行
云函数向数据库添加数据,不会自动添加openid

补充:获取数据库中数据个数并赋值
下面的代码会失败,因为javascript的异步机制,异步方法会立刻返回继续执行下一步的log方法,then里面的方法会加到消息队列里,等有结果返回了,then里面的方法才会执行。

addData: function(event) {
    let count;
    products.count().then(res=>{
      count=res.total;
    })
    console.log(count);
}

改成下面的就好

addData: async function(event) {
    let count;
    await products.count().then(res=>{
      count=res.total;
    })
    console.log(count);
}

视频2P18

现在小程序端也可以进行批量删除了

标签:count,openid,day9,视频,res,鸟云,犀牛,cloud,wx
来源: https://blog.csdn.net/dominic_z/article/details/104790162