All Projects → js-newbee → taro-yanxuan

js-newbee / taro-yanxuan

Licence: MIT license
首个 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-v2ex-weapp
awesome v2ex weapp 😎 目前支持微信小程序、支付宝小程序、h5
Stars: ✭ 25 (-99.01%)
Mutual labels:  taro
Taro Ui
一款基于 Taro 框架开发的多端 UI 组件库
Stars: ✭ 3,806 (+50.61%)
Mutual labels:  taro
taro-ts-mobx-boilerplate
Taro 脚手架 Typescript/ Mobx / icon font / Jest
Stars: ✭ 12 (-99.53%)
Mutual labels:  taro
weapp-clover
由零打造的,基于taro,zoro的电商小程序实战项目
Stars: ✭ 77 (-96.95%)
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.69%)
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 (-20.97%)
Mutual labels:  taro
taro-best-practices
使用 Taro 开发微信小程序、编译 H5 + React Native 的最佳实践
Stars: ✭ 118 (-95.33%)
Mutual labels:  taro
taro-tax
taro版个税小程序
Stars: ✭ 12 (-99.53%)
Mutual labels:  taro
Gitter
Gitter for GitHub - 可能是目前颜值最高的GitHub微信小程序客户端
Stars: ✭ 3,498 (+38.43%)
Mutual labels:  taro
miniapp
使用 Rax 语法(类 React)编写跨多端的小程序应用。
Stars: ✭ 65 (-97.43%)
Mutual labels:  taro
taroWxParse
taro框架wxParse纯净封装组件,来源于项目实战,随下随用
Stars: ✭ 24 (-99.05%)
Mutual labels:  taro
wxSapp
🚮🚮Garbage Classification Help Center WxMiniApp || taro框架开发
Stars: ✭ 24 (-99.05%)
Mutual labels:  taro
Taro Yanxuan
首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native) - By 趣店 FED
Stars: ✭ 2,416 (-4.39%)
Mutual labels:  taro
eshop
Taro • 云开发电商小程序示例
Stars: ✭ 70 (-97.23%)
Mutual labels:  taro
TaroCreator
微信小程序 小程序模板 小程序可视化设计工具 Taro Taro UI
Stars: ✭ 60 (-97.63%)
Mutual labels:  taro
tarojs-router-next
Taro 小程序路由库/自动生成带参数类型提示的路由方法/允许传递任意类型、任意大小的参数数据/同步的路由方法调用/koa体验一致的路由中间件
Stars: ✭ 166 (-93.43%)
Mutual labels:  taro
Taro
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
Stars: ✭ 30,230 (+1096.28%)
Mutual labels:  taro
vantui
基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home
Stars: ✭ 454 (-82.03%)
Mutual labels:  taro
share
notes or share of vue,react,flutter...
Stars: ✭ 32 (-98.73%)
Mutual labels:  taro
taro-code
Taro Barcode & QRCode
Stars: ✭ 88 (-96.52%)
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].