小程序开发框架与云函数封装实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43783814/article/details/113358070

开始

在小程序开发中，我们常常会觉得太过原生，不像vue，react等前端成熟框架，在开源社区有许多可以使用的工具包。

如全局储存，路由管理，ajax封装等，缺少这些使得我们的小程序开发有太多的冗余代码，代码很难做到清晰简洁

面对上述尴尬的情况，在和同学进行小程序开发的过程中，我自行对常用功能进行了封装，尽量模仿成熟的框架的开发模式，做到储存，路由管理，云函数责任链调用等

store 全局缓存的使用

初始化

在 app.js 中引入并且注册初始化全局缓存

import initGlobalData from "./API/store/index";

App({
  // todo
});

// 全局挂载store 管理数据
getApp().globalData = initGlobalData(config.appName, [
  { Storage: false, description: { key: "test", data: 1 } },
]);

initGlobalData 的入参形式如下：

{
    name: '初始化store名称', // 可根据store隔离环境
    storeArray:[{
        Storage: bool,       // 是否进行小程序缓存
        description:{
            key: 'test',    // 数据key
            data: 1         // 数据data
        }
    }]
}

注意，Storage:false 的数据不会存入小程序缓存，在小程序刷新后会丢失，按需求进行设置

set get

使用全局 store 实例进行缓存的set与get

getApp().globalData.set(description, ...options);

// description结构：
// {
//         Storage: bool,       // 是否进行小程序缓存
//         description:{
//             key: 'test',    // 数据key
//             data: 1         // 数据data
//         }
// }

getApp().globalData.get(key);
// 根据key获取缓存数据

on of

getApp().globalData.on(key, listener) 设置缓存数据监听器，当数据改变时，监听器依次调用
getApp().globalData.off(key, listener) 移除监听器

listener 函数的入参形式：

{
    oldData: 原来的数据,
    newData: 新设置的数据,
    ...options: 调用set时追加的参数
}

router 的使用

初始化与配置

/Router/PageOptions 文件中配置页面参数

export default [
  {
    path: "/pages/login-or-register/login-or-register", // 跳转路径，根据小程序要求的路径
    name: "login-or-register",
    meta: {
      auth: false, // 是否鉴权
    },
  },
  {
    path: "/pages/search/search",
    name: "search",
    meta: {
      auth: true,
    },
  },
];

/Router/index 文件中初始化Router并配置拦截器等信息

import Router from "./myRouter/MyRouter";
import pages from "./PageOptions";

const router = new Router(pages);

router.beforeEach((to, from, next) => {
  if (to.meta.auth) {
    // 需要登录权限的信息页面
    // store 中获取是否登录的信息
    const isAuth = getApp().globalData.get("isAuth");

    if (isAuth) {
      // token 验证
      next();
    } else {
      wx.showToast({
        title: "请先登录",
      });
      next(
        `/pages/login-or-register/login-or-register?redirect=${to.fullPath}` // 登录成功之后重新跳转到此页面
      );
    }
  } else {
    next();
  }
});

export default router;

注意：router 中的拦截器是遍历调用的，而不是链式调用，在内部通过一个标志判断是否已经执行跳转，所以拦截函数中不需要return

最后，在app.js文件中将路由器挂载到全局

import router from "./API/Router/index";

App({
  // todo
});

// 全局挂载router
getApp().router = router;

navigate

navigate 可传参数是跳转路径与 query

getApp().router.navigate('/pages/competition/competition',{
    name:'carfied,
    age:18
})

cloudFun 使用

cloudFun 初始化

/cloudFun/init.js 是小程序启动云开发的方法，需要注入到app.js中

/cloudFun/cloudFun.js 初始化配置，类似于 axios 的配置方法，设置拦截器并暴露出去

import cloudFun from "./Fun/index";
import { getAuth, checkAuth } from "./checkAuth";

const instance = cloudFun.create({ a: 1, b: 1 });

instance.before.use((params) => {
  if (params.showLoading) {
    const loadingText =
      typeof params.showLoading === "string" ? params.showLoading : "加载中";
    wx.showLoading({
      title: loadingText,
    });
    delete params.showLoading;
  }
  return params;
});

instance.after.use((res) => {
  wx.hideLoading({});
  return res;
});

export default instance;

再在app.js中绑定到全局中

import init from "./API/cloudFun/init";
import cloudFun from "./API/cloudFun/cloudFun";
App({
  onLaunch: function () {
    // 云初始
    init();

    // todo
  },
});

// 全局挂载cloudFun
getApp().cloudFun = cloudFun;

使用

在使用时配合拦截器进行逻辑分离，比如进行

登录检测验证
默认参数的注入
错误统一拦截处理

和云端云函数配合，可以在无状态的云函数调用中加入我们需要的‘状态’

调用方式：

getApp().cloudFun.call(name, data);
// string:name: 函数名
// object:data：数据

由于 /cloudFun/Fun/index.js 中进行了实例接口封装，因此也可以直接引入此文件暴漏的接口进行调用，但注意此接口是没有配置过默认参数和拦截器的

import cloudFun from "../cloudFun/Fun/index";

cloudFun.call(name, data); // 参数解析如上

Interceptor

instance.before.use 和 instance.after.use 中传入的是 Promise 链式调用的函数，即 .then(res=>{},err=>{}) 两个函数

在调用云函数时是链式调用的形式，拦截器依次执行并返回处理结果，因此res和err是原始出入参或者上一步拦截器处理过后的参数，需要关注拦截器注入的顺序

链式调用关键步骤

// 以promise形式创建，链式调用拦截器
let callFunStart = Promise.resolve(params);

// 执行before拦截器                     {resolve,reject} 把 use(resolve,reject)中函数取出来，然后then()链式调用
this.before.forEach(({ resolve, reject }) => {
  callFunStart = callFunStart.then(resolve, reject);
});

// 执行云函数
callFunStart = callFunStart.then(callF);

// 执行after拦截器
this.after.forEach(({ resolve, reject }) => {
  callFunStart = callFunStart.then(resolve, reject);
});