医美小程序实战教程

Posted 2022-02-17 低代码布道师

我们用了四篇文章介绍了医美小程序的前两句话的意思，今天还是回到程序的主题上来，继续解读官方模板

全局生命周期函数

生命周期函数有全局和页面的区别，全局就是要小程序一启动的时候就加载，而页面是需要打开具体的页面的时候执行。我们先看一下官方模板的全局生命周期函数

import WXStorage from './common/storage'
import isUserExist from './common/getUserInfo'
export default 
  async onAppLaunch(launchOpts) 
    const [shopInfo] = await Promise.all([getShop()]);
    console.log(shopInfo)
    app.dataset.state.shopInfo = shopInfo;
  ,
  onAppShow(appShowOpts) 
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  ,
  onAppHide() 
    //console.log('---------> LifeCycle onAppHide')
  ,
  onAppError(options) 
    //console.log('---------> LifeCycle onAppError', options)
  ,
  onAppPageNotFound(options) 
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  ,
  onAppUnhandledRejection(options) 
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  

async function getShop() 
  const ret = await app.dataSources['businessBeauty'].getShop()
  if (ret.code != 0) 
    return app.showToast(
      title: '获取店铺信息失败'
    );
  
  return ret?.data || []

代码的意思是在小程序启动的时候获取店铺的一个具体信息，并将获取到的信息初始化到全局变量中。这里涉及到两个知识点，解构赋值和Promise

解构赋值

我们一般变量赋值的时候是通过=号运算符，通常是个单个变量赋值，解构赋值可以给多个变量赋值，常见的解构有对象的解构和数组的解构

const [shopInfo] = await Promise.all([getShop()]);

const [shopInfo]就是给数组进行解构，把右侧数组里的值解构到shopInfo中

Promise

Promise允许构造一个异步函数进行执行，可以理解为调用异步函数的一个方法
Promise.all可以一次调用多个异步函数，接收一个数组作为参数，如果有多个异步函数，函数名以逗号作为分隔

获取店铺信息

那具体是哪个方法获取的店铺信息呢？

const ret = await app.dataSources['businessBeauty'].getShop()

这句话执行就是获取店铺信息，调用了businessBeauty数据源的getShop方法，我们可以打开数据源管理查看具体的代码

const  LcapContainer  = require('@cloudbase/lcap-business-sdk');

const SHOP_CONFIG_KEY = 'shopInfo';
const SHOP_CONFIG_DEFAULT = 
  name: '默认店铺',
  logo: 'https://tva1.sinaimg.cn/large/008i3skNgy1gspycq9ge5j305k05kjr7.jpg',
  telphones: [],
  workTime: 
    week1:  start: 480, end: 1020 ,
    week2:  start: 480, end: 1020 ,
    week3:  start: 480, end: 1020 ,
    week4:  start: 480, end: 1020 ,
    week5:  start: 480, end: 1020 ,
  ,
  location: 
    province: '',
    city: '',
    district: '',
    address: '',
  ,
;

/**
 * 查询店铺信息
 */
async function main(params, context) 
  const  services  = new LcapContainer( lcDatasourceCtx: context );
  const  tcbService:  db , utilService, configService  = services;

  // 查询店铺信息
  const shopCol = db.collection('lcap-beauty-config');
  const shopRes = await shopCol.where( key: SHOP_CONFIG_KEY ).get();
  if (utilService.isValidArray(shopRes.data)) 
    return shopRes.data[0].value;
  
  const createTime = utilService.getLocalDayjs().valueOf();
  await shopCol.add(
    key: SHOP_CONFIG_KEY,
    value: SHOP_CONFIG_DEFAULT,
    createTime,
    updateTime: createTime,
  );

  return SHOP_CONFIG_DEFAULT;


/**
 * 本地测试逻辑
 */
if ((new LcapContainer()).services.configService.isLocalDev()) 
  main().then((res) => 
    console.log('>>> res is', res);
  );

module.exports = main;

这个方法的第一句话就是对象解构语法

const  LcapContainer  = require('@cloudbase/lcap-business-sdk');

require

getShop云函数中的require我们不是特别清楚，为此我特意百度了一下require是什么
看了官方的解释，其实也是为了引入其他模块使用的，通过引入之后就可以直接调用里边定义的变量和方法

常量的定义

里边还有一个const的关键字，这个是定义常量的意思，常量的命名一般采用大写

业务逻辑

因为引入了一个第三方的SDK，目前还不清楚这个SDK是干啥用的，权且当作官方自己构造了一个数据库用来存放这些信息，但是是需要通过SDK来使用。其实我们日常开发的时候是用自建数据源，然后通过编制云函数来和数据库做交互，对外提供方法以供页面正常调用。

总结

我们这一节梳理了一下全局生命周期中如何加载店铺信息的代码，当然了其中有一部分我们目前还不知道干啥用的，也不用太担心，我们就是通过不断的梳理来增长知识的，也不可能一下子都解读明白。不断的吸收官方模板的构造思路和方案，等你自己做的时候就有参考的办法了，这也是学习官方模板的最大价值所在。