微信小程序130个精选Demo合集

小编最近在开发小程序，也读到了不少优秀的小程序源码，项目中有些需求可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码，但比较是给公司做项目啊，秉着效率第一的原则，简直没有什么比ctrl+c,ctrl+v,更加顺手了。为了感恩大家长久以来的关注和支持，小编准备了一些福利，整理了130个微信小程序源码demo，分享给我的读者们，希望能有所用处。

重要的话说三遍，感恩大回馈，超有价值的学习资料免费送！免费领取！

领取demo的方法：

如果需要小程序源码demo，欢迎关注 【编程微刊】微信公众号，回复【小程序】一键领取130个微信小程序源码demo资源+123套源码及其全套制作过程的视频，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

130个微信小程序源码demo

图片.png

干货：
随着小程序开发的日益深广，越来越多的业务需求把小程序提上日程，小程序的学习和开发逐渐成为前端开发者必备的技能和核心竞争力，不管是在工作中开发项目，还是储备知识，小程序资源干货总是备受瞩目。

官方指南

• 官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461

• 简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599

  扫描二维码关注公众号，回复： 9985305 查看本文章

• 设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html

• 微信小程序公测接入指南：http://www.wxapp-union.com/portal.php?mod=view&aid=259

• w3c:https://www.w3cschool.cn/weixinapp/

实例

• 微信小程序支付文档：https://pay.weixin.qq.com/wiki/d ... pi.php?chapter=3_1#
• 新手入门宝典：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1989

工具

• WePY 一个支持组件化的小程序开发框架：https://github.com/Tencent/wepy
• 微信小程序配置及目录在线生成工具
• Egret Wing 3.2.x 支持微信小程序实时预览的 IDE)
• Labrador 支持 ES6/7 的微信小程序组件化开发框架
• WEPT 一个微信小程序实时运行环境
• wxml-parser JavaScript WXML parser 以及在线页面demo
• Px 转 Rpx 在线工具
• 微信小程序云端增强 SDK XpmJS
• 4kb 模块化开发工具 将模块化的属性和方法映射成小程序页面
• gulp-wxa-copy-npm 插件 能够使用 ES6/7 和 NPM 库
• wechat_web_devtools Linux 下微信开发者工具
• WeApp-Workflow 基于 Gulp 的微信小程序前端开发工作流
• 小程序助手 轻松实现小程序互转
• weact 用 JSX 快速开发小程序
• Tina.js - 一款轻巧的渐进式微信小程序框架
• Mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系

插件

• vim 插件(chemzqm/wxapp.vim)
• sublime text 2&3 snippet(Abbotton/weapp-snippet-for-sublime-text-2-3)
• IntelliJ IDEA 插件，注入方法
• webstorm 插件（代码提示）
• sublime plugin - wxapp
• vscode 插件(代码提示)

1：车源宝

未标题-1.png

2：仿QQ聊天界面

未标题21.png

3： 微信小程序实现移动端商城

图片.png

4：微信小程序（应用号）示例教程（豆瓣图书）

图片.png

5：仿网易云音乐

图片.png

6：购物车

图片.png

7：今日头条

1.png

8：你猜我画

图片.png

9：小程序官方Demo

小程序官方demo.png

10：天气预报

图片.png

原文作者：祈澈姑娘原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

阅读链接：
微信小程序从零开始开发步骤（一）搭建开发环境https://www.jianshu.com/p/0ff8c3b2f59f
微信小程序从零开始开发步骤（二）创建小程序页面https://www.jianshu.com/p/fe0db14e2869
微信小程序从零开始开发步骤（三）底部导航栏https://www.jianshu.com/p/89a63dc99839
微信小程序从零开始开发步骤（四）自定义分享的功能https://www.jianshu.com/p/65d9bdb8051d
微信小程序从零开始开发步骤（五）轮播图https://www.jianshu.com/p/bc3261557031
微信小程序从零开始开发步骤（六）4种页面跳转的方法https://www.jianshu.com/p/01a5a6a0fdb9
微信小程序从零开始开发步骤（七）引入外部js 文件https://www.jianshu.com/p/5f2cde64d7f2
微信小程序从零开始开发步骤（八）引入框架WeUI：https://www.jianshu.com/p/fd423b6e17be