## 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 } }; ```