xiaochengxu_demos: 小程序优秀项目源码汇总，每个项目都有图有源码，零基础学微信小程序，小程序表格，小程序视频，小程序视频弹幕，小程序仿天猫大转盘抽奖等源码，小程序云开发，小程序发邮件，小程序支付，微信支付，持续更新。。。

# 视频资源：
- 1，点餐小程序(java后台+小程序讲解)：https://study.163.com/course/courseMain.htm?courseId=1209428915
- 2，零基础入门小程序开发：https://edu.csdn.net/course/detail/9531/265553 
- 3，云开发入门视频（小程序云开发）：https://edu.csdn.net/course/play/9604 
- 4，小程序支付和推送(商城小程序)：https://edu.csdn.net/course/detail/24770
- 5，使用java开发小程序后台:https://edu.csdn.net/course/play/24744/280253
- 6，零基础实战入门Java视频：https://edu.csdn.net/course/detail/23443
- 7，微信小程序消息推送视频：https://edu.csdn.net/course/detail/23750
- 8，Python爬虫和数据分析视频：https://edu.csdn.net/course/detail/25009
- 9，3分钟实现微信小程序支付功能：https://edu.csdn.net/course/detail/25701

# 目录
### 001，实现底部导航栏和顶部导航栏
### 002，小程序自学系列（零基础学小程序）---小程序实现简单的倒计时效果
### 003，小程序自学系列（零基础学小程序）---小程序实现电商秒杀倒计时效果
### 004，小程序自学系列（优秀源码004）---小程序实现大转盘抽奖效果，跑马灯效果
### 005，小程序自学系列（优秀源码005）---小程序开发之视频播放器带弹幕Video 弹幕颜色自定义
### 6,7过段时间更新
### 008，小程序自学系列（零基础学小程序）----列表和轮播图的实现，小程序解析json数据
### 009，小程序实战入门009---小程序表格实现，小程序table实现
### 010，小程序swiper轮播图
### 011，小程序发邮件，小程序云开发借助云函数实现邮件发送功能
### 012，微信小程序云开发连接mysql数据库，小程序云函数操作mysql数据库
### 013，小程序webview的使用，小程序和h5的交互
### 014，使用小程序云开发实现小程序支付功能
### 015，借助云开发实现小程序朋友圈的发布与展示
## 持续更新中.......

# 小程序优秀源码汇总
小程序优秀项目源码汇总，每个项目都有图有源码，小程序开发有些功能没有必要自己造轮子，尽可以踩在前人的肩膀上
如果觉得不错，欢迎star,源码持续收录中。。。

- 零基础自学小程序系列已被w3cschool收录:http://www.w3cschool.cn/xiaochengxu
- 微信小游戏：https://30paotui.com/
- 零基础实战入门小程序系列教程：https://www.jianshu.com/c/f386d5ba1b3c

![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/wechatlogo.jpg?raw=true)

## 关注上面微号回复1可以加小程序学习微信群，群里和大家交流学习，一起进步
## 有问题加我微信：2501902696（备注小程序）

——————————
下面是效果图，源码地址和博客讲解------------------------------------------------------
# 015，借助云开发实现小程序朋友圈的发布与展示
- 图文讲解：https://blog.csdn.net/qiushi_1990/article/details/102518462
- 源码看上面文件191010
- 视频讲解：https://study.163.com/course/courseMain.htm?courseId=1209499804

# 014 使用小程序云开发实现小程序支付功能
- 博客详解：https://blog.csdn.net/qiushi_1990/article/details/99347580
- 源码看上面014
- 视频讲解：https://edu.csdn.net/course/detail/25701

# 013 小程序webview组件，小程序和webview交互，小程序内联h5页面，小程序webview内网页实现微信支付
- 博文详解：https://www.jianshu.com/p/d9bdceb2f648
- 源码看上面013
- 视频讲解：https://v.qq.com/x/page/t0913iprnay.html
- 有问题加我微信： 2501902696（备注小程序）

# 012 微信小程序云开发连接mysql数据库，小程序云函数操作mysql数据库
- 博客详解：https://blog.csdn.net/qiushi_1990/article/details/98361329
- 源码看上面 012

# 011 小程序发邮件，小程序云开发借助云函数实现邮件发送功能
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/011-%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81-%E6%BA%90%E7%A0%81/1.png)
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/011-%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81-%E6%BA%90%E7%A0%81/2.png)
- 博客详解：https://www.jianshu.com/p/3c6253bd0f5f
- 源码看上面：011-小程序实现邮件发送-源码

# 010 微信小程序入门学习，借助云开发动态更换swiper图片数据，小程序轮播图动态更新
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/190730swiper%E8%BD%AE%E6%92%AD%E5%9B%BE.gif)
- 博客详解：https://blog.csdn.net/qiushi_1990/article/details/97783951
- 源码往上看：demo190730_swiper

# 009，小程序实战入门009---小程序表格实现，小程序table实现
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/009GIF.gif?raw=true)
- 博客详解：http://www.jianshu.com/p/bbfc4c44880f
- 源码： demo190729小程序表格

# 008，小程序实战入门008---列表和轮播图的实现，小程序解析json数据
![](https://upload-images.jianshu.io/upload_images/6273713-2d771c5f31131b51?imageMogr2/auto-orient/strip%7CimageView2/2/w/320)
博客详解：https://www.jianshu.com/p/722dbc9402ec
源码：http://download.csdn.net/download/qiushi_1990/9975685

# 005，小程序开发之视频播放器带弹幕Video 弹幕颜色自定义
## 实现功能
1，小程序播放在线视频
2，视频带弹幕效果
3，弹幕可以自定义颜色

### 模拟器和真机运行效果:
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/GIF005_2.gif?raw=true)
![](http://img.blog.csdn.net/20161208120502779?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWl1c2hpXzE5OTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

博客详解：http://blog.csdn.net/qiushi_1990/article/details/53516521
源码地址：http://download.csdn.net/detail/qiushi_1990/9705416

# 004，小程序实现大转盘抽奖效果，跑马灯效果
## 实现功能
1，小程序仿天猫超市抽奖大转盘
2，跑马灯效果
3，开始抽奖，抽奖完成后有弹窗

### 先看截图:
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/004.gif?raw=true)

博客详解：http://blog.csdn.net/qiushi_1990/article/details/53507561
源码地址：http://download.csdn.net/detail/qiushi_1990/9704771

# 003，小程序实现电商秒杀倒计时效果
##实现功能
###1，小程序仿电商网站秒杀倒计时
###2，显示格式为：例如 1天11时11分11秒11
###3，秒杀时间结束后提示 秒杀结束

### 先看截图:
![](http://img.blog.csdn.net/20161125153339939?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20161125153439176?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

博客详解：http://blog.csdn.net/qiushi_1990/article/details/53335064
源码下载：http://download.csdn.net/detail/qiushi_1990/9693488

# 002，小程序实现简单的倒计时效果
##实现功能
###1，从60到0的倒计时效果
###2，倒计时完毕后会有提示

### 先看截图:
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/GIF02.gif?raw=true)
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/02.png?raw=true)

博客详解：http://blog.csdn.net/qiushi_1990/article/details/53318248
源码下载：http://download.csdn.net/detail/qiushi_1990/9692072

# 001，实现底部导航栏和顶部导航栏
##实现功能
###1，底部3个tab，每个tab选中图标改变文字变色
###2，本地logr日志存储打印

### 先看截图:
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/01_01.png?raw=true)
![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/01_02.png?raw=true)

博客详解：http://blog.csdn.net/qiushi_1990/article/details/53310331
源码下载：http://download.csdn.net/detail/qiushi_1990/9691547

```xml
 
```

#零基础自学小程序系列已被w3cschool收录:
http://www.w3cschool.cn/xiaochengxu

![](https://github.com/qiushi123/xiaochengxu_demos/blob/master/images/w3c.png?raw=true)

#持续更新中。。。。
有问题可以加我微信2501902696

caocao485/xiaochengxu_demos

简介

发行版

贡献者

近期动态

caocao485/xiaochengxu_demos .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

caocao485/xiaochengxu_demos