微信小程序开发者交流群

admin

admin

发表于 2017-02-14 12:46:54


  【微信 小程序开发•系列文章一】入门基础教程

  


  


  

本系统文章主要有以下几篇:


  


      

  1. 《【微信 小程序开发•系列文章一】入门》

  2. 微信 小程序开发•系列文章二】视图层》

  3. 微信 小程序开发•系列文章三】数据层》

  4. 微信 小程序开发•系列文章四】模块化》

  5. 微信 小程序开发•系列文章五】主界面》

  6. 微信 小程序开发•系列文章六】生命周期和路由》

  7. 微信 小程序开发•系列文章七】websocket》


  

微信小程序,简单的开发,却接近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.nwappdist。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

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


  

第三个tab

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


  

到这里,第一篇文章就结束了。欢迎继续一起学习这一系列文章的第二篇。


  

新开微信交流群,欢迎入裙讨论: 群二维码


  


  


  


  


262阅读 | 0评论
你的回应