All Projects → bozaigao → Taro Demo

bozaigao / Taro Demo

github上能找到的taro适配Android、iOS、微信小程序、H5最佳实践项目脚手架

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Taro Demo

Umi Dva Antd Mobile
基于 umi + dva + antd-mobile 快速构建H5 APP 应用。
Stars: ✭ 427 (+86.46%)
Mutual labels:  h5, wechat
Mars
Mars is a cross-platform network component developed by WeChat.
Stars: ✭ 15,912 (+6848.47%)
Mutual labels:  cross-platform, wechat
Hqchart
HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口
Stars: ✭ 1,126 (+391.7%)
Mutual labels:  h5, wechat
Wechat H5 Boilerplate
为腾讯微信优化的H5动效模板,帮助你快速构建全屏滚动型H5页面。
Stars: ✭ 2,571 (+1022.71%)
Mutual labels:  h5, wechat
Ecjia Daojia
EC+(ecjia)到家是一款可开展O2O业务的移动电商系统。它包含:移动端APP,采用原生模式开发,覆盖使用iOS 及Android系统的移 动终端;后台系统,针对平台日常运营维护的平台后台,针对入驻店铺管理的商家后台,独立并行;移动端H5,能够灵活部署于微信及其他APP、网页等。
Stars: ✭ 547 (+138.86%)
Mutual labels:  h5, wechat
Wxinlineplayer
🤟Super fast H.264/H.265 FLV player
Stars: ✭ 873 (+281.22%)
Mutual labels:  h5, wechat
Neuchar
Senparc.NeuChar 跨平台信息交互标准
Stars: ✭ 96 (-58.08%)
Mutual labels:  cross-platform, wechat
Luch Request
luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库,它有更小的体积,易用的api,方便简单的自定义能力。
Stars: ✭ 219 (-4.37%)
Mutual labels:  wechat
Oejia weshop
odoo 微信小程序商城模块 (WeChat Mini Program for Odoo)
Stars: ✭ 224 (-2.18%)
Mutual labels:  wechat
Jpsxdec
jPSXdec: cross-platform PlayStation 1 audio and video converter
Stars: ✭ 219 (-4.37%)
Mutual labels:  cross-platform
Wechat Weapp Grouputils
微信小程序群应用,包括群通知、群接龙、群投票、群通讯录4大功能
Stars: ✭ 222 (-3.06%)
Mutual labels:  wechat
Xrtk Core
The Official Mixed Reality Framework for Unity
Stars: ✭ 219 (-4.37%)
Mutual labels:  cross-platform
Tomboy Ng
Next generation of Tomboy
Stars: ✭ 226 (-1.31%)
Mutual labels:  cross-platform
Midir
Cross-platform realtime MIDI processing in Rust.
Stars: ✭ 221 (-3.49%)
Mutual labels:  cross-platform
Oh My Wechat
微信小助手的安装 / 更新工具。
Stars: ✭ 2,756 (+1103.49%)
Mutual labels:  wechat
Opmon
Currently moving the project to https://github.com/OpMonTeam/OpMon-Godot
Stars: ✭ 221 (-3.49%)
Mutual labels:  cross-platform
Sqlitebrowser
Official home of the DB Browser for SQLite (DB4S) project. Previously known as "SQLite Database Browser" and "Database Browser for SQLite". Website at:
Stars: ✭ 15,801 (+6800%)
Mutual labels:  cross-platform
Xplan
A rotating earth H5 page with Vue and threejs
Stars: ✭ 226 (-1.31%)
Mutual labels:  h5
Textosaurus
Cross-platform text editor based on Qt and Scintilla.
Stars: ✭ 224 (-2.18%)
Mutual labels:  cross-platform
Node Powershell
Easily run PowerShell from your NodeJS app
Stars: ✭ 222 (-3.06%)
Mutual labels:  cross-platform

Taro-demo

github上能找到的taro适配Android、iOS、微信小程序、H5最佳实践,主要涉及到了基础网络请求的封装、适配了多端的SafeArea安全区域、style工具样式引用替换scss的繁琐写法大幅度简化代码,同时解决了scss样式无法通过className进行属性传递的问题、自定义tabBar、全局模态对话框展示(解决了微信小程序端不能覆盖底部tabBar的问题)、展示了相同组件多端适配引用的方式、多端样式布局通过styleAssign注入flex、column、relative的方式实现统一化、演示了app的消息通信,通过mock数据在本地搭建服务进行前后端分离开发、本脚手架各端适配的比较完美适合用来进行全新项目的多端开发,后续基础组件持续完善中,目标是打造一个多端共用的基础组件库.

适配进度

  • [x] H5 -- 完美适配
  • [x] React Native -- 完美适配
  • [x] 微信小程序 -- 完美适配

目标功能

  • [ ] 打造一个多端共用的基础组件库 -- 持续开发完善中

样式转化

 .home__search__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: white;
  margin-left: 20px;
  margin-right: 20px;
 }

将上述scss写法替换为以下写法,简化布局代码,同时解决了scss样式无法通过className进行属性传递的问题

style={styleAssign([styles.udr,styles.uac,bgColor('white'),ml(20),mr(20)]}

技术栈

typescript+eslint+redux+taro+react-native+mock

用法

直接clone本项目进入项目根目录执行npm install操作,然后将third_changes对应目录里面的修改项替换项目根目录node_modules里面对应的组件,react-native原生端壳子Taro-demo-rn-shell. 更多官方组件使用请移步京东Taro官方文档微信小程序官方文档

  • 先打开本地mock服务命令:npm run mock
  • rn端运行命令:npm run dev:rm
  • h5端运行命令:npm run dev:h5
  • 微信小程序端运行命令:npm run dev:weapp

多端适配效果图

效果图1

效果图1

效果图1

效果图1

使用Taro开发的线上小程序:BusinessCard

基于闲鱼fish-redux架构的Flutter项目脚手架fish-redux-demo

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].