大家好，看到很多朋友对微信小程序挺感兴趣的，也想拥有一款自己的小程序。那我今天和大家分享一些关于我的微信小程序的经验，也是我从零到一的一套经验。
做一款微信小程序难吗？其实，做一款微信小程序并不困难，基本上每个人也都可以做到吧，下面听我慢慢说。
谈谈我的经验，我是如何做一款微信小程序的呢？
第一天：了解官方小程序规则
微信小程序刚发布时，我并没有急着去做，后来看身边朋友的公司都在做，我也好奇，就抱着试试看的心态去了解下。当然，首先还是去官方小程序开发社区了解下官方的教程。看了官方发布的《小程序开发指南》，大致上了解了一下，小程序可以用来做什么？代码构成？开放了什么？审核的规则？如何发布？如何上线？等等知识点。并且看社区论坛中别人的经验分享杂谈，又加了一个QQ群凑凑热闹，还是有点无从下手，毕竟没有师傅带，全靠自己的摸索，所以万事开头难。当然，我并没有停止进度，第一天注册申请了小程序的AppID、安装了开发者工具、熟悉官方的WeUI，熟悉上架一款小程序的流程，也看了一些文档资料和知晓程序的《微信小程序入门指南》。
第二天：练手测试多款小程序
有点迫不及待想做一款自己的微信小程序，我在GitHub上搜索找了些开源小程序项目，测试了几款，比如：咩咩单词，有的不完整，有的还有些Bug。后来，找到了一款阴阳师妖怪搜索小程序用来测试玩玩。看别人是如何做一款微信小程序的，然后自己再去研究学习模仿，这是为了防止走弯路，最快的方法。我测试了几款小程序后，也开始慢慢熟悉了代码构成、小程序的能力、可以用来做什么、发布前的准备、如何上线等等问题。由于使用的都是第三方的开源项目，我也没有修改图片、图标、配色、内容等，就是提交了上传，没有申请上架，只是想用来测试一下练练手看看效果怎么样。第二天的收获还是蛮多的，收集了很多资料和工具可以备用，比如：找了第三方的一些UI组件（wux：微信小程序自定义组件），微信小程序模块化开发框架（Labrador）、WeCOS（微信小程序COS 瘦身解决方案）、小程序的统计分析平台（阿拉丁）等等。
第三天：上架自己的第一款微信小程序
在一个同行朋友的推荐下，了解到微擎等第三方云引擎，也可以开发微信小程序，省掉很多事情，所以开始第一次接触了微擎这款产品。域名使用的还是我以前备案的域名，服务器这次买了个腾讯云服务器，活动价不算贵，用来做小程序还行。用半天时间搭建好服务器环境配置，又顺利搭建了微擎，然后就方便多了，买了个免费的官网小程序插件，一键就安装进行打包了，把后台的内容数据修改一下，模板颜色修改一下，一键进行小程序打包，最后登录微信小程序后台提交审核，等待个差不多2-3个小时，就审核通过了，最后在上架，就可以在微信上搜索到小程序了。的确，使用这样的方式做小程序很方便，也很快，并且可以做各种拼团、外卖、营销、视频、活动、工具等各种类型的微信小程序，也适合小白学习，能够走向大众化，毕竟有很多朋友并不懂得编程技术，所以，我可以花费三天的时间就完成了我的第一款微信小程序。其实，如果你熟悉这套流程后，一天就可以做出自己想要的微信小程序。第二款，上架砍价商城小程序，第三款，接外包赚到的门店预约小程序…都是通过这样的方式。
把我做小程序收集的资料分享给大家学习
最后，我再说说现在网上有一些小程序技术编程课程和资料分享给大家，网上的确有一些是针对程序员的小程序开发课程，但对于绝大多数没有编程基础的小白却无从下手。
如果你对做小程序感兴趣，下面这个适合新手的零基础入门Web课程，可以免费领取一下了。你学好了Web，不仅可以做自己的小程序项目，还有机会入职互联网大厂做开发。
目录
置顶
官方文档
工具
- WePY ★12k+- 支持组件化的小程序开发框架
- mpvue ★11k+- 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
- Taro ★3.9k- 使用 React 的方式开发小程序的框架，同时支持生成多端应用
- Labrador ★1.5k- 支持 ES6/7 的微信小程序组件化开发框架
- wept ★1.8k- 微信小程序实时运行环境
- wafer ★1.6k- 快速构建具备弹性能力的微信小程序
- wechat_web_devtools ★600+- Linux 下微信开发者工具
- minapp ★400+- TypeScript 版小程序开发框架（兼容原生小程序代码）
- tina ★300+- 轻巧的渐进式微信小程序框架
- xpmjs ★100+- 微信小程序云端增强 SDK
- WeApp-Workflow ★100+- 基于 Gulp 的微信小程序前端开发工作流
- gulp-wxa-copy-npm- 微信小程序 gulp 插件，解决 npm 包管理和 babel-runtime
- weact- 用 JSX 快速开发小程序
- socket.io-mp-client- 微信小程序 socket.io 客户端
- wxa- 方便的小程序开发框架
- px2rpx- Px 转 Rpx 在线工具
- wxml-parser- JavaScript WXML parser
- weappx- 基于 redux 的数据层管理框架
- weapp-start- 基于插件机制的开发脚手架，改善原生小程序开发体验
- Egret Wing- 支持微信小程序实时预览的 IDE
- wxapp-graphql- 小程序GraphQL客户端
- gulp-wxapp-boilerplate- 小程序+小程序云 Gulp 开发脚手架，支持云函数 mock
插件
- wxapp.vim- 提供微信小程序开发全方位支持的 vim 插件
- weapp-snippet-for-sublime-text-2-3- 为 sublime text 2&3 准备的微信小程序 snippet(停更)
- Matchmaker- IntelliJ IDEA 插件，注入方法
- wechatCode-complete- webstorm 插件（代码提示）
- wxapp- sublime plugin
- minapp- vscode 插件（支持 原生/mpvue/wepy 框架）
- vscode 插件(代码提示)
- WePY Plugin For IntelliJ Platform- 让PhpStorm/WebStorm全面支持WePY的开发，包括API(原生/WePY)和组件(官方/自定义)的自动完成/错误检查/高亮/不依赖Vue/...
教程
微信小程序剖析(微信公众号)
- 微信小程序架构分析(上)
- 微信小程序架构分析(中)
- 微信小程序架构分析(下)
- 首个微信小程序开发教程(掘金)
- 微信小程序开发教程！(稀土区)
- hello-weapp 微信小程序最简示例教程(dingyiming/weapp-example)
- 微信小应用 IDE 的安装以及安装过程的常见问题(champion32/WeAppIdeIssue)
- 分享我用 cnode 社区 api 做微信小应用的入门过程(CNode)
- 微信小程序开发教程-从零开始(简书)
- 我所理解的小程序 - 小程序真机调试(seahub)
- 微信小程序集成 Redux(Segmentfault)
- 在微信小程序里实现图片预加载组件(凹凸实验室)
- 基于 Airtest 的微信小程序自动化测试 (Android & iOS)
视频教程
- 微信小程序开发视频教程(youtube)
文章
- 未来是 h5 的：写在微信应用号发布之际(CNode)
- 微信小程序让我脑洞大开(简书)
- 关于微信小程序（应用号）的底层逻辑分析和拥抱建议(知乎专栏)
- 微信小程序和谷歌 PWA 有什么关系？(微信公众号)
- 在微信小程序里，我们要怎样做数据分析（上）(微信公众号)
- 一张图看微信小程序(前端之路 - DRY)
- 微信小程序要这样解读(CSDN)
- 一名 Android 开发者的微信小程序填坑之路(1)
- 小程序开发利器：Matchmaker(CSDN)
- 微信小程序开发三宗罪和解决方案(SegmentFault)
- 使用 Labrador 0.3 构建 ES6/ES7 标准模块化微信小程序(SegmentFault)
- 微信小程序真机测试多个 DEMO)(微信公众号)
- 微信小程序真机测试视频源文件
- WordPress 网站基于 REST API 开发微信小程序实战
- WordPress 网站开发微信小程序实战(二)
- WordPress 网站开发微信小程序实战(三)
- 解决微信小程序组件所在页面无返回按钮的问题
组件
- weui-wxss ★5000+- 同微信原生视觉体验一致的基础样式库
- zanui-weapp ★4000+- 高颜值、好用、易扩展的微信小程序 UI 库
- wxParse ★3000+- 微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析
- wx-charts ★1000+- 微信小程序图表 charts 组件
- wux ★1000+- 微信小程序自定义组件
- wemark ★400+- 微信小程序 Markdown 渲染库
- wxapp-img-loader ★400+- 微信小程序图片预加载组件
- we-cropper ★400+- 微信小程序图片裁剪工具
- WeZRender ★300+- 微信小程序 Canvas 开发
- wx_calendar ★300+- 小程序日历
- wxapp ★300+- 微信小程序组件
- Wa-UI ★200+- 针对微信小程序整合的一套 UI 库
- wxSearch ★200+- 微信小程序优雅的搜索框
- wx-scrollable-tab-view ★200+- 小程序可滑动得 tab-view
- wetoast ★100+- 微信小程序 toast 增强插件
- wx-alphabetical-listview ★100+- 微信小程序带字母滑动的 listview
- wx-drawer ★100+- 小程序模仿 QQ6.0 侧滑菜单
- wxapp-charts ★100+- 微信小程序图表 charts 组件
- chartjs-wechat-mini-app ★100+- chartjs 微信小程序适配
- wx-promise-request ★100+- 微信小程序请求队列管理库
- we-swiper ★100+- 微信小程序触摸内容滑动解决方案
- wxDraw ★100+- 微信小程序 2D 动画库
- citySelect ★100+★42 - 微信小程序城市选择器
- WeiXinProject- 微信小程序列表上拉刷新和上拉加载
- wepy-com-charts- 微信小程序 wepy 图表控件
- wxapp-lock- 微信小程序手势解锁
- weapp.socket.io- socket.io 风格的 websocket 类库
- weapp-polyfill](https://github.com/leancloud/weapp-polyfill) - [w3c 标准 API polyfill
- wxPromise- 微信小程序 Promise 库
- wxMD5- 微信小程序 MD5 库
- wxBase64- 微信小程序base64 库
- xing-weapp-component- 微信小程序基础组件扩展
- wx-statuslayout- 小程序页面状态切换组件
- minapp-api-promise- 微信小程序所有 API promise 化
- minapp-slider-left- 微信小程序左划删除组件
- mp_canvas_drawer- canvas绘制图片助手，一个json就制作分享朋友圈图片
- xing-weapp-editor- 小程序图文编辑组件
- cue- A WX Compontent Tools
Demo
- EastWorld/wechat-app-mall ★3000+- 微信小程序商城
- tumobi/nideshop-mini-program ★2000+- 基于 Node.js + MySQL 开发的开源微信小程序商城
- RebeccaHanjw/weapp-wechat-zhihu ★800+- 仿知乎
- lypeer/wechat-weapp-gank ★600+)- Gank 客户端
- wangmingjob/weapp-weipiao ★300+- 微票
- charleyw/wechat-weapp-redux ★300+- Redux 绑定库
- jectychen/wechat-v2ex ★300+)- V2EX
- 18380435477/WeApp ★300+- 仿微信
- zce/weapp-boilerplate ★300+- 微信小程序快速开发骨架
- bayetech/wechat_mall_applet ★300+- 电商平台
- lanshan-studio/wecqupt ★300+- We 重邮
- myronliu347/wechat-app-zhihudaily ★200+- 知乎日报
- harveyqing/BearDiary ★200+- 小熊の日记
- leancloud/leantodo-weapp ★200+- 集成 LeanCloud 实现的 Todo list
- SuperKieran/weapp-artand ★200+- Artand
- dongweiming/weapp-zhihulive ★200+- 知乎 Live
- eyasliu/wechat-app-music ★200+- 音乐播放器
- ahonn/weapp-one ★200+- 仿 ONE
- giscafer/wechat-weapp-mapdemo ★200+- 地图导航、marker标注 （不再维护）
- hilongjw/weapp-gold ★100+- 掘金主页信息流
- zce/weapp-douban ★100+- 豆瓣电影
- hingsir/weapp-douban-film ★100+- 豆瓣电影
- kunkun12/weapp- 小程序 hello world 尝鲜
- natee/wxapp-2048 ★100+- 2048 小游戏
- SeptemberMaples/wechat-weapp-demo ★100+- 购物车
- hijiangtao/weapp-newsapp- 公众号热门文章信息流
- charleyw/wechat-weapp-redux-todos ★100+- 集成 Redux 实现的Todo list
- kraaas/timer ★100+- 番茄时钟
- ericzyh/wechat-chat ★100+- 聊天室
- BelinChung/wxapp-hiapp ★100+- HiApp
- hardog/wechat-app-flexlayout ★100+- flexlayout
- dunizb/wxapp-sCalc ★100+- 简易计算器
- litt1e-p/weapp-girls ★100+- 豆瓣美女/妹子图
- liumulin614/BeautifulGirl- 美女模特
- romoo/weapp-demo-breadtrip ★100+- 面包旅行
- zhuweiyou/fetop100 ★100+- 前端TOP100
- vace/wechatapp-news-reader ★100+- 新闻阅读器
- Symous/WechatApp-BaisiSister- 百思不得姐
- DengKe1994/weapp-calculator- IOS 计算器
- monkindey/wx-github- GitHub 简历
- fluency03/weapp-500px- 国外摄影社区 500px
- weapp-film- 淘票票
- xujinyang/CoderCalendar-WeApp- 程序员老黄历
- zhengxiaowai/weapp-github- github
- Seahub/PigRaising- PigRaising
- brucevanfdm/WeChatMeiZhi- 妹子图
- zhijieeeeee/wechat-app-joke- 开心一刻
- uniquexiaobai/wechat-app-githubfeed- GitHubFeed
- zce/weapp-todos- TODOS 任务清单
- yaoshanliang/weapp-ssha- 企业宣传小程序
- bruintong/wechat-webapp-douban-movie- 豆瓣电影
- bruintong/wechat-webapp-douban-location- 豆瓣同城
- arkilis/weapp-jandan- 煎蛋
- bodekjan/wechat-weather- 微信天气
- jasscia/ChristmasHat- 我要圣诞帽
- yaoshanliang/weapp-jump- 跳一跳
- nanwangjkl/sliding_puzzle- 滑块拼图
- yaoshanliang/weapp-monument-valley- 纪念碑谷
- kaiwu/weui-scalajs- 使用Scala.js开发
- tinajs/tina-hackernews- Hacker News 热点
- mohuishou/scuplus-wechat- We 川大
- hankzhuo/wx-v2ex- v2ex
- Hongye567/weapp-mark- 仿 Mark 影单的微信小程序
- w1109790800/We-Todo- 基于LeanCloud的Todo-List
- jae-jae/weapp-github-trending- Github今日榜单
- steedos/mini-vip- 华炎微站、微商城
- alex1504/wx-guita_tab- 口袋吉他
- lonnng/etym- 芒果词源助手
- wuhou123/wxxcx- 武侯的猫，基于wepy构建,整合了n多查询工具（快递，天气，记账，搞笑视频等）
- upupming/HITMers- 博物馆小助手（统计值班表、签到、值班日历及备忘录、国际化、Streamable.com 视频上传等）
说在最后。
无论你学编程是做微信小程序开发，还是为了找工作。
这里我推荐给你一个《2天零基础实战项目训练营》课程，现在可以免费学习。
对于编程基础薄弱的小白来说，如果你想要更上一个台阶，进入互联网大厂，也比较适合，讲师是来自前寺库的Web高级工程师，可以帮你在线解答问题，大厂面试的经验也会分享给你。
以上，我收集的资料相对比较多，主要在于自身基础硬不硬，肯不肯花时间去学习。
