https://github.com/tuture-dev/ultra-club
《Taro 多端小程序开发大型实战》源代码
https://github.com/tuture-dev/ultra-club
hands-on learning-by-doing miniprogram react-hooks redux taro taro-ui
Last synced: 5 months ago
JSON representation
《Taro 多端小程序开发大型实战》源代码
- Host: GitHub
- URL: https://github.com/tuture-dev/ultra-club
- Owner: tuture-dev
- License: mit
- Created: 2019-12-24T12:01:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-06T02:43:24.000Z (about 5 years ago)
- Last Synced: 2025-04-08T02:45:29.638Z (6 months ago)
- Topics: hands-on, learning-by-doing, miniprogram, react-hooks, redux, taro, taro-ui
- Language: JavaScript
- Homepage:
- Size: 40.3 MB
- Stars: 110
- Watchers: 2
- Forks: 20
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Taro 多端小程序开发大型实战
【已完成】这里是《Taro 多端小程序开发大型实战》系列教程的源代码仓库。
### 项目预览
微信小程序云效果，微信小程序全流程：登录、发帖、展示帖子列表、查看帖子详情：
LeanCloud 效果，支付宝小程序全流程：登录、发帖、展示帖子列表、查看帖子详情：
### 项目界面说明（以微信小程序为例）
##### 首页
主要是展示帖子列表，每个帖子包含：1）标题 2）描述 3）发帖人用户头像 4）发帖人用户名
#### 帖子详情页
主要展示帖子详情，是另外一个页面，因为对于帖子列表展示的信息有限，详情页可以展示更多的帖子正文信息
#### 发帖页面
主题用于给登录用户发帖，包含标题和正文，发的帖子会自动带上登录用户的身份信息
#### 我的页面
已登录：展示用户头像和用户名
未登录：展示普通登录按钮和微信登录
未登录，进行登录界面：上传头像和输入昵称，昵称会自动作为用户主键标志
## 体验项目
克隆本仓库，然后进入 ultra-club：
```bash
git clone https://github.com/tuture-dev/ultra-club.git
cd ultra-club
```
安装 npm 包：
```bash
npm install
# yarn
```
开启微信小程序开发服务器：
```bash
npm run dev:weapp
# yarn dev:weapp
```
开启支付宝小程序开发服务器：
```bash
npm run dev:alipay
# yarn dev:alipay
```
## 教程内容概要
1. [熟悉的 React，熟悉的 Hooks](https://tuture.co/2019/12/25/34a473b/)
- 用脚手架初始化项目
- 用熟悉的 React 代码编写用户界面
- 使用 React Hooks 重构状态管理
2. [多页面跳转和 Taro UI 组件库](https://tuture.co/2019/12/25/af69225/)
- 用自带路由功能搭建多页面应用
- 用 Taro UI 组件库升级界面
3. [实现微信和支付宝多端登录](https://tuture.co/2019/12/25/5e10118/)
- 微信登录
- 支付宝登录
- 普通登录
- 退出登录
4. [使用 Hooks 版的 Redux 实现应用状态管理](https://tuture.co/2020/01/15/5e100f7/)
1. 使用 Hooks 版本的 react-redux 来做绑定库
2. 将应用全流程接入 redux
3. 处理关于 loading 相关的加载
5. [尝鲜微信小程序云](https://tuture.co/2020/01/17/b32362b/)
1. 在 redux-saga 中使用微信小程序云
2. 接通微信小程序云全流程
6. [LeanCloud，一统江湖]()
1. 在 redux-saga 中使用微信小程序云
2. 接通微信小程序云全流程
## 反馈
欢迎对此教程的内容进行反馈（无论是疑问还是改进意见），可以在文章下方留言，也可以在此仓库创建 Issue！
### 联系我们
- [微信公众号](https://tuture.co/images/social/wechat.png)：关注公众号，加图雀酱微信拉你进学习交流群
- [掘金](https://juejin.im/user/5b33414351882574b9694d28)
- [知乎专栏](https://zhuanlan.zhihu.com/tuture)
- 知乎圈子：搜索 图雀社区
- 也可以直接扫码下方的二维码关注微信公众号哦：
## 许可证
MIT。