一篇文章带你走进微信小程序的开发世界
最近参加了互联网公司举办的夏令营活动。在活动中，老师带领我们学习了微信小程序的开发。学习过程中，老师的淳淳教诲让我犹如发现了一块新大陆。回到学校，思前想去，决定写一篇小文，分享一下最近的学习心得。
学习之前，我特地在网上搜了一下微信小程序的定义：微信小程序(后文简称小程序）于2017年1月9日正式上线，它的英文名为Mini Program，相对于还需从手机应用商店下载并安装的手机原生应用而言，它只需要用户打开微信，扫二维码或搜出来即可使用。同时，小程序依托于微信这个大平台，用户打开小程序的同时小程序就可以获得用户的信息，从而避免了注册登录这些相对繁琐的功能。而用户使用完之后，只需要关闭小程序就搞定，而不会像使用原生应用那样：动不动就因为一件小事下载少则几十兆多则上百兆的应用，而用完之后或直接删除或闲置那里空占内存。所以，如果你喜欢一些简单的应用，小程序可能是你不二的选择。
而从一个前端开发者的角度出发，小程序的开发流程也很简单。你只需用你的邮箱或电话注册一个小程序开发账号，再在微信服务平台下载一个微信开发工具即可开始开发。但是，这里有一些需要注意，一个邮箱或电话只能注册一个开发账号，而一个开发账号只能从小程序或者小游戏中选择一个，当你选择了一个就不能选择另一个。所以，如果你既是小程序的开发者又是小游戏的开发者，你最好准备两个开发账号哦。
当你进行开发时，首先你需建立一个工程，在建立工程的时候，你需注意地是，是建立“普通快速启动模板”还是“建立插件快速启动模板”。这里，写一般的小程序用“普通快速启动模板”，而“插件快速启动模板”当你写小程序插件时就可以选择。
而当你创建好工程进行开发的时，首先，你会发现这样的目录结构：
小程序基本目录结构
这里，app.js是小程序的入口文件，在这里你首先要用App()函数注册一个小程序。App() 函数接受一个 object 参数，用来指定小程序的生命周期等。object参数我用官网的一张截图说明：
App()函数常见参数属性
大家需要注意地是onLauch属性，onLauch属性用来监听小程序的初始化，这里写小程序加载时需要使用到的程序，例如，当进入小程序时获取用户信息等等。
app.json文件用来对微信小程序进行全局配置，设置页面路径、设置默认页面的窗口表现、设置网络超时时间、设置底部 tab 的表现，设置是否开启 debug模式等，详细用法你可以参考小程序官方文档。这里，我给一个配置实例：
app.json常见全局配置属性
app.wxss用来存放小程序的公共样式表，例如，你想要你的小程序所有页面的字体都有一样的字体样式、大小、颜色等，就可以在这里定义。
而project.config.json文件，你在工具上做的任何配置都会写入到这个文件。当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置。而这些都是project.config.json文件的功劳。
utils用来存放整个小程序都要使用到了公共方法，例如，请求后台接口的公共方法、时间日期的转化方法等。
剩下的pages目录是用来放小程序的每个页面的，它分别由以.js、.wxml、.wxss、.json为后缀的文件组成（wxml、wxss你可以理解为html、css的别名）。这里，.js用来存放当前页面的逻辑，.wxml用来存放当前页面结构，.wxss用来存放当前页面的样式表，类似地，.json用来存放当前页面的配置。举个例子，你现在要写一个音乐播放器的播放页面，对于这个页面你可以这样定义，player.wxml，player.js，player.wxss，player.json。player.wxml可以将你想要实现的音乐播放器的页面骨架搭建出来，而player.wxml则可以帮你实现你想要的播放器的样式，play.js则可以让你实现播放的控制功能，剩下地player.json可以让你定义播放器页面的一些独立属性，例如播放器页面的顶部颜色、是否允许播放器页面下拉刷新等。而如果你整个小程序的风格是蓝色调的，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。在这里，有必要着重提一下.wxml，.wxss和.js这三个文件。首先，.wxml文件中并不是你写html时需要的div、span、a等标签。在html中，我们可以通过标签千变万化的组合再加上css和js的辅助来形成了我们网页中想用的轮播图、弹窗等组件，而小程序则在wxml帮我们封装了这些组件。例如，轮播图组件swiper，图片组件image，存放文字信息的组件text等。而你只需要用的时侯利用好他们就ok了。此外，小程序还提供了地图、视频、音频等等组件能力。有心的小伙伴可以再开发时候自己体会。
在.wxss中需要注意地是小程序新增了一个尺寸单位：rpx。在我们写 CSS 样式时，我们需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，进而我们需要采用一些技巧来换算一些像素单位。而WXSS在底层支持新的尺寸单位rpx。这样，开发过程中，开发过程中单位换算的烦恼，我们只要交给小程序底层来换算即可。但由于小程序换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
接下来，就要说到重头戏.js了。在这里，你需要用Page() 函数注册一个页面。Page() 函数接受一个 object 参数，用来指定页面的生命周期等。object参数我用一张官网截图说明：
Page()函数常见参数属性
这里，大家需要注意地是data、onLoad这几个属性，data用来定义页面的初始数据，这些数据可以通过“数据绑定”的方式绑定到.wxml页面中，onLoad用来监听页面的初始化。这里，你可以执行一些需要在页面显示之前就需要执行的方法，例如，小程序与后台接口交互的方法等等。顺便一提，onHide是在当前页面被隐藏时执行的。例如，你写了一个表单，当你提交后你需要把表单上的数据传到另一个页面，而这时当你返回填写另一份表单时，你会发现之前表单输入的值仍然存在。这时，你就可以在onHide中执行当表单页面被隐藏时清除表单值的方法。
接着，你可能会疑问。在原生js写法中，可以用getElemengtById()获取元素，jQuery可以用$()的方式获取页面，哪怎样在小程序中获取页面元素呢？而当你有这个疑问你可能要搜搜前端近期的发展动向了。这里，我就以现在国内比较流行的vue框架与小程序做对照来说明吧。在vue框架中，一切前端操作都是以数据作为驱动的，你要着重关心地是如何从后台提供的接口中获取数据并把这些数据绑定到前端并恰当地显示出来。在小程序中，采用了一个和vue类似地weex框架。在学习过程中，我发现它跟vue很类似，例如，vue中你可以用v-for来做列表循环渲染，而小程序中你可以用wx:for,vue中你可以用v-if、v-else和v-else-if来做条件渲染，而在小程序中你可以用wx:if、wx:else和wx:elif来做条件渲染。而数据绑定，小程序和vue都可以用“{{}}”这样的模板语法的方式来动态绑定文本值。对于事件操作，小程序中可以用bing+xx或者catch+xx来进行绑定。例如，bindtap是一个当你点击.wxml标签时触发的事件,在被绑定元素上，你需要这样定义：bindtap=”play”，然后在对应的.js文件的Page()函数中定义play()方法就ok了。而vue中则是用v-on来进行事件绑定。
另外，在小程序你也可以用template来定义模块，然后用一个个模块来拼装成一个个页面。这个在避免前端代码冗余时很有帮助。
最后，以上就是我对于这次小程序学习的总结。如果你想学习小程序，希望这篇文章能够给你带来帮助。当然，在你阅读文章时发现有疏漏的地方也请你指出来哦。
