[Applet] rhino birds cloud development training day9

Today 1 video link
today Video Link 2

Video 1 P1

Video 1 P2

Video 1 P3

Cloud storage for storing image
cloud database for some data and the like stored in the image path of a user's
cloud applet logic functions for handling end can not be completed
openid identifies the current user is the only

Video 1 P5

Micro letter applet does not find npm package can build
seems to be too need a package.json

Introduction button,

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

That path is that to miniprogram_npm the root directory of the relative path
to see how Vant API
Card API
in which the property is the property of this component, slot I do not know, external style class refers to customize the style of things within the components
In addition, external style class can not cover the same category internal frame style, because although the same weight, style page to load after load frame styles

Video 1P7

Cloud function to get 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
}

The following requirements are, if there are no current user database collection (openid) user information, then call the database API to the current user's information is stored into the database in the cloud, if there are not kept, and finally jump to a new page to
the following you can see the first thenof the argument is a method that returns a value or promisean object (that is count()), which is a continuous function of asynchronous method call. Then the second received resis count()the return value

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'
      });
    });
  }

Video 1P8

promise continuous then style

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);
      }
    })

Generating a random file name, note the following `$ {Date.now ()}` `method, i.e., a value eval inside, and then returned as a string

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

Appdata which can be seen in the current page of data

wx.showLoading(Object object)need to take the initiative to call wx.hideLoading to close the prompt box

Why have kept openid user options to buy it, because this page is accessible through the index, while the index page into the page when using<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();
  }

Video 1P10

getTempFileURLYou can promise style

Video 1P11

Video 2P1

Video 2P2

Adding custom components and all of them in app.json tm Riga, do not tm added that as a teacher in a particular page, the Si Jin fee
and do not get as referenced in the database js each page's like a teacher, add a global data directly in 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
    }
  }
})

And then get specific page

Whether it is a function of cloud or small program, with clouds and cloud database functions related operations, should be in cloud.initfollowed by
a cloud function to add data to the database, are not automatically added openid

NOTE: Get the number of data in the database and assigns
the following code will fail due to the asynchronous javascript mechanism, the method of log asynchronous method returns immediately to the next step, the then methods which will be added to the message queue, the result was returned, etc. up, then inside the method will be performed.

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

Like into the following

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

Video 2P18

Now the small end of the program can also delete a batch