微信小程序开发极简入门

序言

微信小程序官网的介绍及Demo给开发者带来了极大的便利，各位想学习微信小程序开发的朋友们，一定要多去看看官方的Demo及文档。作为一名安卓开发者，我会跟大学一起分享，微信小程序开发需要哪些必要知识，以及我在实际开发过程中遇到哪些坑等。本文将会着重介绍开发重点及要点，如何快速入门小程序开发。如果你是安卓开发者或者IOS开发者，按照我给我方向学习，我相信一定会少踩很多坑。

---

小程序开发的基础

• 了解JS语言
• 要懂得CSS布局，CSS3布局。CSS3新特性很重要，尤其要移动开发这块。
• 了解小程序的基础。
• 强烈推荐在设计小程序界面前，先对CSS布局进行一定了解，只有样，才能更得心应手的去设计各种需求的界面。

• CSS方面重点了解，块元素与内联元素，元素定位以及各种选择器（类选择器，ID选择器，组合选择符，分组和嵌套选择器），还有如何实现元素居中要看CSS的布局。
• CSS3方面重点了解。最重要的要学习flex布局（弹性布局），CSS3的背景和CSS3的边角。

如果你有了以上的基本技能了，这样再看微信小程序，恭喜你，应该能看懂70%小程序代码了。那么接下来，我们就要来熟悉小程序的开发工具。

小程序的开发环境简介

开发工具有以下功能
调试器，编辑器，模拟器。
编辑器和模拟器都非常直观，大家都应该会操作。以下是调试器的使用。
如图：

debug.jpg

调试器的功能我分别用1-11进行了标注。

1. 这个是非常好用的界面元素选择功能，点中这个图标，要模拟器上进行滑动，在调试器会自动找到所指向的界面布局。非常直观好用。
2. console，这个是输出终端，类似于安卓苹果的日志输出界面。
3. source,这个是js的断点调试器，点中这个source，里面是源文件，在这个文件里可以打断点，而在源文件上是不能打断点的。如果你要断点调试，就必需要这个目录下的文件打断点。
4. network，这也js调试用的神器，可以非常方便的输出小程序发出的get,post请求，并且也能非常方便的看到服务器响应的数据，接口调试必备神器。
5. security.安全性，保留。
6. AppData这个页面存放了当前小程序页面的data数据，不用打断点，也能查看页面绑定的数据。
7. Audits，体验评分
8. Sensor 这个是模拟手机的传感器，没有用到传感器不用看这个。
9. Storage 用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。类似于安卓的SP（SharedPreferences ）。
10. Trace 性能监控，刚开始基本用不到。
11. XWML 这个和1关联，展示页面布局。

好了。调试器功能很强大，JS很强大，本文重点展示入门的重点。小程序的大门就此在你面前展开了。小程序开发过程中，还有更多技术。以下是推荐阅读。

小程序框架
小程序组件
小程序API
小程序工具介绍