{"id":13486501,"url":"https://github.com/imageslr/weapp-library","last_synced_at":"2025-05-16T12:10:18.423Z","repository":{"id":45985160,"uuid":"150964385","full_name":"imageslr/weapp-library","owner":"imageslr","description":"“在线借书平台”微信小程序：连接读者与图书馆的借书平台、读者的图书资料库与书单系统。30+ 页面，多个可复用组件，微信小程序开发入门。提供本地 mock server 解决方案。","archived":false,"fork":false,"pushed_at":"2022-10-19T01:36:32.000Z","size":24244,"stargazers_count":1106,"open_issues_count":4,"forks_count":270,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-03-26T08:03:43.588Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://imageslr.github.io/weapp-library/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imageslr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-30T12:13:28.000Z","updated_at":"2025-03-26T00:31:14.000Z","dependencies_parsed_at":"2023-01-20T04:31:14.517Z","dependency_job_id":null,"html_url":"https://github.com/imageslr/weapp-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imageslr%2Fweapp-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imageslr%2Fweapp-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imageslr%2Fweapp-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imageslr%2Fweapp-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imageslr","download_url":"https://codeload.github.com/imageslr/weapp-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246777832,"owners_count":20832032,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T18:00:47.292Z","updated_at":"2025-04-02T09:02:13.765Z","avatar_url":"https://github.com/imageslr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","前端开发框架及项目","Demo"],"sub_categories":["其他_文本生成、文本对话","可以直接运行成功"],"readme":"## 在线借书平台\n\n**如果你觉得这个仓库有用，请点一个 Star 支持一下我，谢谢！**  \n如果对哪部分代码有疑问或者需要我讲一下设计和开发的整体理念/部分细节，可以开一个 Issue。欢迎大家与我交流。\n\n\u003e **欢迎关注本项目使用 Taro 重构后的版本**：[taro-library](https://github.com/imageslr/taro-library)，仅包含三个示例页面，非常简单。面向人群主要是 Taro/React/Redux 的初学者，目的是提供一个简单的实践项目，帮助理解 Taro 与 Redux 的配合方式与 Taro 的基本使用。本项目还提供了一个快速搭建本地 mock 服务的解决方案。\n\n\n### 扫码体验 (最近云服务器到期，不可用，请在本地开发者工具运行)\n\u003cimg src=\"https://imageslr.github.io/weapp-library/assets/img/weapp_code.f16279a1.png\" width=250 /\u003e\n\n\u003e 首次使用时 (例如: 获取验证码)，可能会有错误弹窗。多尝试几次即可。\n\n\u003cdiv id=\"mock-server\"\u003e\u003c/div\u003e\n\n### 运行本地 Mock Server\n本项目仅提供小程序的开源代码，暂无对应后端服务，需要自行在本地启动 Mock Server。\n\n推荐运行环境：nodejs v10.10.0，gulp v3.9.1。启动方法如下：\n\n```\n# 在项目根目录下执行\ncd simplest-mock-server\n\n# 安装依赖\nnpm install\n\n# 启动 mock 服务\ngulp mock\n```\n\n默认启动端口是 3000，如有区别，请修改 `api/request.js` 中的 `BASE_URL` 常量。关闭 `gulp mock` 终端进程，模拟网络中断场景；修改 [/simplest-mock-server/server.js](https://github.com/imageslr/weapp-library/tree/master/simplest-mock-server/server.js) 中的延迟时长，模拟 timeout 场景。\n\n如果在 mac 启动时报错：“无法打开 fse.node：来自身份不明的开发者“，请前往“系统设置 - 安全性与隐私 - 通用 - 允许从以下位置下载的 App”，点击“仍然允许“，然后再次执行 `gulp mock`。这里可能会有两次错误。\n\n\u003e 这个功能拆分到了单独的仓库里，请查看 [simplest-mock-server](https://github.com/imageslr/simplest-mock-server)，**一个开箱即用的搭建本地 mock 接口的工具**。\n\n### 搭建云托管 Mock Server\n\n本项目提供了一个可以在线预览的小程序版本，扫码即可上手体验，这需要部署线上的 mock 服务。过去主要使用 [easy-mock](https://github.com/easy-mock/easy-mock) 提供的在线平台，但现在这个项目已经不再维护。也有一些开发者提供的[个人服务器](https://github.com/easy-mock/easy-mock/issues/443)，但还是存在服务不可用的风险。如果自己购买一台服务器来运行 mock 服务，又会浪费资源。\n\n在这个项目中，我使用微信开放平台的云开发能力来部署 mock server，成本极低，十分方便。操作步骤主要参考了[云托管文档 - 使用指南](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/container/guidance.html)，需要提前了解 Docker 与 Dockerfile 概念：\n\n1. 开通云托管功能（按量计费），新建一个服务，命名为 `weapp`：\n    \u003cimg src=\"assets/04-26-19-51-00.png\" \u003e\n\n2. 在 `/simplest-mock-server` 目录下创建 `Dockerfile` 文件，写入以下内容：\n\n    ```\n    # https://hub.docker.com/_/node\n    FROM node:10.10.0-slim\n\n    # Create and change to the app directory.\n    WORKDIR /usr/src/app\n\n    # Copy application dependency manifests to the container image.\n    # A wildcard is used to ensure both package.json AND package-lock.json are copied.\n    # Copying this separately prevents re-running npm install on every code change.\n    COPY package*.json ./\n\n    # Install production dependencies.\n    RUN npm install --only=production\n\n    RUN npm install -g gulp\n\n    # Copy local code to the container image.\n    COPY . ./\n\n    # Run the web service on container startup.\n    CMD [ \"gulp\", \"mock\" ]\n    ```\n\n3. 在第一步的服务中新建版本，上传 `/simplest-mock-server` 文件夹，监听端口设置为 `3000`：\n    \n    \u003cimg width=\"400px\" src=\"assets/04-26-19-53-08.png\"\u003e\n\n4. 小程序的 `onLaunch()` 中调用：`wx.cloud.init({ env: \"环境id\" })`\n\n5. 修改小程序中调用接口的代码 `api/request.js`：\n    \n    \u003cimg src=\"assets/04-26-20-59-19.png\" \u003e\n\n### 文档\n[点击查看](https://imageslr.github.io/weapp-library)\n\n### UI\n![ui](./assets/ui.png)\n\n### 组件化\n在线借书平台小程序——我的——组件展示\n\n![组件展示](./assets/component.png)\n\n### 文件结构\n\n```\n.\n├── apis                  // 网络请求封装\n├── app.js\n├── app.json\n├── app.wxss\n├── component-demos       // 组件展示\n├── components            // 可复用组件\n│   ├── async-button      // 异步按钮\n│   ├── async-switch      // 异步切换器\n│   ├── collapse          // 可折叠容器\n│   ├── load-more         // 加载更多\n│   ├── no-data           // 暂无数据\n│   ├── panel             // 带导航标题的面板\n│   ├── popup             // 底部弹出层\n│   ├── rate              // 可评半星的评分组件\n│   ├── search-bar        // 带遮罩的搜索框\n│   ├── send-code         // 发送验证码按钮\n│   ├── spinner           // 加载中动画\n│   ├── sticky            // 固定页头\n│   ├── sticky-2          // 固定页头的另一种实现\n│   ├── tab-bar           // 标签页\n│   ├── toast             // 弹出提示\n│   └── toptip            // 顶部提示\n├── images                // 图标\n├── package.json\n├── pages                 // 页面，子页面在父页面的children文件夹中\n│   └─components          // 与业务相关的特殊组件\n├── mock                  // Mock Server\n│   └── data              // Get/Post/Delete 等接口的 mockjs 模板文件\n├── project.config.json\n├── styles                // 样式\n├── templates             // 模板\n│   ├── library-list      // 图书馆列表\n│   ├── page-status-indicator // 页面加载状态，带有一个“重新加载”按钮\n│   └── showcase          // 图书项目\n└── utils                 // 辅助模块\n    ├── biz-helper.wxs    // 业务相关辅助函数，用于wxml中\n    ├── constant.js       // 业务常量\n    ├── constant.wxs      // 业务常量，用于wxml中\n    ├── es6-promise.js    // Promise语法支持\n    ├── event.js          // 全局事件\n    ├── permission.js     // 登录鉴权\n    ├── promise-polyfill.js // Promise.finally()语法\n    ├── promisify.js      // 微信小程序API Promise化\n    ├── qrcode.js         // 二维码生成\n    ├── tip.js            // 使用帮助\n    ├── utils.js          // 辅助函数\n    ├── validator.js      // 正则校验器\n    └── fundebug.js       // 错误监控\n```\n\n### 代码规范\n遵循 [JavaScript Standard Style](https://standardjs.com/readme-zhcn.html)\n\n### 声明\nDemo 仅作学习使用, 转载请注明出处。\n\n本作品获得第六届中国软件杯大赛全国一等奖、第一届微信小程序开发大赛华北赛区一等奖。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimageslr%2Fweapp-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimageslr%2Fweapp-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimageslr%2Fweapp-library/lists"}