评论

#小程序云开发挑战赛#-酷传CoolTran-上上下下左右左右BABA

凭借微信云开发提供的云端存储能力,使得"CoolTran"可以内嵌于微信小程序中,让人们可以随时随地、毫无阻碍的分享文件!

1. 目标用户


广大学生和工作者


2. 需求分析


微信作为当下比较热门的社交软件,全球用户总量已达十亿。人们使用微信来办公、聊天、分享文件,但是相对于腾讯 QQ 的面对面快传功能,陌生微信用户之间的文件传输变得不够方便和快捷,此外,由于微信处于安全问题的考虑,处于消息记录中的文件往往会经常失效,这时人们更希望能有一个公共的云端存储空间用来存储这些零零散散的图片、文档等


此外,有时候人们还希望云端存储平台具备分享的功能,即一人上传文件,多人可获取


3. 实现思路


微信云开发可以让开发者无需搭建服务器就可以使用云端能力,从而弱化了后端和运维的需求,使开发者可以专注于功能实现,提高了开发效率,通过腾讯云提供的 Node.js SDK 接入对象云存储 API,可以很完美的解决云端存储问题,再加上小程序所具备的各类微信 API,可以很方便完成鉴权、分享等


此外,本项目还通过使用了腾讯云 AI 鉴黄接口,对用户所上传的图片进行审核。腾讯AI接口提供了包括图片识别,敏感信息审核在内的多种接口,满足开发者对于 AI 技术的需求,且目前功能已非常成熟


在界面展示上,为了使界面更优美,使用了 ColorUI。ColorUI 是一个 css 类的 UI 组件库,酷传 CoolTran 的界面设计就是以 ColorUI 库为基础实现的,用户界面具有鲜亮的高饱和色彩,视觉效果和用户体验尚佳


4. 设计创意


作者在创作这款小程序时,就秉承功能丰富、使用便捷的设计初衷,力求做到精益求精,将其打造为一个完美的互传文件平台


酷传 CoolTran 的 logo 由中间一个五彩灯泡和周围的多个五彩灯丝组成,中间的灯泡象征着酷传文件分享平台,周围的灯丝象征着其上的多个用户,多个灯丝与灯泡相连,灯泡将周围灯丝照亮成多种颜色,象征着酷传将各种文件分享给用户


酷传 CoolTran 名字由来:“酷传” 同 “快传” 谐音,体现小程序传输迅速的传输功能;“Transfer”(传输)的前四个字母 —— Tran 同 “传” 谐音,亦突出了小程序的主要功能 —— 文件传输


5. 效果截图








6. 功能代码展示


1. 登录模块


/**

   * 登录授权按钮

   */

  doGetUserInfo: function(e) {




    if (e.detail.userInfo) {

      try {

        wx.showLoading({

          title: '登录中',

        });




        loginUtil.doLogin().then(res => {

          console.log(res);

          this.data.isLogin = app.globalData.isLogin = res.isLogin;

          this.onLoad();

          wx.hideLoading();

        });




      } catch (e) {

        console.log(e);

      }

    } else {

      wx.showModal({

        title: '提醒',

        content: '授权后才可上传或接收文件哦',

        showCancel: true,

        confirmText: '返回授权',

        confirmColor: '#39b54a',

        success: function(res) {

          if (res.confirm) {

            console.log('用户点击了“返回授权”');

          }

        }

      });

    }

  },


2. 随机产生不重复字符


通过将产生的随机字符与文件绑定存到云存储,实现提取码提取文件功能。但是每次产生的随机字符并不一定是不冲突的,这里采用的是产生字符后,**递归**查询云存储,若冲突则继续进行上一步,直至产生的字符不存在冲突


/**

 * 产生一个不重复的code

 */

function generateCode() {

  let promise = new Promise(function(resolve, reject) {

    let code = getRandomCode();




    queryCode(code).then(res => {

      if (res[0]) {

        //  需要结束

        resolve(res[1]);

      } else {

        //  重复,不能结束,进行递归

        return generateCode();

      }

    });

  });




  return promise;

}




/**

 * 产生四位数字+字母随机字符

 */

function getRandomCode() {

  let code = "";

  const array = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 

  'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 

  'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 

  'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];




  for (let i = 0; i < 4; i++) {

    let id = Math.round(Math.random() * 61);

    code += array[id];

  }

  return code;

}




/**

 * 从云数据库中查询code

 */

function queryCode(code) {

  let promise = new Promise(function(resolve, reject) {

    //  result[0] 代表是否需要结束,true:需要结束,false:不需要结束

    var result = [false, ""];




    wx.cloud.callFunction({

      name: "query-code",

      data: {

        code: code

      },

      success: res => {

        let data = res.result.data;




        if (data.length === 0) {

          //  查询成功,code未重复

          result = [true, code];

        } else {

          //  查询成功,code重复,则继续生成code并判断

          result[0] = false;

        }

      },

      fail: error => {

        //  查询失败

        result[0] = true;

      },

      complete: () => {

        resolve(result);

      }

    });

  });




  return promise;

}


7. 作品体验二维码



8. 团队简介


学校:西安电子科技大学


最后一次编辑于  2020-09-14  
点赞 2
收藏
评论

1 个评论

  • 青寒
    青寒
    2020-09-21

    思路不错。

    2020-09-21
    赞同
    回复
登录 后发表内容