2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00
2025-06-19 17:33:18 +08:00

gci小程序原生开发框架

该框架用于原生小程序开发,集成了 ts + less + @vant/weapp。

quick start

  1. pnpm i
  2. 在微信开发者工具中构建npm

    工具 -> 构建npm
    该步骤会产生 /miniprogram/miniprogram_npm

  3. 开始开发。推荐使用vscode作为代码编辑器。

npm库引用

npm install 的方式

  1. pnpm i xxx
  2. 在微信开发这工具中构建npm
  3. 代码中引用库

    当引用组件时要先在页面的json文件或者 app.json 中引入:

// app.json
{
  "usingComponents": {
    "vant-btn": "@vant/weapp/button/index"
  }
}

dist 引入的方式

  1. 复制目标库的 dist 到 /miniprogram/lib
  2. 引用的时候需要具体到 /miniprogram/lib/dist
// app.json
{
  "usingComponents": {
    "vant-btn": "/lib/@vant/weapp/button/index"
  }
}

http 请求

小程序与web不同在于小程序需要指定域所以需要在 /miniprogram/config.ts 中指定访问的域。
针对小程序的 wx.request 做了简单封装,使用风格沿用 gci-boot:

// 详情请见 /miniprogram/api/base.ts
getAction(url, data);
deleteAction(url, data);
postAction(url, data);
putAction(url, data);
upload(url, { filePath });

建议在 /api 路径下建立各个模块的接口文件。例如:

// /api/auth.ts
/**
 * 获取加密字符串
 * @returns
 */
export const getEncryptedString = () => getAction('/sys/getEncryptedString');

// /pages/index.ts
const foo = async () => {
  try {
    const res = await getEncryptedString();
    // do sth
  } catch (err) {
    // do sth to handle err
  }
};
Description
No description provided
Readme 846 KiB
Languages
TypeScript 61%
Less 37.7%
JavaScript 1.3%