微服务之玉麟宝典，呕心沥血的日常

前言

　　首先介绍下这款小程序的由来，2020年11月12号，天气晴朗，又是一天摸鱼的好时光，向往常一样来到公司，开机，吃早饭。哈哈，愉快的一天开始了，日常登录知乎刷每日推荐，突然发现众多知名博主多次提到serverless这个名词，作为菜鸟的我一脸懵，what，，这是什么东西，于是一整天的调研工作自己就开展了，

serverless

　　就像前言所说，当天就对其进行了各种了解，发现早在2014亚马逊公司就推出了这一款概念，后来Google、IBM等公司也相继推出了这一理念，直到最近几年阿里云和腾讯云相继推出后，让serverless这一款微服务走到了风口浪尖上

　　这款微服务目前并没有官方的介绍，结合本人的理解用最通俗的语言为大家介绍下这款微服务的特点吧，首先我觉得，serverless的诞生让只会js的前端成为一名“伪全栈”不再是梦，为什么这么说呢，结合小程序的云服务来说，让用户无需关注除了业务逻辑本身之外的主机管理、服务运维、配置等等事务，且服务实现用户按需使用，按使用计费，使用多少资源就付多少（这里是细化到了 CPU/内存等资源占用时间，即只要服务没有占用 CPU 或内存并不会计费）;

　　在通俗一点就是云服务都为你处理好了，作为开发者你只需要交money就OK了，哈哈，各类流量指标，日志输出，资源管理，cdn缓存等等都不需要你去处理，这样的话让前端最头疼的服务器配置就可以省略了，而你需要做什么？？当然是掏出你的node.js去写个业务的云函数，来完成你的需求即可，其他一概不用你考虑了；

此时到这里心动了嘛～～～心动不如行动，让我们一起撸起来

项目功能憧憬

　　因此小程序只是个人闲暇之时的一个小东西，因此具体何时开发完毕还遥遥无期，只能大概说下整体功能的一个想法，首先此款小程序想做一个面试题宝典，包含以下几个页面，题库列表，试题详情，个人资料，题库录入，论坛交流等几个模块，目地是让使用者可以随时随地的分享自己的知识和学习别人的知识

注: 以下内容会持续更新下去，DAY时间安排并不是按照日期进行的，只是按照写此项目来累加的，因此不一定会每天都会更新，预计明年初发布第一版小程序

DAY1

　　第一天日常，选个脚手架呗，选什么呢，抱着能省力则省力的想法，掏出前两年写过的taro吧，反正cv大法熟练了，删删减减就出一个空壳子，嗯，，就这样决定了，然后cv一天，搞定了。

深夜来临，辗转反侧，细想今日想法，如今taro都3.0版本了，我还去努力cv1.0的版本有意义嘛，哎，算了，这次我也跟着与时俱进一下呗

DAY2

　　第二天日常，早上开机干掉第一天成果，哈哈 无用功的痛心此时相信你们感觉到了，那就撸起袖子整个3.0的版本呗，因小程序对代码体积有要求，然后分包处理下，此处省略各种百度心酸，毕竟我也不会都是度娘教的，然后整个状态管理工具呗，于是选择了dva，一顿操作猛如虎的在taro里面集成了dva。嗯，此时还比较顺利，没出多大问题，接下来各种文件以及别名，路由配置呗，完美的一顿操作搞定，因为想偷懒下个taro的亲密搭档呗taro-ui。下载完成，哐，控制台报错，内心mmp，下个包还跑不动了，关机睡觉不管了

DAY3

　　第三天日常，本以为上一次开发的报错是一个很神奇的事情，开机后肯定就好了，嗯，满怀侥幸的开机，哎，满屏红的袭来告诉我这是一个惨不忍睹的现实，哎，日常百度又开始了，找呀找，找呀找，发现没找到，就去给作者提了个issues，发现是最新版本和taro-ui不兼容。。。。。此时我。。。。  后来让下载"taro-ui": "^3.0.0-alpha"版本，嗯，此时跑起来了，

DAY4

　　第四天日常，脚手架搭建完毕，撸页面呗，嗯哼嗯哼一天没卡点结束，撸出一个首页，和其他几个页面之间的跳转

DAY5

　　调研下云函数吧，因为个人开发我还是先喜欢后端接口搞定再去写对应的页面功能，然后n个小时后，发现当时搭建脚手架出现了问题，没有把云函数弄进去，哎，由于技术菜，加上对云函数还不是很了解，无法后期植入，只能面临着两个选择，1、采取小程序原生开发。2、舍弃目前脚手架重新去搭建。。     哎，心态崩了，容我思考下吧

DAY6

　　时隔多日，再次捡起，依然满怀痛心，今天我选择干掉当前脚手架，重新搭建新的，搭建中结束一天。。。。。

DAY7

　　搭建中第二天，由于对一个全新的领域的摸索总是困难的，依然是没有产出的一天

DAY8

　　搭建中第三天，今天终于有了成果，在云端发布了第一个云函数login，然后就没有没有然后了，只是尝试跑通了整个流程

DAY9

　　完善上次的云函数login，目地是采集用户信息，因个人开发者无发获取用户手机号等隐秘信息，只能退而求其次，获取一下头像，昵称等信息呗。

DAY10

　　完善login重复注册、无法实时更新问题。开发前端登录拦截，以及各种授权提示等功能，这里给大家分享一段前端异步等待、链式调用封装代码

type ListenStatus = 'INIT' | 'WAITING' | 'DONE' | 'FAIL'

interface Config {
  waitTime: number // 最多等待时长 默认20s 单位:ms
  oneceTime: number // 单次等待时长 默认 100ms 单位:ms
}

export default class ListenUserInfo {
  private config: Config

  constructor(config?: Config) {
    this.config = {
      waitTime: 200000, // 最多等待时长 默认20s
      oneceTime: 100, // 单次等待时长 默认 100ms
      ...config,
    }
  }

  status: ListenStatus = 'INIT';  //初始状态

  /**
   * @author cq
   * @param {Function} callback 要监听的函数，当用户信息不存在时，则等待授权用户信息后，再执行该 callback
   * @param {UserInfo} userInfo 用户信息
   * @return {Function} 重新生成一个函数代替 callback
   */
  createListener(callback: Function, userInfo: UserInfo) {
    return (...args) => {
      // 用户信息存在
      console.log(userInfo, !isEmpty(userInfo),'createListener')
      if (!isEmpty(userInfo)) {
        callback(...args);
        return;
      }
      this
        .wait()
        .then((status) => {  
          // 执行完等待函数看是否授权成功
          if (status !== 'DONE') {   
            return;
          }
          // 成功执行
          callback(...args);
        })
    }
  }

  async wait(): Promise<ListenStatus> {
    const { waitTime, oneceTime } = this.config;
    const waitBout = waitTime / oneceTime;   //尝试次数
    let i = 0;
    this.status = 'WAITING';  //等待

    // 在等待的过程  如果用户点击了授权 将不再进入此循坏
    while (this.status === 'WAITING' && ++i < waitBout) {
      await delay(oneceTime);   //延迟函数  每次等待100ms
    }
    const status = (this.status as ListenStatus);
    if (status !== 'INIT') {
      this.status = 'INIT';  //20ms还不授权当授权失败处理 恢复到初始值
    }
    return status;
  }
  done() {
    if (this.status === 'WAITING') {
      this.status = 'DONE';
    }
  }
  fail() {
    if (this.status === 'WAITING') {
      this.status = 'FAIL';
    }
  }
}
View Code

DAY11

　开发列表页的数据函数，多表查询、分页、排序处理、模糊搜索等等功能吧

DAY12

　　继续完善上一天的列表接口

DAY13

　　解决云端bug，本地获取微信上下文没问题，但是云端获取不到其他用户的上下文，解决方案加上await等待。

      const wxContext =await cloud.getWXContext();
　　暂时不知道原因，有人知道可以评论出来

DAY14

　　调研小程序的富文本组件，用于题库录入的使用，没有产出的一天

DAY15

　　折腾来折腾去的也没有找到很好的的组件，最终还是决定用Editor组件，结合云储存实现图片的储存上传功能

DAY16

　　害、时隔多日，终于百忙之中抽了点空又写了点功能，今天把分享好友、朋友圈，以及消耗积分查看的个人联系方式页面搞定了，哈哈，今天战果还不错，累并快乐着，由于这个小程序使用taro3.0写的，对hooks的坑网上并没有多少，文档也简陋，着实难为了我一把。之前一直用class挂载原型onShareAppMessage进行分享监听的，如今hooks并没有原型了，找了老半天才看到人家有自己自定义的hooks封装useShareAppMessage，于是就开始撸起来、最后发现原来支持的success等一系列回调被微信在今年10月废除了，哎 ，这就导致我不得不委曲求全哪怕你是假分享也要给你加积分了。。。。不说了、又要被抓去搬砖了，下回还不知道啥时候再来搞一天。年底好忙～～～

DAY17

　　嘿、又迎来了一个周一、顺带问一句大家吃饺子了吗 哈哈，今天并没有新添什么功能，而是由一个bug引起的整个列表页的查询重构，什么bug呢，在forEach循坏中使用了async 和await ，在下面打印这个数组，嗯 循坏的逻辑已经添加上了，然后在客户端去取，发现取不到，小程序给我吃了这个变量了。。。。。    后来研究找到原因了，async只对当前作用域的await生效，在外面的并不会异步等待，那为什么外面打印的数组改变了呢，原来是直接修改一个数组把它引用类型也一起改了，这就导致表面改了，实际上并没有改，哎，最后不得不向for循环进行了妥协，后来在网上查文档时发现一个词叫聚合，原来人家云开发对于多表查询提供了自己聚合查询方法lookup，而不是像自己一样粗暴的循环查询，哎，摸着石头过河总会走很多歪路的，当然换个想法也证明js真牛逼 别管你什么想法都能给你搞出来，就是啰嗦了哈哈，  通过这件事的涨了个经验，再去学习一个新的框架时，不要上来就撸，用到什么再去查什么，应该先把框架先静下心来多看几遍，即使前期很费时间，但是后期就不会发生动不动重构的问题～～

DAY18

　　又过了好几天了～～ 今天重拾回来，简单实现了下点赞功能，用户每次点赞未防止重新请求导致回到第一题从而进行的本地虚拟点赞后同步云端，评论模式的简单设想，每个题的初始评论携带题ID去进行保存，对其他评论者的回复携带题ID和评论ID去保存，暂时实现云端的存储，至于数据结构打算用客户端去处理，嗯。。。今天就实现这两点～下次再去实现客户端的评论列表结构

DAY19 - 第一版完结

　　嘿，2021年第一个周一，玉麟宝典终于赢来了完结时刻，总结下此小程序的功能吧，首先是两大模块：题库的录入、题库列表为最重要的模块。包含15个云函数，其中零散的功能有上拉加载、模糊搜索、点赞、评论（支持无限多级评论）、分享、积分制、富文本的回显与编辑等等吧，中间卡点是评论区的分级与无限下级支持评论，原来为了好渲染把数据处理成了平级，后来发现三级以后出现了分割点不准确的bug、由于这个开始的思路就是错误的后来走入误区很久、最终还是改成了树状结构进行的处理，这件事的让我明白选好数据的结构会使代码变得如鱼得水，嗯、第一版就基本到此结束吧，剩下的UI会进行抽空美化的，欢迎大家微信搜索“玉麟宝典”来评论；

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/cq1715584439/p/14029791.html