微信小程序开发教程

一、小程序框架概述

以下是腾讯官方对小程序框架的表述：

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

从这个表述可以看出，小程序的采用了全新的开发语言（尚且可以称为“小程序语言”）。“小程序语言”结合了同学们熟知的JAVASCRIPT、CSS。全新的开发语言带来了机会和挑战。一方面，对于新手、没有太多开发经验的“菜鸟”来说，“小程序”是个很不错的机会——全新的语言，大家都是相同的起跑线。另一方面，对于已经有一定开发年限的“老鸟”来说，“小程序”有很多地方和已有的技术很像，有很多知识是可以借鉴的。因此，学习的成本不会很大。

“小程序语言”主要有以下特点：

1．“双向数据绑定”

对于“双向数据绑定”，官方文档是这样表述的：

小程序框架的核心是一个响应的数据绑定系统。

“响应的数据绑定系统”就是通常说的“双向数据绑定”。如果你对FLEX有一定的了解，相信你对“双向数据绑定”不会很陌生。“双向数据绑定”简单的可以解释成，变量的值和绑定该变量的控件所显示的数据是绑定的。

举个例子（附件3.1）

 

点击“专注微信培训”，bindtap的方法改变view绑定的变量str，相应的view有相应的改变。

现在你还不需要完全看懂这段程序，你现在需要了解的重点是

this.setData({str:this.data.str+" 最爱九宝"});这是点击“专注微信培训”执行的修改变量str的主要程序。

<view>{{str}}</view>这是view绑定str变量

你已经看到了，我们没有像你想象的哪像，在JavaScript中先得到对象，然后修改对象的显示值。这就是“双向数据绑定”。

2．分层结构

对于“分层结构”，官方文档是这样表述的：

整个系统分为两块视图层（View）和逻辑层（App Service）框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

“三层架构”相信同学们都已经耳熟能详了。“小程序”一样是分层结构，但是只有视图层（View）和逻辑层（App Service）。

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language)用于描述页面的结构。WXSS(WeiXin Style Sheet)用于描述页面的样式。组件(Component)是视图的基本组成单元。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。小程序开发框架的逻辑层是由JavaScript编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 必须注意的是，在JavaScript 的基础上，腾讯做了一些修改，以方便地开发小程序。

微信小程序(内测版)科普课程