什么是小程序？

张小龙在朋友圈解释道：小程序就是不用下载、不用安装，就可以使用的应用，实现了应用“触手可及”的梦想，用户只要扫一扫、搜索就能打开，体现了“用了就走”的理念，用户不用担心安装太多应用，应用将无处不在、随时可用，却无需安装或卸载。

微信小程序是连接用户与服务的新方式，可在微信内轻松访问和传播，提供极佳的用户体验。

我们将从以下几个角度探讨小程序的发展

知识点

- 微信开发需要学习哪些知识点

- 关于小程序你需要了解什么

官网分析

- 入口文件

- 页

- 页面渲染

- 事件

- 成分

- 风格设置

官网分析

- 小程序案例研究

- 小程序源码下载

- 小程序精品课程

微信开发知识图谱

微信开发需要学习哪些知识点？点击查看详情

入口文件

首先说一下官方文档给出的框架，微信小程序官方文档给出了app.js、app.json、app.wxss，我们先从这三个文件开始讲起。

接下来我们根据官方的代码来详细说一下上面提到的三个文件。

首先是配置文件app.json

以下是官方的例子

{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

官方给出了app.json配置项列表((),(),(),()),那我们就来详细划分这些配置项吧。

1.

它的作用是配置小程序的页面，这个配置项是必须的，它接受一个数组，数组中的每个项都是一个字符串，从上面给出的代码来看：

""：[

“//”,

“/日志/”

可以看出每一项都对应着实现文件的路径及其文件名。

注意：这个配置中第一行配置是它的初始页面，例如上面代码的初始页面是

2.

该配置项用于设置小程序的状态栏、导航栏、标题、窗口背景颜色。

它提供了六个属性（(), le(-(,)), xt(), (), (-(dark,)), h()），开发者可以根据需求进行配置。

下面详细说一下这几个属性的作用：

{ "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }

显示效果

3.

该配置项用于配置页面底部的标签栏，开发者可以根据自己的需求进行配置。

注意：它是一个数组，至少只能配置2个，最多只能配置5个，并且标签栏的顺序是以数组的排序为准。

官方给出了如下五个属性((),(),(),(),list())。

接下来我讲一下我对这五个属性的理解：

用于设置各种网络请求的超时时间，单位是毫秒，官方提供了四个属性（、、、），这四个属性分别定义了wx.、wx.、wx.、这四个API的超时时间。

5.ebug

如果在app.json中配置为true，则可以在开发者工具的控制台面板中输出详细的调试信息。

以上是根据官方文档写的，经过学习，对app.json的配置有了一些经验，现在我们来看看app.js文件。

可以看到文件app.js的后缀是js，这是开发框架在逻辑层使用的语言。不过小程序也在此基础上做了修改，堪称是换了个轮子。这个框架可以让开发者更方便的调用一些微信功能，比如扫一扫、微信支付等微信独有的功能。

我们先回到 app.js 文件，以后再讨论其余部分。

这个文件是整个小程序的入口文件，也可以说是管控整个小程序生命周期的文件。那么我们就不难想象到在这个文件中应该实现的几个函数了。首先我们要注册整个程序，微信为我们提供了一个app()来注册整个程序。同时app()还实现了小程序生命周期的监控函数（，，），监控小程序的初始化，初始化完成的时候会触发。当然这个函数全局只触发一次，它监控小程序的展示，当小程序启动的时候，或者你从后台进入前台的时候，都会触发这个函数。该函数监控隐藏的小程序，当你从前台切换到后台的时候，也会触发。有了这些，一个小程序的实例就基本完成了。当然为了让开发者可以添加更多自己的逻辑，微信也提供了开发者在app()中添加自己逻辑的功能。 开发人员可以向参数添加任何函数或数据，然后可以使用此方法访问这些参数。

注意：app()只能在app.js中定义，不能注册多个。

在app.js中注册实例之后，如果想在自己的逻辑页面中调用，可以使用全局函数()，这样就可以全局调用app()中的数据。

微信官方给出的代码如下：

var appInstance = getApp() console.log(appInstance.globalData) // I am global data

注意：在 () 中获取实例后，不要私自调用生命周期函数。另外，不要使用 app.js 中的 () 函数。使用它来调用 app() 中的东西。

基本上app.js就这些东西,还有一些API里面的内容会在后面一一介绍.下面我们就看一下app.wxss这个文件,一般来说做过网站开发的(我自己是用php来开发的,这是我个人的一点拙见,如有不对请见谅)相信对css写在单独的文件中应该不会陌生,这个app.wxss也是类似的,不过他的的配置是针对全局的,也就是说如果你在后面的page中没有重新配置他,那么他就会调用这个文件中的样式设置,但是如果你有个人需求,需要在每个页面重新写样式,那也没关系,他会自动覆盖宰割文件中的样式. 当你重新创建一个微信小程序他就会出现这几个文件,以上是我结合官方文档对他们的一些理解,接下来就是page的逻辑,视图,配置的一些心得.

小程序页面

这一块就是开发者自己的业务实现文件了. 每一个页面可以放在一个文件夹中,这个文件夹中一般包括.js, .json, .wxml, .wxss 这四个文件,微信官方还建议这四个文件的名字最好和文件夹的名字一致.这个便于框架自动查找,不需要做更多的配置. 当你开始做页面的功能的时候这个时候在.js,也需要注册,微信官方给出Page()这个函数来注册一个页面,他接受一个object参数,用其来指定页面的初始数据,生命周期函数,事件处理函数.需要注意的是当你在注册这个页面的时候要确定在最开始的app.json这个配置文件中已经配置过这个页面,而且当你对程序有所改变的时候也要确保app.json这个文件中的内容也随之相应改动.

微信为Page()函数提供了几个属性（data(), (), (), (), (), (), ()），你也可以将任何函数或数据添加到参数中，并通过这个在此页面访问它。

这里简单介绍一下这些官方属性：

Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) } })

上面提到了我们通过data属性来设置页面的初始化数据，但是如果我们想改变数据里的值怎么办呢？

接下来我们来介绍一下微信官方提供的一个()函数，这个函数可以将数据从逻辑层发送到数据层，也可以改变this.data的值。

()接受一个对象参数，让数据以key的形式表示出来，将this.data中key对应的值改为。

下面是微信给出的页面生命周期的一张图：

小程序中所有页面路由均由框架管理，通过调用API即可实现路由的触发方式以及页面的生命周期函数。

下面我们就来简单介绍一下微信小程序的API。

微信小程序框架为我们提供了丰富的微信原生API，可以轻松调用微信提供的能力，比如获取用户信息、本地存储、支付功能等。

以下是微信对提供的API的说明：

具体API调用请参考微信小程序API文档

因为微信小程序还在内测期，而我也没有内测账号，所以具体的API代码需要根据微信小程序上线后的具体逻辑来实现。而且微信API文档写的很清晰，相信调用不会太难。

小程序页面效果图

以上就是微信小程序页面的页面注册和API函数实现，但是我们知道这些还不够，随着互联网的发展，我们更加注重人机交互，好的程序只有给用户带来更好的体验，接下来我们再来说说微信小程序是如何渲染页面的。

微信小程序采用微信原生的渲染方式，微信小程序的页面布局采用wxml，然后结合基础组件、事件系统构建页面结构。

wxml中的方法有多种，包括数据绑定、条件渲染、列表渲染、模板、事件、引用等，下面我们来详细说一下这些方法。

数据绑定上面我们说过了，在Page()中注册页面的时候，会有一个data属性来定义初始化数据，现在在绑定页面渲染的数据的时候，就需要调用data中的数据了，我们看一下官方的例子。

<view> {{ message }} view>

Page({ data: { message: 'Hello MINA!' } })

从上面的代码我们可以看出，视图层在接收逻辑层传来的代码时，需要用两个花括号包裹数据的键值，才能获取数据的值。当然视图层还可以进行运算（三元运算、四则运算）、逻辑判断、字符串运算，还可以在花括号里进行组合（数组、对象（虽然可以随意组合，但是如果后面的变量名和前面的变量名相同，那么后面的会覆盖前面的））。

条件渲染，顾名思义就是根据条件判断代码块是否需要渲染。条件渲染主要用到wx:if和wx:else，第一个比较容易理解，第二个是用于条件渲染的。这里我们特别说明一下，< />不是一个组件，它只是一个包装元素，在页面中不会做任何渲染，只接受控制属性。类似我们前面的逻辑编程，既然有了wx:if，那么也会有wx:和wx.else。这些组合可以让条件渲染更加灵活。

这里在官方文档中对 wx:if 和 进行了比较，合理使用这两种方法可以使你的程序更加的优秀。下面我们来谈谈它们之间的区别：

因为 wx:if 可能还包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个本地的渲染过程，会保证在切换时条件被销毁或者重新渲染。同时 wx:if 也是惰性的，如果初始渲染条件是，框架不会做任何事情，只有当条件第一次变为真时才会开始渲染。相比之下就简单多了，组件会一直被渲染，只是简单的显示隐藏控制。总体来说，wx:if 的切换成本高一些，初始渲染成本也高一些，大家根据需求来调用即可。