腾讯云开发学习小结

#tcb-study

##云开发作业 第五章

###将教程范例的cloudtohttp函数使用sdk的getTempFileURL进行替换。

####实现思路：新增异步函数getImgurl一次性取回所有的图链接，在客户端js（index.js和admin.js中对应的地方也要改为异步）中循环取出，考虑到图库可能被修改，在前端加判断给没图的设置为默认图片

######本地函数 util.js index.js admin.js

async function getImgurl(src) {
    //console.log(typeof(src));
    //console.log(src);
    //这里的src不是拆开传进来
    if(src==""){
        return "";
    }
    let imgs = await cloud.getTempFileURL({
        fileList: src
    }).then(res=>{
        return res
    })
    return imgs;
}

...
            let urls = await getImgurl(tempitem.imgs);
            //一次性取回所有的图链接
            for(let u in urls.fileList){
                let img = document.createElement('img');
                //判断一下有没有失效，如果图片丢了就换张默认的上去
                if(urls.fileList[u].code === 'SUCCESS') {
                    img.src = urls.fileList[u].tempFileURL;
                } else {
                    img.src = 'https://tse4-mm.cn.bing.net/th/id/OIP.dsanUfCFTpQjPIE7rY7W6AHaHZ?pid=Api&rs=1';
                }
                //img.src = urls.fileList[u].tempFileURL;
                img.setAttribute('onclick','previewnetimg("'+img.src+'")');
                itemimages.appendChild(img);
            }
...

##云开发作业 第四章

###将教程范例（意见反馈平台DEMO）中的管理端部分的列表加载变成实时数据库监听形式触发。

####实现思路：新增watch函数用来监听数据库，列表刷新还用原来的方法

######本地函数 admin.js

/**
 * 监听意见表变化
 */
function watch(){
    const _ = db.command
    const watcher = cloud.database().collection('tpark').where({
        //因为是监听的整个表，条件是编的，请随意
        _openid: _.neq('X')
    }).watch({
        onChange:function(res){
            console.log('res');
            //用户端有新提交时，看看数据变化
            console.log(res);
            initlist();
        },
        onError:function(err){
            console.error('the watch closed because of error', err)
        }
    });
    //这里的watcher可以关闭，绑定到页面的按钮上，比如“我现在不想工作”，就可以把这个给关掉
    //watcher.close()
}

###用户端列表加载云函数适配超过100条的场景，采用promise all的形式进行改造，使其可以支持超过100条。
####实现思路：用户端数据获取改造参考的init-admin云函数，同样也是新增watch函数用来监听

######云函数 init-user

const db = cloud.database();
const _ = db.command;

const MAX_LIMIT = 100;

exports.main = async (event, context) => {
  const auth = cloud.auth().getUserInfo();
  const uid = auth.uid;
  let res = {};
  //意见反馈数据集合总数
  const countResult = await db.collection('tpark').count();
  const total = countResult.total;
  const batchTimes = Math.ceil(total / MAX_LIMIT);
  console.log(batchTimes);
  const tasks = []
  //取数据
  for (let i = 0; i < batchTimes; i++) {
    const promise = await db.collection('tpark').where({
      _openid:uid
    }).skip(i * MAX_LIMIT).limit(MAX_LIMIT).orderBy('adddue', 'desc').get();
    tasks.push(promise);
  }
  //数据拼接
  //https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
  res.list = (await Promise.all(tasks)).reduce((acc, cur) => {
    return {
      data: acc.data.concat(cur.data),
      errMsg: acc.errMsg,
    }
  }).data;
  res.code = 0;
  return res;
};

######本地函数 index.js

/**
 * 加载意见列表（调用云函数：init-user）
 */
function initlist(){
    //实时监听
    //collection监听方法是将有变化的数据集的新增数据追加到原数据集合中
    //如果按课程提供的代码，展示结果有点辣眼前
    //所以统一用云函数取数据来刷新列表
    cloud.callFunction({
        name: 'init-user'
    })
    .then((res) => {
        refreshlist(res.result.list);
    });
}

/**
 * 监听意见表变化
 */
function watch(){
    const watcher = cloud.database().collection('tpark').where({
        _openid:uid
    }).watch({
        onChange:function(res){
            initlist();
        },
        onError:function(err){
            console.error('the watch closed because of error', err)
        }
    });
}

大概是大前天吧，想把腾讯云主机改造一下，结果在官网发现了这个QQ群的WEB训练营的广告，因为进得比较晚，没赶上直播课，就把录播课程下载下来大概看了一下，顺手把这期的做业也做了。
没啥正经开发经验，磕磕绊绊地总算是按题目要求完成了。
这里先把部分代码和思路放上来做个临时记录，后续还是得优化一下代码，起码让自己用起来舒服。
老师说这期完结会有礼品，好期待，正好有个想法打算用代码实现出来，感觉用云开发的方式实现会更有意思。
慢慢来吧，这个小项目从现在开始，算是启程了。

#活动链接：云开发零基础训练营