微信小程序是腾讯推出的一种全新的连接用户与服务的方式，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。就在上一年，腾讯公司的微信开发者工具就加入了微信小程序的开发功能，然而，目前网络上存在的微信小程序开发教程屈指可数，而微信公众平台上的官方文档提供的教程又十分简单。这令初学者在开发微信小程序时十分吃力，尤其是前端开发小白，它们在开发的过程中很容易陷入懵逼的状态。所幸的是，笔者在前段时间参与了微信小程序的开发，在微信小程序的开发方面积累了部分经验。因此，本着共同学习的理念，笔者斗胆写下《微信小程序初探》的系列文章，望各位同僚与我共同学习，不足之处还望指正。
我们先来看一下开发工具提供给我们的案例
在示例的主界面我们能看到三个最主要的部分，最左边的是程序视图，我们能够直观地看到我们设计出来的程序的面貌。中间就是文件列表。右边就是编辑部分。本文将要主要介绍官方案例中各个文件的功能和作用。
一 认识各种文件格式
从demo中我们能看到共有三个文件以及两个目录，我们先来看一下放在外面的三个文件。第一个就是 app.js 文件，也就是JavaScript文件，这一类文件的主要作用是充当微信小程序的脚本文件，开发者可以在 .js文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API
第二个文件就是app.json文件，app.json文件是配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题的重要文件。注意该文件不可添加任何注释。
第三个文件就是app.wxss文件，app.wxss文件是规定了小程序的样式，它的原理和网页开发当中的css样式相当。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。当然，每个页面也可以有属于自己的私有的样式文件。
以上三者便是微信小程序中最重要的三个文件，接下来，我就要介绍另外两个目录，而这两个目录组成了微信小程序的各个页面。在本文，我将着重介绍pages目录
pages目录里面装着的就是微信小程序的各个页面的代码。在这个demo里面总共有两个页面，一个是index，一个是logs。细心的读者会发现，页面的代码文件组成与app的代码文件组成十分类似，它们都有.js,.json以及.wxss文件，唯一不同的是页面代码文件有.wxml文件。.wxml文件的作用跟网页开发里面的HTML有着相似之处。它定义了页面的结构，这些结构包括了按钮，文本等，它们是组成页面必不可少的元素。可以这么说，.json和.wxss文件都是为.wxml文件服务的。
值得一提的是，页面的代码文件里面，.js和.wxml文件是必不可少的，而.json和.wxss文件则是可选择的。
OK，那么微信小程序中的各个格式的文件的介绍就到这里了，接下来，笔者就会以官方提供的demo为例子，简要地解释各个文件里面的代码含义。在这里笔者不会逐个逐个字句解释，而是大概讲解代码中函数的含义，在以后的文章中，笔者会详细讲解。
二 简要的代码解释
首先我们来看一下app.js文件。
我们由头来分析代码，我们会发现整个app.js文件的代码都包含在了APP（{}）当中，它的功能是注册一个小程序，用以制定小程序的生命周期。
往下走，看到onLaunch()函数。还记得我在上文中提到的小程序的生命周期吗？这个函数代表的是小程序刚刚开始运行时所执行的内容。该函数的具体功能可以在官方提供的api中找到，这里我贴上一张图，里面包含了onLaunch在内的多个代表了小程序生命周期的函数。有兴趣的朋友可自行到微信公众平台查阅。
那么在该app.js文件中，onLaunch函数充当了接收本地数据的角色。
往下走，我们看到getUserInfo: function(cb)这里，我们只需知道，该函数的作用是接收用户的信息并且调用登录接口。没接触过JavaScript的朋友可以注意一下，函数名：function(形参）是js中函数声明的方式。
在getUserInfo: function(cb)函数的下方，我们可以看到globalData，顾名思义，他是微信小程序中的全局变量。
在大致了解了app.js文件的代码后，我们看一下app.json文件的代码
代码很简单，分为两个部分，一个是pages，一个是window。pages声明了该小程序由什么页面组成的，比如，该小程序由两个页面组成。同时，pages也声明了小程序的起始页面，也就是放在最上面的页面，pages/index/index。我们不妨试一下，改变上下顺序会怎么样。
可以看到，程序的起始页面改变了。
我们再来看一下window，它声明了背景文字样式，导航栏的颜色，文字和字体颜色。我们修改一下，把navigationBarBackgroundColor改为#000，然后把navigationBarTitleText改为微信，再把navigationBarTextStyle改为white。
显而易见地，导航栏发生了变化。不仅如此，所有页面的导航栏都会改变。不过，如果你想要改变单个页面的导航栏样式，你可以单独修改页面的json文件。
接下来我们稍微了解一下app.wxss
正如我上文所说，.wxss文件定义的是css样式，而css样式多如牛毛，我也不一一讲述，新手可以自行试着修改demo中的样式，并结合官方api学习。唯一需要知道的是，.container指的是该样式的class名，开发者在wxml标签中通过不同的class名来选择不同的样式。
接下来，笔者将讲解index.wxml文件。
wxml文件与HTML的原理其实很接近，它们都是通过一个一个的标签来把页面构造出来的。首先，我们了解一下标签，标签就是上面代码中有<>尖括号的代码，标签可以声明页面的基本元素如按钮，文本，输入框等。值得注意的是，wxml中的<view>标签和HTML中的<div>标签意思接近，大概就是指页面的模块，它们把页面分成不同的模块以方便开发者布局。仔细观察可以发现，每个标签中都有class这个东西，正如笔者在前文所说，它们其实是“选择器”，选择不同名字的样式来显示标签元素。
OK，本文到这里也差不多结束了，本文主要讲述了微信小程序中的文件结构以及部分代码的解析。我在这里没有把所有页面的js,json,wxss和wxml文件都讲解一遍，原因是它们的原理和我上文所讲的四个文件很接近，读者可自行理解。不理解也没关系，我在以后的文章中会详细解析。
第一次写有关技术的博客，很多东西表达的不够到位，望海涵。各位看官如果有什么好的建议请一定提出，笔者感激不尽。
网友评论