1.简介 1.1 微信小程序

微信小程序最近动作很多，最近新增的功能包括：

种种迹象表明，微信对于小程序抱有很大的期望，所以当几个月内推出的结果没有达到预期时，之前的很多“拘束”逐渐变成了“肆无忌惮”——但无论小程序，多了解一下程序未来的发展对我们开发者来说总没有坏处。

1.2 为什么写这篇文章？

他山之石可以攻玉。

对于技术人来说，多了解不同的技术、不同的开发模式、不同的架构思想，提高技术的“广度”对于自己的成长是非常有必要的。

因此，本文就是从一个开发者的角度，从项目工程的角度来分析一下“微信小程序”和“App”开发的一些异同。

“微信小程序”开发是一项比较新的技术。希望通过这篇文章，您可以了解更多。

1.3 本文的目标读者

因为内容是从开发的角度讲的，所以我假设你已经熟悉开发了。而且我对微信小程序的开发也比较感兴趣。如果能有一些CSS的基础知识就更好了！

2. 开发语言比较2.1 开发语言

开发我们已经很熟悉了——

2.2 小程序的开发语言

作为对比，微信小程序开发使用的语言有这些——

2.3 什么是wxml和wxss？

wxml() 基本上等同于 xml。微信之所以不直接使用xml，可能是为了方便以后的扩展（很有野心）。

同理，wxss()基本上就等价于css。微信还扩展了一些功能，比如统一尺寸单位rpx。

2.3.1 小程序为什么使用wxml + wxss来描述页面？

例如，页面的描述基本都是用xml定义的，如：

这是一个简单而典型的例子。该文件描述了两部分：

页面结构：一个id，内部包含一个id。页面样式：以及各自的属性：、，以及字体大小、颜色、文字内容等。

微信小程序使用的wxml + wxss方法：

一些.wxml：

张三

一些.wxss：

.userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-nickname { width: 128rpx; color: #aaa; }

很明显wxml负责显示页面结构；而wxss负责定义页面样式。

这种结构和风格的分离实际上延续了Web开发（html + css）中的习惯。

这样做至少有两个好处：

3. 项目结构比较 3.1 小程序项目结构

小程序项目结构

——看起来还是一个相当简单的结构：

文件夹中有三个以app命名的文件：app.js、app.json、app.wxss

我们来梳理一下文件功能： 3.2 app相关：app.js、app.json、app.wxss

这三个文件用于描述小程序APP相关的内容。它们的命名是固定的，位置也固定在根目录中。

3.2.1 应用程序.js

app.js 基本上相当于 in 中的类，文件中主要有一个 App() 函数，用于初始化小程序。

【对比】我们在函数中进行初始化操作。

[对比] 有时我们也会放一些定制的数据供不同页面使用。

【比较】想想()方法~:-D

3.2.2 应用程序.json

app.json的功能与app.json中的.xml文件非常相似——它们都是静态配置文件。

【对比】同样需要在.xml文件中声明。另外，还可以在这里设置App的主题。

3.2.3 应用程序.wxss

app.wxss 定义全局样式 - 它定义的样式将应用于每个页面。例如，在app.wxss中添加：

text {

padding:5px; }

您可以向所有文本控件添加 5px。

当然，页面本身的.wxss可以定义局部样式来覆盖全局样式。

【对比】目前还没有类似app.wxss的全局设置。我们需要在每个 .xml 中定义每个控件的属性。即使我们可以使用文件来提取一些统一的样式，我们仍然需要在每个View中定义它们。用这个来设置属性——从这一点来看，使用wxss更有优势。

3.3 文件夹

根目录下的文件夹中有一个util.js文件。这个名字的意思是类似于Java中的一些工具类。

文件夹实际上是一个非必需的结构，它之所以出现在官方项目中是作为代表，表明开发者可以在这里自定义新的文件夹和结构。微信小程序作为一个使用js开发的平台，可以使用很多第三方js库。这些第三方库，以及其他图片资源等，都可以放在自定义文件夹中。

3.4 文件夹

该文件夹包含两个子目录：和logs。两个目录的结构基本相同。它们都包含四个具有相同主名称的文件：xx.js、xx.wxml、xx.json、xx.wxss。文件。

这样典型的结构表明它是一个小程序的页面。这四个文件的作用分别是：

4.视图更新方法比较

对于视图的动态显示，微信小程序使用了数据绑定（data-）。

如果你之前使用过Vue.js或者Vue.js等流行的js框架，那么你对数据绑定肯定并不陌生。它是一种将控件的属性与数据对象（view-）的属性绑定的方法，这样当数据对象的属性改变时，控件相应的属性也会随之改变——在开发过程中，这个方法将使View层的显示控制变得非常简单和自然。

基于此，除了之前的MVC和MVP之外，软件工程中还有另一种流行的架构方法——MVVM（-View-）。

现在数据绑定太流行了，官方已经发布了[Data]()来支持数据绑定。但由于成熟度等原因，目前尚未成为主流。中主流的视图显示方式，还是开发者手动给各个控件设置数据。

——单从这一点来看，微信小程序的开发模式比原生更“先进”~

5、页面生命周期对比

小程序虽然和前端H5页面一样都是用js开发的，但由于它最终运行的平台不再是浏览器，而是表现得和app几乎一样，所以页面的生命周期和app的生命周期类似。应用程序。

小程序页面的典型生命周期如下：

比较生命周期：

微信小程序的页面生命周期稍微简单一些，但主要思想和生命周期基本相同。

6. 比较

小程序的官方IDE是微信出品的微信网页开发工具。内置小程序运行环境。它本质上是一个基于内核的浏览器框架，可以看作是一个模拟器。

——虽然相对于各种高端模拟器来说有点简陋，但是该有的功能基本上都有了（断点、日志、网络监控等），而且由于是基于浏览器内核DOM解析的页面，所以运行速度就像浏览器打开网页一样流畅，并且不像模拟器那样对系统资源有很高的要求。

另外，绑定开发者账号后，还可以使用手机进行实机调试来调试小程序，因此上线前也可以使用不同的机器进行全面的兼容性测试。

七、总结

总体来说，小程序作为一种新的形态，从发展的角度看，可以看作是【开发】和【H5开发】的结合体。吸收了原生开发和H5开发的优点。无论是前端开发者还是原生开发者，都可以在微信小程序中找到很多熟悉的东西。我这里就不详细说了。如果你有兴趣，可以自己尝试一下。

综上所述，自然有两类人特别适合小程序开发——H5前端开发者，以及以前/iOS原生App开发者。

微信小程序的开发一般都很简单。

——对于前端开发者来说，了解一些原生App的相关思想就足够了。其实这些任务只需要阅读小程序的开发者指南即可。

——对于原生开发者来说，只要懂一点js（html/css）知识，基本就可以上手。如果你之前有过使用js的经验，那么不用说，花半个小时看看小程序的文档就可以直接跳进去了！

关于作者：