All Projects → qit-team → Taro Yanxuan

qit-team / Taro Yanxuan

Licence: mit
首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native) - By 趣店 FED

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Taro Yanxuan

Taro-sign
Taro 开发的 思政教育签到小程序
Stars: ✭ 27 (-98.88%)
Mutual labels:  taro
Taro-v2ex-weapp
awesome v2ex weapp 😎 目前支持微信小程序、支付宝小程序、h5
Stars: ✭ 25 (-98.97%)
Mutual labels:  taro
taro-playground
The Taro Playground App is a cross-platform application developed using Taro, to help developers develop and debug Taro applications.
Stars: ✭ 33 (-98.63%)
Mutual labels:  taro
patrick-wechat
⭐️🐟 questionnaire wechat app built with taro, taro-ui and heart. 微信问卷小程序
Stars: ✭ 74 (-96.94%)
Mutual labels:  taro
taro-best-practices
使用 Taro 开发微信小程序、编译 H5 + React Native 的最佳实践
Stars: ✭ 118 (-95.12%)
Mutual labels:  taro
weapp-clover
由零打造的,基于taro,zoro的电商小程序实战项目
Stars: ✭ 77 (-96.81%)
Mutual labels:  taro
Gitter
Gitter for GitHub - 可能是目前颜值最高的GitHub微信小程序客户端
Stars: ✭ 3,555 (+47.14%)
Mutual labels:  taro
Taro
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
Stars: ✭ 30,230 (+1151.24%)
Mutual labels:  taro
tarojs-router-next
Taro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa体验一致的路由中间件
Stars: ✭ 166 (-93.13%)
Mutual labels:  taro
wxSapp
🚮🚮Garbage Classification Help Center WxMiniApp || taro框架开发
Stars: ✭ 24 (-99.01%)
Mutual labels:  taro
classmate-map
🧭 一款设计精美、体验优良的地图信息展示小程序,一个更有意思的同学录,可以在小程序中查看班级同学的毕业去向以及地域分布,多联(蹭)系(饭)。
Stars: ✭ 79 (-96.73%)
Mutual labels:  taro
Taro-ParserRichText
适用于 Taro 的小程序富文本组件
Stars: ✭ 32 (-98.68%)
Mutual labels:  taro
taroWxParse
taro框架wxParse纯净封装组件,来源于项目实战,随下随用
Stars: ✭ 24 (-99.01%)
Mutual labels:  taro
ztaro
一套基于taro, zoro的完整的微信小程序及h5开发解决方案
Stars: ✭ 37 (-98.47%)
Mutual labels:  taro
Gitter
Gitter for GitHub - 可能是目前颜值最高的GitHub微信小程序客户端
Stars: ✭ 3,498 (+44.78%)
Mutual labels:  taro
taroCloud
记日常、GitHub trending资讯小程序 taro-hooks + rematch+云开发
Stars: ✭ 25 (-98.97%)
Mutual labels:  taro
eshop
Taro • 云开发电商小程序示例
Stars: ✭ 70 (-97.1%)
Mutual labels:  taro
Postcss Px To Viewport
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
Stars: ✭ 1,997 (-17.34%)
Mutual labels:  taro
Taro Ui
一款基于 Taro 框架开发的多端 UI 组件库
Stars: ✭ 3,806 (+57.53%)
Mutual labels:  taro
taro-echarts
适用于 Taro 项目的 ECharts 图表组件,欢迎提 PR
Stars: ✭ 43 (-98.22%)
Mutual labels:  taro

taro-yanxuan

overview

首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native)。

本项目基于趣店 FED 在 Taro 多端统一开发方面的实践经验,以网易严选小程序为载体,旨在探讨如何以正确的方式使用 Taro 进行多端开发,具体可查看文章 Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)

效果预览

小程序端已支持微信小程序、支付宝小程序,但无法提供在线版,请 clone 代码本地运行。

本项目直接调用的网易严选接口,若要体验登录、购物车功能,请使用网易邮箱账号登录。

小程序 H5 - 访问链接 React Native
请 clone 代码本地运行 H5 Expo Snacks

如下是 React Native 的运行截图:

首页、分类 详情、加购物车 购物车、个人
首页、分类 二级分类、详情 购物车、个人

本地运行

本项目直接调用的网易严选接口(网易登录接口改动,暂时无法登陆)。

# 安装依赖,或 npm i
yarn

# 运行小程序,编译后的文件位于项目下的 dist 文件夹
# (微信 dev:weapp,支付宝 dev:alipay)
npm run dev:weapp

# 运行 H5
npm run dev:h5

# 运行 React Native,请务必查阅文档:https://nervjs.github.io/taro/docs/react-native.html
npm run dev:rn

项目说明

本项目的主要目的是阐述多端开发思路、技巧,力求直观、方便阅读,因此是在 taro init 的基础上开发的,没有去做太多封装。诸如是用 Redux 还是 Mobx,网络请求怎么封装比较完美并不是本项目的重点。

本项目不会去实现一个完整的网易严选,但也实现了足够多的功能、细节进行踩坑,具体涉及的踩坑点、注意事项都在代码中以注释 // TODO(Taro 还未支持的)、// NOTE(开发技巧、注意事项)注明了。

最后,有一点很遗憾,就是一开始没有保留一份 mock 数据,后面网易严选改动挺大,主要是登录逻辑也变了,导致不少功能现在没法运行,后续有空会完善 mock 功能。

License

MIT

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].