微信小程序开发入门

点击数：2562018-05-09 09:19:57　来源: 艺之都网络公司

微信小程序，简单的开发，却接近app的体验，无需下载，扫码打开，推广成本大大降低，手机上还不用安装太多应用，相信不久后，各家做得好些的app都会开发微信小程序。这是新一轮的竞争的开始。如果你正在学习react native之类的跨平台app开发的话，不妨先花点时间来学习下微信小程序的开发，或许过段时间后，你会想丢掉原来react native之类的想法。

微信小程序的开发，用的主要还是js语言，微信为自己定义了一套框架专门用来做小程序的开发，叫MINA。接下去我们要一起学习的就是这个框架。

先记录几个网址：

1. 官方简易教程、和API说明
2. 开发工具的下载地址
3. 开发工具破解
4. 可以参考和学习别人的代码

关于微信小程序的介绍本文就不再多说了，既然读者点进来阅读本文，说明你已经有了一定的兴趣和了解，这里就不占篇幅解释了，贴几个介绍上来有兴趣的读者可以自己看看。
《微信小程序是谁的“通往财富自由之路”？》
《微信小程序，一个有局限的类似 React Native 轮子！》
《看起来很 Q 的微信小程序，背后藏着什么样的野心？》

一、开发工具

1、开发工具其实是用js开发的。（目前版本：0.9.092300）

很多人可能不知道js还能开发窗口应用。有兴趣的读者可以先了解下Electron，用nodejs写桌面应用，其原理还是类似chrominum浏览器，也就是在外套一层壳，里面是个网页，只不过做了些优化请用户感知不到是个网页，而更像个窗口应用。它提供了非常丰富的操作系统层面的api然后用js来调用并创建桌面应用程序。
这一次开放的这个微信小程序的开发工具，跟之前的公众号开发调试工具一样体验上非常相似，网上也有牛人分析这些工具就是基于Electron开发的。跟之前一样，这个工具也是要扫码登录，玩微信小程序开发的读者，大部分应该之前或多或少做过公众号开发的，至少有一定的js基础，如果没有，倒是建议您学习一下js开发，由于h5的盛行，和nodejs后台服务开发的兴起，及跨平台的移动开发（如react native）的流行等，js已经成为了是个程序员就应该至少掌握一点的语言。

2、下载好工具

如果你手中已经有一个微信小程序的内测资格，或者读者在看这篇文章的时候权限已经放开的话，那么你可以跳过这一段，直接点开上面的工具下载地址下载打开就可以了。上面给出了一个破解方法的地址，读者可以用它来突破微信内测资格的限制。替换相应的文件即可。破解其实不难，因为上面提到过这个工具是用js开发的，js是不用编译就可以运行的语言，所以代码藏不住。怎么查看代码？window用户可以进入程序目录，查看package.nw\app\dist。mac用户可以点开应用程序目录，右击->显示包内容->Contents->Resources->app.nw->app->dist，这里就是工具的源代码。做过react + flux开发的读者一眼看到这目录结构，可能会觉得很熟悉（actions, components, dispatcher, stores...），没错，它就是用react + flux架构开发的，具体的结构本篇文章暂不讨论，之前做过这方面的开发，对它的开发方式非常推崇。回到本文的主题上来，这篇文章主要是一个入门和准备。如果读者没有申请到可用的小程序权限的话，可以打开上文提到的破解文件地址，下载相应的文件替换到相应的目录即可开发。

二、跑起第一个微信小程序

1、创建项目：

点击添加项目，下一步，如果是已经有微信小程序的appId的用户（请用官方提供的原版，不需要用破解版）填入appId，用破解版的用户appId随便填都行。然后写上项目名，再选个目录就可以创建一个demo了。
进入项目后，开发工具会自动编译、运行demo，这时展现在读者眼前的就是第一个hello world程序了。

2、学习源码
打开代码的目录，第一眼看到的就是这三个最关键的文件，app.js、app.json、app.wxss，这些是每个微信小程序必不可少的文件，必须放在项目的根目录。
（1）app.js是整个程序的入口js文件。
App函数是用来注册的，传入参数生成一个主程序，它定义了整个程序相关的一些生命周期，传入json对象作为参数。先来理解一下一个微信小程序的生命周期，主要三种状态，初始化->显示->隐藏->显示->… 后面可以无限循环。当用户点击小程序图标时，会先初始化一些数据，其中onLaunch会在小程序初始化完成时调用，这时还没有page生成。接着程序从无或者从后台进入到前台（用户看得到）的时候，onShow会被触发，如果用户点击左上角关闭，或者按了设备 Home 键离开微信，这里onHide会被触发。后面如果再进入这个小程序，onShow会被再次触发。
App生成的对象是全局的，可以通过
var appInstance = getApp();
来拿到app实例。globalData是App里定义的全局都可以使用的数据对象。App函数在全局只能调用一次，而且必须在app.js中调用。
当onShow被调用后，全局就至少会有一个页面了，这时可以通过var curPage = getCurrentPage();来拿到当前显示在用户眼前的页面。这里要注意一个地方，onLaunch只是数据的初始化，还没有页面生成，所以这个函数里不要去调用getCurrentPage函数。

（2）app.json用来定义全局的一些配置参数

相关的参数及意义，上方已经在注释里说明，更新的配置说明，可以参考微信官方文档的配置详情。在这文档里，参看几个字段和它的含意就行，下方的tabBar之类的，在之后的文章中会详细介绍。

（3）app.wxss则是全局的样式定义
wxss文件就相当于css文件，用来定义一些页面的样式。理解这一点，再来看app.wxss就可以知道，它定义的应该是一些整个app的页面中，共同用到的一些样式。

3、四类文件的说明
一个框架页面由四个文件组成，分别是js、wxml、wxss、json，它们主要分为四层。js主要用来实现程序的逻辑层和数据层，wxml和wxss用来实现程序的view视图层，json就是用来写一些配置信息。它们的关系是，逻辑层处理数据后，返回到视图层显示出来，而视图层的用户操作事件反馈回逻辑层。虽然有这么多文件，但最后程序发布的时候，所有的文件都会被编译成js文件，并合并到同一个js文件里面、压缩。需要注意的是，要跟平时做h5开发区别开发，虽然js语法相通，但像document，window这些浏览器的全局对象是用不了的，这一点要特别注意。但有很多用wx来引用的接口，这些接口目测就是微信从底层暴露出来给微信小程序调用的吧。

4、开发工具的其它说明
上文中已经讲了不少跟这个工具相关的使用，这里再来补充几点工具的介绍吧。
这是一个集成了coding，编译调试运行、简单项目管理的一个工具，可以把它当成一个编辑器来用，网上有人推荐用sublime等外部工具，不过笔者不太建议。不管怎么说，切换来切换去的也怪麻烦，而且微信开发这个工具，要集成coding的功能，自然有它自己的想法，可能是要定义一套比较完整的开发流程，让开发者不用为开发工具烦恼。如下图：

左侧有几个tab，第一个，“编辑”就是给开发者管理文件、编写代码的，coding时还会有代码提示，这功能已经足够强大了。如果你之前已经习惯了用gulp、webpack之类的集成工具的话，也没关系，因为这个工具已经帮你做好这些事情了。你不用去写一堆gulpfile等的配置文件，这工具已经有一个集成化的功能，点击编译就可以完成所有的编译操作，可能你会说，没办法watch，这个我也还没找到方法，可能得去改它的源码吧。后面有机会再去研究，有结果，还会继续分享给大家。

第二个tab，非常像一个小型的chrome浏览器，只是没有地址栏。熟悉前端开发的读者一看右边的调试就会感觉非常亲切，这不就是chrome的调试器吗... 这个tab被激活时，最左侧下方会多出几个按钮，第一个是重启，就是重新编译的功能、及模拟小程序重新被打开的过程；第二个按钮，切换到后台，这个就可以模拟我们上面讲到的onShow，和onHide的生命周期；第三个按钮用来清除缓存。

最后，介绍一下第三个tab，它就是用来处理最后的流程：打包、发布。后面讲到发布流程的时候，会回来讲到这个界面。