{"id":13603961,"url":"https://github.com/FaureWu/ztaro","last_synced_at":"2025-04-11T22:32:09.449Z","repository":{"id":43594334,"uuid":"157879645","full_name":"FaureWu/ztaro","owner":"FaureWu","description":"一套基于taro, zoro的完整的微信小程序及h5开发解决方案","archived":false,"fork":false,"pushed_at":"2023-01-26T06:57:37.000Z","size":4434,"stargazers_count":38,"open_issues_count":22,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-02T19:33:00.461Z","etag":null,"topics":["h5","redux","taro","weapp","zoro"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FaureWu.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-11-16T14:38:13.000Z","updated_at":"2023-10-23T03:30:33.000Z","dependencies_parsed_at":"2023-02-14T14:50:17.930Z","dependency_job_id":null,"html_url":"https://github.com/FaureWu/ztaro","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/FaureWu%2Fztaro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaureWu%2Fztaro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaureWu%2Fztaro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaureWu%2Fztaro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FaureWu","download_url":"https://codeload.github.com/FaureWu/ztaro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223483664,"owners_count":17152821,"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":["h5","redux","taro","weapp","zoro"],"created_at":"2024-08-01T19:00:37.318Z","updated_at":"2024-11-07T08:30:38.761Z","avatar_url":"https://github.com/FaureWu.png","language":"JavaScript","funding_links":[],"categories":["示例项目"],"sub_categories":["Taro 1"],"readme":"# ztaro\n\n结合小程序框架[taro](https://github.com/NervJS/taro)，状态管理库[zoro](https://github.com/FaureWu/zoro)，微信小程序开发，h5开发实践方案\n\n## 教程\n* [微信小程序及h5,基于taro，zoro最佳实践探索](https://www.jianshu.com/p/7c27dbbc080f)\n\n## 演示\n\n\u003cimg src=\"https://img.baobeicang.com/user_upload/rc-upload-1542346706655-4.gif\" width=\"200\" /\u003e\u003cimg src=\"https://img.baobeicang.com/user_upload/rc-upload-1542346706655-6.gif\" width=\"200\" /\u003e\n\n## 特性\n\n\u003e 在taro框架的基础上集成了如下简易开发特性，如需了解taro框架，请移步[taro官方网站](https://taro.js.org/)\n\n* redux轻量级框架zoro，用法类似与dva，极易上手\n* 基于[express](http://www.expressjs.com.cn/)，[faker](https://github.com/Marak/faker.js)集成了小程序端，h5端简易数据模拟方案，实现真正的前后端分离式开发\n* 扩展request接口，支持restful api冒号参数\n* 提供完善的错误处理机制\n* 结合真实生产的环境简易配置方案\n\n## 如何安装\n\n```bash\n$ npm install -g @tarojs/cli\n$ npm install\nor\n$ yarn global add @tarojs/cli\n$ yarn\n```\n\n## 开发前准备\n\n本脚手架中config/config.js中的配置都是不可用的配置，需要在启动前，修改为你对应的配置\n\n* server 对应不同环境下的api服务器地址\n* oss 对应不同环境下的阿里云oss配置\n\n## 图片资源上传阿里云oss服务器\n\n由于小程序包大小限制，为了节省空间，我们通常会将图片资源上传到远程服务器，目前taro的plugin还不支持自定义，\n因此我们在编译成微信小程序引入gulp执行上传任务，插件地址[gulp-alioss-upload](https://github.com/FaureWu/gulp-alioss-upload)\n\n在编译成h5过程中，我们利用webpack的loader机制，编写了相同功能的[alioss-upload-loader](https://github.com/FaureWu/webpack-alioss-upload-loader)\n\n以上两个工具的配置一致，都在config/config.js中配置\n```js\nmodule.export = {\n  oss: {\n    // BUILD_ENV === dev环境下的阿里云配置\n    dev: {\n      accessKeyId: '这里是dev环境阿里云oss key',\n      accessKeySecret: '这里是dev阿里云oss secrect',\n      endpoint: 'https://**********.aliyuncs.com',\n      region: '*********',\n      bucket: '这里是dev阿里云oss bucket',\n    },\n    // BUILD_ENV === prod环境下的阿里云配置\n    prod: {\n      accessKeyId: '这里是prod环境阿里云oss key',\n      accessKeySecret: '这里是prod阿里云oss secrect',\n      endpoint: 'https://**********.aliyuncs.com',\n      region: '*********',\n      bucket: '这里是prod阿里云oss bucket',\n    },\n    path: 'src/assets/', // 这里指定oss资源文件根目录\n    prefix: '@oss', // 指定需要上传资源的前坠同时也是资源根路径的别名\n    formats: ['png', 'jpeg', 'jpg', 'svg'], // 指定可上传的资源格式\n  },\n```\n\n在js中引用\n```js\nconst image = '@oss/logo.jpeg'\n```\n\n在样式中引用\n```css\n.app {\n  background-image: url(\"@oss/logo.jpeg\")\n}\n```\n\n在json中引用\n```json\n{\n  \"logo\": \"@oss/logo.jpeg\"\n}\n```\n\n最终都会被替换成上传后的真实阿里云oss地址，不支持通过require或者import导入资源\n```js\nimport logo from '@oss/logo.jpeg' // 该写法错误，不支持\n```\n\n## 如何开发\n\n\u003e 在前后端分离的应用中，往往我们开始编写前端界面及逻辑时，后台的api接口仅仅提供了swaggar文件，可能还没编写代码，可能还没部署到开发环境，这样我们的工作便会处处受困于后台，因此我们可以在本地启动数据模拟服务，编写简易的后台api返回\n\n```bash\n$ npm run mock:weapp # 启动小程序端\n$ npm run mock:h5 # 启动h5端\n```\nor\n```bash\n$ yarn mock:weapp # 启动小程序端\n$ yarn mock:h5 # 启动h5端\n```\n\n以上命令会启动app，并且在本地启动mock服务`127.0.0.1:3000`，我们只需在mock目录下编写数据mock，在src中编写界面及逻辑即可\n\n\u003e 值得注意的是在mock模式下，我们需要配置`project.config.json`文件下的`urlCheck: false` \n\n---\n\n当我们某些模块编写完成，后台api也已就绪，需要进行联调阶段时，首先我们改写`config/config.js` 文件，配置dev环境下的api服务器地址\n\n```js\nmodule.exports = {\n  server: {\n    dev: 'https://devapiserver',\n    ...\n  },\n  ...\n}\n```\n\n\u003e 需要在微信后台配置相关安全域名，或者临时性的修改`urlCheck: false`\n\n执行如下命令，启动开发联调环境\n\n```bash\n$ npm run dev:weapp # 启动小程序端\n$ npm run dev:h5 # 启动h5端\n```\nor\n```bash\n$ yarn dev:weapp # 启动小程序端\n$ yarn dev:h5 # 启动h5端\n```\n\n执行以上命令不会在本地启动mock服务器，直接连接dev环境服务器\n\n---\n\n## 如何编写MOCK\n\n所有的mock api服务均放在mock目录下，该目录下的所有js将会自动注册到express服务器中，无需额外的引入\n\nmock服务导出格式，参考mock/todos.js\n```js\nmodule.exports = {\n  'GET /v1/todos': getTodos,\n  'POST /v1/todo': addTodo,\n  'DELETE /v1/todo/:id': deleteTodo,\n  'GET /v1/todo/httpStatusError': httpStatusError,\n  'GET /v1/todo/serviceError': serviceError,\n}\n```\n\n数据模拟查看[faker](https://github.com/Marak/faker.js)文档\n\napi编写参考[express](http://www.expressjs.com.cn/)\n\n## 如何打包\n\n我们需要在产品开发完成后打包dev环境给测试，可执行如下命令\n\n```bash\n$ npm run build:weapp-dev # 打包dev环境小程序包\n$ npm run build:h5-dev # 打包dev环境h5包\n```\nor\n```bash\n$ yarn build:weapp-dev # 打包dev环境小程序包\n$ yarn build:h5-dev # 打包dev环境h5包\n```\n\n当测试完成准备上线，可执行如下打包命令\n\n```bash\n$ npm run build:weapp # 打包dev环境小程序包\n$ npm run build:h5 # 打包dev环境h5包\n```\nor\n```bash\n$ yarn build:weapp # 打包dev环境小程序包\n$ yarn build:h5 # 打包dev环境h5包\n```\n\n最终打包目录在dist文件夹中\n\n## request异步请求的使用\n\n该项目中`src/utils/request.js`中对Taro.request进行了一次封装，增强了部分特性，使用方法同Taro.request\n\n* 支持冒号参数替换\n```js\n// request参数举例\nrequest({\n  url: '/api/v1/todo/:id',\n  data: {\n    id: '1234343',\n  }\n})\n```\n\n* 捕获request异步请求错误，并抛到全局中处理，可以更好的处理错误而不阻断其他业务的进行\n\n\u003e 推荐所有的请求都走request，否则异步错误无法捕获\n\n## UI组件框架\n\n未引入UI组件框架，如需要，请自行引入，可用[taro-ui](https://github.com/NervJS/taro-ui)\n\n## 数据处理框架zoro\n\n* 默认引入mixins插件，用于扩展model，[mixins插件](https://github.com/FaureWu/zoro-plugin/blob/master/doc/MIXINS_PLUGIN.md)\n* 默认引入loading状态管理插件，[loading插件](https://github.com/FaureWu/zoro-plugin/blob/master/doc/LOADING_PLUGIN.md)\n\nzoro框架的使用这里不在描述，自行查看文档[zoro](https://github.com/FaureWu/zoro)\n\n\u003e 本方案中以todos的demo演示了整体框架使用方法\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFaureWu%2Fztaro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFaureWu%2Fztaro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFaureWu%2Fztaro/lists"}