API代碼已上傳至gitee

https://gitee.com/scut-skyworth-club/FrontEnd

對(duì)模塊做以下聲明

store 全局緩存的使用

初始化

在 app.js 中引入并且注冊(cè)初始化全局緩存

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

App({
  // todo
});

// 全局掛載store 管理數(shù)據(jù)
getApp().globalData = initGlobalData(config.appName, [
  { Storage: false, description: { key: "test", data: 1 } },
]);

initGlobalData 的入?yún)⑿问饺缦拢?/p>

{
    name: '初始化store名稱', // 可根據(jù)store隔離環(huán)境
    storeArray:[{
        Storage: bool,       // 是否進(jìn)行小程序緩存
        description:{
            key: 'test',    // 數(shù)據(jù)key
            data: 1         // 數(shù)據(jù)data
        }
    }]
}

注意，Storage:false 的數(shù)據(jù)不會(huì)存入小程序緩存，在小程序刷新后會(huì)丟失，按需求進(jìn)行設(shè)置

set get

使用全局 store 實(shí)例進(jìn)行緩存的set與get

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

// description結(jié)構(gòu)：
// {
//         Storage: bool,       // 是否進(jìn)行小程序緩存
//         description:{
//             key: 'test',    // 數(shù)據(jù)key
//             data: 1         // 數(shù)據(jù)data
//         }
// }

getApp().globalData.get(key);
// 根據(jù)key獲取緩存數(shù)據(jù)

on of

getApp().globalData.on(key, listener) 設(shè)置緩存數(shù)據(jù)監(jiān)聽(tīng)器，當(dāng)數(shù)據(jù)改變時(shí)，監(jiān)聽(tīng)器依次調(diào)用
getApp().globalData.off(key, listener) 移除監(jiān)聽(tīng)器

listener 函數(shù)的入?yún)⑿问剑?/p>

{
    oldData: 原來(lái)的數(shù)據(jù),
    newData: 新設(shè)置的數(shù)據(jù),
    ...options: 調(diào)用set時(shí)追加的參數(shù)
}

router 的使用

初始化與配置

/Router/PageOptions 文件中配置頁(yè)面參數(shù)

export default [
  {
    path: "/pages/login-or-register/login-or-register", // 跳轉(zhuǎn)路徑，根據(jù)小程序要求的路徑
    name: "login-or-register",
    meta: {
      auth: false, // 是否鑒權(quán)
    },
  },
  {
    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) {
    // 需要登錄權(quán)限的信息頁(yè)面
    // store 中獲取是否登錄的信息
    const isAuth = getApp().globalData.get("isAuth");

    if (isAuth) {
      // token 驗(yàn)證
      next();
    } else {
      wx.showToast({
        title: "請(qǐng)先登錄",
      });
      next(
        `/pages/login-or-register/login-or-register?redirect=${to.fullPath}` // 登錄成功之后重新跳轉(zhuǎn)到此頁(yè)面
      );
    }
  } else {
    next();
  }
});

export default router;

注意：router 中的攔截器是遍歷調(diào)用的，而不是鏈?zhǔn)秸{(diào)用，在內(nèi)部通過(guò)一個(gè)標(biāo)志判斷是否已經(jīng)執(zhí)行跳轉(zhuǎn)，所以攔截函數(shù)中不需要return

最后，在app.js文件中將路由器掛載到全局

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

App({
  // todo
});

// 全局掛載router
getApp().router = router;

navigate

navigate 可傳參數(shù)是跳轉(zhuǎn)路徑與 query

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

cloudFun 使用

cloudFun 初始化

/cloudFun/init.js 是小程序啟動(dòng)云開(kāi)發(fā)的方法，需要注入到app.js中

/cloudFun/cloudFun.js 初始化配置，類似于 axios 的配置方法，設(shè)置攔截器并暴露出去

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;

使用

在使用時(shí)配合攔截器進(jìn)行邏輯分離，比如進(jìn)行

• 登錄檢測(cè)驗(yàn)證
• 默認(rèn)參數(shù)的注入
• 錯(cuò)誤統(tǒng)一攔截處理

和云端云函數(shù)配合，可以在無(wú)狀態(tài)的云函數(shù)調(diào)用中加入我們需要的‘狀態(tài)’

調(diào)用方式：

getApp().cloudFun.call(name, data);
// string:name: 函數(shù)名
// object:data：數(shù)據(jù)

由于 /cloudFun/Fun/index.js 中進(jìn)行了實(shí)例接口封裝，因此也可以直接引入此文件暴漏的接口進(jìn)行調(diào)用，但注意此接口是沒(méi)有配置過(guò)默認(rèn)參數(shù)和攔截器的

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

cloudFun.call(name, data); // 參數(shù)解析如上

Interceptor

instance.before.use 和 instance.after.use 中傳入的是 Promise 鏈?zhǔn)秸{(diào)用的函數(shù)，即 .then(res=>{},err=>{}) 兩個(gè)函數(shù)

在調(diào)用云函數(shù)時(shí)是鏈?zhǔn)秸{(diào)用的形式，攔截器依次執(zhí)行并返回處理結(jié)果，因此res和err是原始出入?yún)⒒蛘呱弦徊綌r截器處理過(guò)后的參數(shù)，需要關(guān)注攔截器注入的順序

鏈?zhǔn)秸{(diào)用關(guān)鍵步驟

// 以promise形式創(chuàng)建，鏈?zhǔn)秸{(diào)用攔截器
let callFunStart = Promise.resolve(params);

// 執(zhí)行before攔截器                     {resolve,reject} 把 use(resolve,reject)中函數(shù)取出來(lái)，然后then()鏈?zhǔn)秸{(diào)用
this.before.forEach(({ resolve, reject }) => {
  callFunStart = callFunStart.then(resolve, reject);
});

// 執(zhí)行云函數(shù)
callFunStart = callFunStart.then(callF);

// 執(zhí)行after攔截器
this.after.forEach(({ resolve, reject }) => {
  callFunStart = callFunStart.then(resolve, reject);
});

auth

/cloudFun/checkAuth.js 中暴露檢測(cè) auth 狀態(tài)的函數(shù)

• getAuth : 檢測(cè)授權(quán)情況，未授權(quán)則申請(qǐng)授權(quán)，并存緩存
• checkAuth : 從緩存看是否已經(jīng)授權(quán)
• getUserInfo : 從緩存獲取用戶信息

云數(shù)據(jù)庫(kù)操作

字段格式與初始化

為避免造成對(duì)數(shù)據(jù)的污染，在/cloudBase/Models 中根據(jù)數(shù)據(jù)表的名字建立 js 文件描述字段

注意：文件名必須和云端數(shù)據(jù)庫(kù)表名一致?。?！

然后，根據(jù)需要在頁(yè)面引用，或者另外設(shè)計(jì)成單例的形式再暴露接口即可