{"id":13604028,"url":"https://github.com/bozaigao/Taro-demo","last_synced_at":"2025-04-11T22:32:24.785Z","repository":{"id":98696487,"uuid":"213607877","full_name":"bozaigao/Taro-demo","owner":"bozaigao","description":"github上能找到的taro适配Android、iOS、微信小程序、H5最佳实践项目脚手架","archived":false,"fork":false,"pushed_at":"2023-07-07T22:55:01.000Z","size":5312,"stargazers_count":277,"open_issues_count":7,"forks_count":71,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-07T17:12:33.415Z","etag":null,"topics":["android","cross-platform","h5","ios","react-native","taro","wechat"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bozaigao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-10-08T09:58:53.000Z","updated_at":"2025-03-17T13:52:50.000Z","dependencies_parsed_at":"2023-10-20T18:36:12.066Z","dependency_job_id":null,"html_url":"https://github.com/bozaigao/Taro-demo","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/bozaigao%2FTaro-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bozaigao%2FTaro-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bozaigao%2FTaro-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bozaigao%2FTaro-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bozaigao","download_url":"https://codeload.github.com/bozaigao/Taro-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489846,"owners_count":21112652,"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":["android","cross-platform","h5","ios","react-native","taro","wechat"],"created_at":"2024-08-01T19:00:38.506Z","updated_at":"2025-04-11T22:32:24.755Z","avatar_url":"https://github.com/bozaigao.png","language":"JavaScript","funding_links":[],"categories":["开源项目"],"sub_categories":["Taro1"],"readme":"# Taro-demo\ngithub上能找到的taro适配Android、iOS、微信小程序、H5最佳实践,主要涉及到了基础网络请求的封装、适配了多端的SafeArea安全区域、style工具样式引用替换scss的繁琐写法大幅度简化代码,同时解决了scss样式无法通过className进行属性传递的问题、自定义tabBar、全局模态对话框展示(解决了微信小程序端不能覆盖底部tabBar的问题)、展示了相同组件多端适配引用的方式、多端样式布局通过styleAssign注入flex、column、relative的方式实现统一化、演示了app的消息通信,通过mock数据在本地搭建服务进行前后端分离开发、本脚手架各端适配的比较完美适合用来进行全新项目的多端开发,后续基础组件持续完善中,目标是打造一个多端共用的基础组件库.\n\n### 适配进度\n- [x] H5 -- 完美适配\n- [x] React Native -- 完美适配\n- [x] 微信小程序 -- 完美适配\n\n### 目标功能\n- [ ] 打造一个多端共用的基础组件库 -- 持续开发完善中\n\n### 样式转化\n```css\n .home__search__top {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  background: white;\n  margin-left: 20px;\n  margin-right: 20px;\n }\n```\n将上述scss写法替换为以下写法,简化布局代码,同时解决了scss样式无法通过className进行属性传递的问题\n```javascript\nstyle={styleAssign([styles.udr,styles.uac,bgColor('white'),ml(20),mr(20)]}\n```\n\n### 技术栈\ntypescript+eslint+redux+taro+react-native+mock\n\n\n### 用法\n直接clone本项目进入项目根目录执行npm install操作,然后将third_changes对应目录里面的修改项替换项目根目录node_modules里面对应的组件,react-native原生端壳子[Taro-demo-rn-shell](https://github.com/bozaigao/Taro-demo-rn-shell).\n更多官方组件使用请移步[京东Taro官方文档](https://taro-docs.jd.com)、[微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/qywx-dev.html)\n- 先打开本地mock服务命令:npm run mock\n- rn端运行命令:npm run dev:rm\n- h5端运行命令:npm run dev:h5\n- 微信小程序端运行命令:npm run dev:weapp\n\n### 多端适配效果图\n![效果图1](./img/taro_1.jpeg)\n\n![效果图1](./img/taro_2.jpeg)\n\n![效果图1](./img/taro_3.jpeg)\n\n![效果图1](./img/taro_4.jpeg)\n\n使用Taro开发的线上小程序：[BusinessCard](https://github.com/bozaigao/BusinessCard)\n\n基于闲鱼fish-redux架构的Flutter项目脚手架[fish-redux-demo](https://github.com/bozaigao/fish-redux-demo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbozaigao%2FTaro-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbozaigao%2FTaro-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbozaigao%2FTaro-demo/lists"}