gci小程序原生开发框架
该框架用于原生小程序开发,集成了 ts + less + @vant/weapp。
quick start
- pnpm i
- 在微信开发者工具中构建npm:
工具 -> 构建npm
该步骤会产生 /miniprogram/miniprogram_npm - 开始开发。推荐使用vscode作为代码编辑器。
npm库引用
npm install 的方式
- pnpm i xxx
- 在微信开发这工具中构建npm
- 代码中引用库
当引用组件时,要先在页面的json文件或者 app.json 中引入:
// app.json
{
"usingComponents": {
"vant-btn": "@vant/weapp/button/index"
}
}
dist 引入的方式
- 复制目标库的 dist 到 /miniprogram/lib
- 引用的时候需要具体到 /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
Languages
TypeScript
61%
Less
37.7%
JavaScript
1.3%