小程序开发[2]

WXML模板

从事网页编程的人都知道网页编程使用HTML+CSS+JS的组合。HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于处理页面和用户之间的交互。

同样，小程序中也有相同的角色，WXML扮演着类似于HTML的角色。打开页面/索引/索引。wxml，您将看到以下内容：

获取您的头像昵称</button>

<块wx:else>

<；/图像>

｛｛userinfo.nickname｝｝

{{座右铭}}

与HTML非常相似，WXML由标签、属性等组成，但也有很多不同。让我们逐一解释：

标签名称有点不同

在编写HTML时，常用的标记是div、p、span。开发人员在编写页面时可以根据这些基本标签来组合不同的组件，例如日历、弹出窗口等。换句话说，既然我们都需要这些组件，为什么我们不能打包这些常用的组件来大大提高我们的开发效率。

从上面的示例中，我们可以看到小程序的WXML标签是视图、按钮、文本等。这些标签是小程序为开发人员打包的基本功能。我们还提供地图、视频、音频和其他组件功能。

添加了wx:if等属性和{{}}等表达式

在网页的一般开发过程中，我们通常使用JS来操作DOM（由相应的HTML描述生成的树），以引起界面中的一些变化，以响应用户的行为。例如，当用户单击按钮时，JS会将一些状态记录到JS变量中，并通过DOM API操纵DOM属性或行为，从而导致界面发生一些变化。当项目越来越大时，您的代码将充满大量界面交互逻辑和程序的各种状态变量。显然，这不是一种好的开发模式，因此有一种MVVM开发模式（如React、Vue），它主张将渲染与逻辑分离。简单地说，不要让JS直接控制DOM。JS只需要管理状态，然后使用模板语法来描述状态和接口结构之间的关系。

小程序框架也使用了这个想法。如果您需要在界面上显示Hello World的字符串。

WXML表示：

｛｛msg｝｝

可能

你好世界

JS只需要管理状态：

这setData（｛msg:“Hello World”｝）

通过｛｛｝｝的语法将变量绑定到接口称为数据绑定。仅数据绑定不足以完全描述状态和接口之间的关系。它还需要控制功能，如if/else和for。在小程序中，这些控制功能由以wx:开头的属性表示。

WXML属性详细信息

WXSS样式的WXSS具有CSS的大部分特性，小程序也在WXSS中进行了扩展和修改。

添加了尺寸单位。在编写CSS样式时，开发人员需要考虑到移动设备的屏幕具有不同的宽度和设备像素比，并使用一些技术来转换一些像素单位。WXSS在底层支持一个新的维度单位rpx。开发人员可以避免转换的麻烦。他们只需要将其交给小程序的底层进行转换。由于转换中使用了浮点运算，因此运算结果将与预期结果略有偏差。

提供全局和局部样式。与之前的app概念相同。json和页面。json，你可以写一个app。wxss作为全局样式，它将影响当前applet的所有页面。本地页面样式，页面。wxss仅对当前页面有效。

此外，WXSS只支持一些CSS选择器

WXSS属性详细信息

JS逻辑与服务交互。仅显示界面是不够的。它还需要与用户交互：响应用户的点击，获取用户的位置等等。在小程序中，我们通过编写JS脚本文件来处理用户操作。

{消息}}<；buttonbindtap=“clickMe”>单击我</按钮>

单击按钮时，我们希望在界面上显示消息为“Hello World”，因此我们在按钮上声明一个属性：bindtap，并在JS文件中声明clickMe方法以响应此单击：

页面（｛clickMe:function（）｛this.setData（｛msg:“Hello World”｝）｝｝）

逻辑层JS文件

后端接收的数据将被处理。官方封装和修改基于JavaScript：

app和页面方法