79 lines
1.6 KiB
Markdown
79 lines
1.6 KiB
Markdown
## 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:
|
||
|
||
```js
|
||
// 详情请见 /miniprogram/api/base.ts
|
||
getAction(url, data);
|
||
deleteAction(url, data);
|
||
postAction(url, data);
|
||
putAction(url, data);
|
||
upload(url, { filePath });
|
||
```
|
||
|
||
建议在 /api 路径下建立各个模块的接口文件。例如：
|
||
|
||
```ts
|
||
// /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
|
||
}
|
||
};
|
||
```
|