jiechud/taro-mall

Taro_Mall是一款多端开源在线商城应用程序，后台是基于litemall基础上进行开发，前端采用Taro框架编写，现已全部完成小程序和h5移动端，后续会对APP，淘宝，头条，百度小程序进行适配。Taro_Mall已经完成了 litemall 前端的所有功能

小程序

Taro_Mall是一款多端开源在线商城应用程序，后台是基于litemall基础上进行开发，前端采用Taro框架编写，现已全部完成微信小程序，头条小程序，和h5移动端，后续会对APP，淘宝，百度小程序进行适配。Taro_Mall已经完成了 litemall 前端的所有功能

扫码体验

感谢 @程哥提供的认证的小程序平台,微信登录和支付现在已经可以用。(请先不要支付，暂不支持退款，如果想要测试，请选择1分钱的商品)

小程序正式版

小程序(体验版，可以体验最新的功能)

h5

后台系统地址

http://39.97.252.98:8081/

框架功能列表

• 支持自定义底部导航

快速启动

微信小程序

• git clone https://github.com/jiechud/taro-mall.git
• npm install || yarn install
• yarn dev:weapp 启动服务
• 用微信开发者工具打开dist目录

头条小程序

• yarn dev:tt
• 头条小程序开发工具打开dist目录

h5

• yarn dev:h5 启动服务
• 打开浏览器

系列文章

• 01 Taro_Mall 开源多端小程序框架设计

功能

• 首页
• 专题列表、专题详情
• 分类列表、分类详情
• 品牌列表、品牌详情
• 新品首发、人气推荐
• 优惠券列表、优惠券选择
• 商品搜索
• 商品详情
• 购物车
• 购物下单
• 订单列表、订单详情
• 地址、收藏、足迹、意见反馈

项目截图

项目架构

项目用Taro做跨端开发框架，Taro基本采用React的写法，项目集成了 redux dva 控制单向数据流，用immer来提供不可变数据，提升整体的性能，减少渲染。

技术栈

技术	说明	官网
Taro	多端统一开发解决方	https://taro.aotu.io/
TaroUI	一套基于 Taro 框架开发的多端 UI 组件库	https://taro-ui.jd.com/
redux	单项数据流	https://redux.js.org/
dva	基于 redux 和 redux-saga 的数据流方案	https://dvajs.com/
immer	创建不可变数据	https://immerjs.github.io/immer/docs/introduction

FAQ

1. 账号登录的用户名密码是什么？ 微信联系我 q1454763497 或者关注公众号【前端有话说】，回复【商城账号】

联系我

建立了一个微信交流群，如需加入，请添加微信，备注小程序

微信:

赞赏

因服务器是由个人维护，如果这个项目对您有帮助，您可以扫描下面二维码进行捐赠，谢谢。

License

MIT License Copyright (c) 2020 jiechud

taro-mall's Issues

建议使用ts

编译错误

Failed to compile.
./src/app.config.js
Module build failed (from @tarojs/taro-loader/lib/h5):
TypeError: Cannot destructure property 'importFrameworkStatement' of 'options.loaderMeta' as it is undefined.

h5预览tabbar显示问题

切换到分类，TabBar图标消失，上滑出现另一个TabBar

找回密码文件缺失。

点击微信登录没反应，忘记密码文件缺失。

电商少不了推荐系统,可以向自动化靠拢

H5构建报错

运行yarn dev:h5 报错：
SyntaxError: C:\Users\black\Downloads\个人测试区\taro\taro-mall-master.temp\app.js: Unexpected token (52:8)

50 |
51 | class App extends Component {

52 | state = {
| ^

关于小程序的发布

你好，请问发布这个小程序，分类选择哪个类别？
谢谢~

项目运行问题

npm run dev:h5
提示 Module not found: Can't resolve 'F:\TaroProjects\taro-mall\src\app.config' in 'F:\TaroProjects\taro-mall'

自己补充了src\app.config.js 之后 ，页面空白, console 提示
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

什么原因呢？

启动时提示没装各平台的plugin

建议将各平台相关的plugin都添加进依赖中。

"@tarojs/plugin-platform-alipay": "^3.3.0",
"@tarojs/plugin-platform-jd": "^3.3.0",
"@tarojs/plugin-platform-qq": "^3.3.0",
"@tarojs/plugin-platform-swan": "^3.3.0",
"@tarojs/plugin-platform-tt": "^3.3.0",
"@tarojs/plugin-platform-weapp": "^3.3.0",

当前项目使用了 less，请安装插件 @tarojs/plugin-less，并且在 plugins 中进行配置，否则将无法编译 less 文件！

请问这个报错怎么解决呢，插件已经安装了

yarn dev:h5
yarn run v1.22.4
$ npm run build:h5 -- --watch
npm WARN lifecycle The node binary used for scripts is /var/folders/n2/ym10fk_j0j107g25n_cg6dh00000gp/T/yarn--1592543138084-0.1295911085660233/node but npm is using /usr/local/Cellar/node/10.8.0/bin/node itself. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.

[email protected] build:h5 /Users/admin/git/taro-mall
taro build --type h5 "--watch"

👽 Taro v2.2.9

当前项目使用了 less，请安装插件 @tarojs/plugin-less，并且在 plugins 中进行配置，否则将无法编译 less 文件！
参考文档：https://nervjs.github.io/taro/docs/config-detail#plugins

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:h5: taro build --type h5 "--watch"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:h5 script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/admin/.npm/_logs/2020-06-19T05_05_40_615Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

小程序商品列表加载不出来

商品列表和分类都加载不出来，是服务端停掉了吗

h5 dev编译报错和请求数据问题

总结: 1.开发环境编译的时候报错. 2. 请求数据的时候也报错了.
环境: mac. h5开发
报错如下图

Compiled with warnings.

./.temp/pages/ucenter/couponSelect/couponSelect.js 49:8-24
" '../../../services/coupon' does not contain an export named 'CouponSelectList'.

./.temp/components/tab-bar/index.js 35:21-32
" '@tarojs/redux-h5' does not contain an export named 'useDispatch'.

./.temp/components/tab-bar/index.js 29:25-36
" '@tarojs/redux-h5' does not contain an export named 'useSelector'.

希望增加分销系统

这样的话，就能让更多的人来使用系统

运行后页面几乎空白

taro: 2.0.4，

npm i
npm run dev:h5
运行后，有警告：
'../../../services/coupon' does not contain an export named 'CouponSelectList'.
" '@tarojs/redux-h5' does not contain an export named 'useDispatch'.
" '@tarojs/redux-h5' does not contain an export named 'useSelector'.
请问项目需要修改什么地方么？

不能调用effects中的方法

这种方式调用 models中的effects 方法没调到
const { dispatch } = this.props;
dispatch({ type: "demo/dec" });

接口404

希望解答一下

后端能开不

其他小程序适配日程

目前litemall 项目不能满足头条小程序
楼主 有没有具体的适配开发计划？

Cannot read property 'uglify' of undefined

at ImportDeclaration (/Users/apple/.config/yarn/global/node_modules/@tarojs/cli/dist/mini/astProcess.js:384:63)
at NodePath._call (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/path/context.js:105:12)
at TraversalContext.visitQueue (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/index.js:114:17)
at NodePath.visit (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/path/context.js:115:19)
at TraversalContext.visitQueue (/Users/apple/.config/yarn/global/node_modules/babel-traverse/lib/context.js:150:16)

微信开发工具之后打开显示空白？

dva的代码的问题

作为taro新手，本来想以本项目学习下taro + dva + redux的整合编程，看了代码后发现项目里面没把数据存储到redux中，获取数据都是从service返回的response中获得的。。。是这部分代码没完成吗？

运行不起来

README中图片都挂了

全部页面空白问题

克隆项目后，修改 package.json 文件内部 taro 版本为 3.3.9 进行依赖拉取，编译完成后通过微信开发者工具查看页面全部为空白，截图如下：

请问我该如何解决，谢谢！

启东时，报The filename, directory name, or volume label syntax is incorrect.

$ yarn dev:weapp
yarn run v1.22.11
$ npm run build:weapp -- --watch

[email protected] build:weapp E:\lxl\applicaion\applet\taro\taro-mall
taro build --type weapp "--watch"

The filename, directory name, or volume label syntax is incorrect.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:weapp: taro build --type weapp "--watch"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:weapp script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache_logs\2021-08-25T02_12_13_767Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

服务器段代码能开源吗？

希望服务器段代码能开源，特别是登录和支付部分可以帮助初学者借鉴和参考

readme里的效果图没了

rt

Taro的无限级路由有方案么

小程序路由栈只支持10级，点商品一直点会超过，然后就打不开了。

小程序和h5为什么都下架了？