本周日【珠海源创会】一起聊聊:PingCAP分布式事务、支付宝移动端实践、GSBN技术框架选型,点此报名占座

easytuan / taro-msparisJavaScriptMIT

0 Watch 28 Star 89 Fork 20
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱,原始仓库: 展开 收起

https://github.com/EasyTuan/taro-msparis

取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md 5.06 KB

前言

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、React-Native 等)运行的代码。

该项目基于Taro,构建了一个时装衣橱的项目演示,涉及了一个电商平台完整的业务逻辑和功能点,如果这个项目能驾驭的了,相信大部分公司的其他React项目也就不在话下。

如遇网络不佳,请移步国内镜像加速节点

效果演示

查看demo请戳这里(请用chrome手机模式预览)

H5版 && 微信小程序版

技术栈

React + Taro + Dva + Sass + ES6/ES7

项目运行

git clone git@github.com:EasyTuan/taro-msparis.git

# 国内镜像加速节点:git@gitee.com:easytuan/taro-msparis.git

cd taro-msparis

# 全局安装taro脚手架
npm install -g @tarojs/cli

# 安装项目依赖
npm install

# 微信小程序
npm run dev:weapp

# 支付宝小程序
npm run dev:alipay

# 百度小程序
npm run dev:swan

# H5
npm run dev:h5

# React Native
npm run dev:rn

# pages模版快速生成
npm run tep `文件名`

项目说明

git分支说明:

init:框架整体结构,不涉及任何业务逻辑

master:项目的稳定版本

feature:项目开发分支

适配进度

  • H5 -- 完美适配
  • 微信小程序 -- 完美适配
  • 支付宝小程序 -- 95%适配
  • 百度小程序 -- 95%适配
  • React Native -- 适配中
  • 快应用 -- 适配中

目标功能

  • 美衣列表 -- 完成
  • 美衣详情 -- 完成
  • 登录、注册 -- 完成
  • 个人中心 -- 完成
  • 优惠券 -- 完成
  • 衣袋(购物车) -- 完成
  • 收货地址 -- 完成
  • 会员中心 -- 开发中

业务介绍

目录结构

├── .temp                  // H5编译结果目录
├── .rn_temp               // RN编译结果目录
├── dist                   // 小程序编译结果目录
├── config                 // Taro配置目录
│   ├── dev.js                 // 开发时配置
│   ├── index.js               // 默认配置
│   └── prod.js                // 打包时配置
├── screenshots            // 项目截图,和项目开发无关
├── site                   // H5静态文件(打包文件)
├── src                    // 源码目录
│   ├── components             // 组件
│   ├── config                 // 项目开发配置
│   ├── images                 // 图片文件
│   ├── models                 // redux models
│   ├── pages                  // 页面文件目录
│   │   └── home
│   │       ├── index.js           // 页面逻辑
│   │       ├── index.scss         // 页面样式
│   │       ├── model.js           // 页面models
│   │       └── service.js        // 页面api
│   ├── styles             // 样式文件
│   ├── utils              // 常用工具类
│   ├── app.js             // 入口文件
│   └── index.html
├── package.json
└── template.js            // pages模版快速生成脚本,执行命令 npm run tep `文件名`

部分截图展示

首页 && 商品详情

衣袋 && 我的

登录 && 优惠券

说明

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 👍

文档

Taro开发文档

https://nervjs.github.io/taro/docs/README.html

dva开发文档地址

https://dvajs.com/

小程序开发文档

https://mp.weixin.qq.com/debug/wxadoc/dev/

捐助

如有帮助,欢迎打赏

收到赞助款后,我会及时更新赞助墙

License

MIT

项目点评 ( 3 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close