「小程序」微信小程序基础语法讲解（一）

一、概述

微信小程序是一种快速构建应用的平台，其基础语法主要包括以下几个方面：

WXML：微信小程序的模板语言，类似于HTML，用于描述页面结构。

WXSS：微信小程序的样式语言，类似于CSS，用于描述页面样式。

JS：微信小程序的脚本语言，用于实现页面的逻辑和交互。

JSON：微信小程序的配置文件，用于配置小程序的全局配置、页面配置等信息。

小程序由配置代码JSON文件、模板代码WXML文件、样式代码WXSS文件以及逻辑代码JavaScript文件组成。

小程序代码主要由四个部分组成：

JSON（JavaScriptObjectNotation）配置：JSON是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

WXML（WeiXinMarkupLanguage）模板：类似于HTML的标记语言，用于描述小程序的结构层次。

WXSS（WeiXinStyleSheets）样式：类似于CSS的样式表语言，用于设置小程序的样式和布局。

JS（JavaScript）逻辑交互：用于实现小程序的逻辑和交互效果。

以上三个部分分别对应小程序的结构层、样式层和行为层，它们共同组成了小程序的整体代码。此外，小程序还可以使用JSON文件来配置一些全局信息，如窗口标题、页面路径等。

JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，具有易于理解、读写和解析等特点，广泛应用于Web应用、移动应用等领域。在小程序中，JSON被用于配置小程序的各种属性和信息。

小程序的JSON配置包括两部分：

和页面的配置文件。其中，是小程序的全局配置文件，用于配置小程序的窗口属性、底部导航栏属性、页面路径等信息。

页面的配置文件包括.json、.wxml、.wxss、.js四个文件，用于配置页面的数据、结构、样式和行为等信息。

JSON配置的作用主要有以下几个方面：

配置小程序的基本信息：小程序的标题、窗口大小、导航栏样式等。

配置页面的路径和导航栏信息：在文件中配置小程序的页面路径，可以通过导航栏进行页面的跳转。

配置底部导航栏：可以通过tabBar属性来配置小程序的底部导航栏，使得用户可以快速切换页面。

配置页面的数据和结构：在页面的.json和.wxml文件中配置页面的数据和结构信息，包括页面的标题、背景色、布局等。

配置页面的样式和行为：在页面的.wxss和.js文件中配置页面的样式和行为信息，包括页面的字体、颜色、动画等。

通过配置小程序的JSON文件，开发者可以控制小程序的外观和行为，从而提升小程序的用户体验。

让我们来看一个小程序的JSON配置示例：

在这个示例中，我们定义了小程序的三个部分的配置信息：

"pages"：定义了小程序的页面路径，可以在其中指定小程序的各个页面。

"window"：定义了小程序的窗口属性，可以在其中设置小程序的标题、导航栏背景色等。

"tabBar"：定义了小程序的底部导航栏属性，可以在其中设置底部导航栏的颜色、选中颜色等，以及每个导航栏的文字、图标等。

以上三个部分的配置信息都是以JSON格式呈现的，小程序可以通过读取这些配置文件，来确定小程序的结构、样式和行为等方面的信息。

WXML（WeiXinMarkupLanguage）是一种类似HTML的标记语言，是小程序开发中的一部分。它用于描述小程序的结构和组件，可以像HTML一样编写静态页面。

WXML模板由一系列的标签和属性组成，用于描述小程序页面的结构和内容。与HTML类似，WXML也是一种层次化结构，标签可以嵌套，形成父子关系。在WXML中，每一个标签都有一个对应的属性，用于控制标签的显示和行为。

与HTML不同的是，WXML的标签和属性名称与HTML略有不同，同时WXML也提供了一些专门的组件，用于描述小程序的特殊功能，如导航栏、下拉刷新等。

WXML模板的优点在于：

简洁：WXML使用了类似HTML的语法，使得开发者可以用更少的代码实现页面的效果。

专门为小程序设计：WXML提供了许多专门为小程序设计的标签和组件，可以方便地实现小程序的各种功能。

与JS交互方便：WXML可以通过绑定数据、事件等方式与JS交互，使得页面的数据和行为可以方便地控制。

组件化开发：WXML支持组件化开发，可以将页面拆分成多个组件，降低代码耦合度，提高代码的复用性。

通过WXML模板，开发者可以轻松创建小程序的页面结构和布局，并实现小程序的各种功能和交互效果。

view：视图容器，类似于HTML中的div标签。

text：文本容器，用于显示文本内容。

image：图片容器，用于显示图片。

block：块级容器，可以替代view使用，但是不会在页面中生成额外的节点。

swiper：滑块视图容器，用于展示轮播图等内容。

scroll-view：可滚动视图容器，用于展示大量数据时，可以滚动查看。

icon：图标容器，用于显示小图标。

button：按钮容器，用于实现用户交互。

input：输入框容器，用于接收用户输入。

checkbox：复选框容器，用于选择多个选项。

radio：单选框容器，用于选择一个选项。

picker：选择器容器，用于从预设的选项中选择一个或多个选项。

form：表单容器，用于收集用户输入的数据。

navigator：导航容器，用于实现页面跳转。

以上是WXML模板中常用的标签，当然还有其他的标签和属性，可以根据具体需求进行选择使用。

在WXML模板中，view和block都是容器标签，用于包裹其他组件或元素，但是它们在渲染和表现上有一些区别：

渲染差异：view在渲染时会被转换为div标签，而block则不会被转换，它只是一个纯粹的容器标签，不会在页面中生成额外的节点。

样式差异：view和block的样式类别都是块级元素，但是在一些情况下它们的默认样式可能不同。比如，view默认有一些边距和内边距，而block则没有，这可能会影响布局效果。

使用场景：view和block在使用场景上也有一些差异，view更适合用于布局容器，比如页面的主要结构、列表的项等；而block更适合用于临时包裹一些元素，比如在一个条件判断中，将一些元素作为一个整体进行包裹等。

综上所述，view和block都是容器标签，具有类似的功能，但是它们在渲染、样式和使用场景上可能有一些区别，开发者可以根据具体需求进行选择和使用。

下面是一个简单的WXML模板示例：

!--="container"viewclass="title"HelloWorld!/viewimagesrc="../../images/"class="avatar"/imageviewclass="description"ThisisademoforWXMLtemplate./viewbuttonclass="button"bindtap="onTap"ClickMe/button/view

在这个示例中，view标签表示一个视图容器，可以嵌套其他标签。image标签表示一个图片标签，用于显示图片。button标签表示一个按钮，用于触发事件。

WXML的语法与HTML类似，但是也有一些区别。在WXML中，不能使用HTML的标签和属性，而是要使用小程序提供的标签和属性。同时，WXML也支持一些特殊的语法，如{{}}双大括号表示数据绑定、wx:if条件渲染、wx:for列表渲染等，可以方便地实现复杂的页面效果。

WXML模板中，可以使用wx:if条件渲染标签，实现根据条件显示不同内容的效果。下面是一个WXML模板条件示例：

!--="container"viewwx:if="{{isShow}}"class="title"HelloWorld!/viewviewwx:if="{{!isShow}}"class="title"GoodbyeWorld!/viewbuttonclass="button"bindtap="onToggle"Toggle/button/view

在这个示例中，我们定义了一个isShow数据项，用于控制显示不同的标题。在WXML中，我们使用wx:if条件渲染标签，根据isShow的值来判断显示哪个标题。

//({data:{isShow:true},onToggle:function(){({isShow:!})}})

在JavaScript文件中，我们使用setData函数来更新isShow的值，从而触发模板的重新渲染。

通过使用wx:if条件渲染标签，我们可以方便地实现根据条件显示不同内容的效果，从而增强小程序的交互性和可用性。

WXML模板中，除了使用wx:if条件渲染标签，还可以使用wx:else标签来实现条件判断的else分支。下面是一个WXML模板条件if/else示例：

!--="container"viewclass="title"WelcometoMyPage!/viewviewwx:if="{{isVIP}}"class="subtitle"VIPUser/viewviewwx:elseclass="subtitle"NormalUser/view/view!--elif--viewwx:if="{{view=='WEBVIEW'}}"WEBVIEW/viewviewwx:elif="{{view=='APP'}}"APP/viewviewwx:else="{{view=='MINA'}}"MINA/view

在这个示例中，我们定义了一个isVIP数据项，用于控制显示不同的用户类型。在WXML中，我们使用wx:if和wx:else标签，根据isVIP的值来判断显示不同的用户类型。

在JavaScript文件中，我们定义了一个onLoad函数，用于初始化isVIP数据项。

//({data:{isVIP:true},onLoad:function(){}})

在JavaScript文件中，我们可以使用各种方式来初始化数据项，例如从服务器获取数据、从本地缓存获取数据、从用户输入获取数据等等。

通过使用wx:if和wx:else标签，我们可以方便地实现条件判断的else分支，从而增强小程序的可用性和交互性。

WXML模板中，可以使用wx:for列表渲染标签，实现根据数据循环渲染列表的效果。下面是一个WXML模板循环示例：

!--="container"viewclass="title"List:/viewviewwx:for="{{list}}"wx:key="id"class="item"{{}}/view/view

在这个示例中，我们定义了一个list数据项，它是一个数组，包含了一些对象。在WXML中，我们使用wx:for列表渲染标签，遍历list数组中的每个对象，然后根据对象的属性渲染列表项。

在JavaScript文件中，我们定义了一个onLoad函数，用于初始化list数据项。

//({data:{list:[{id:1,name:'Item1'},{id:2,name:'Item2'},{id:3,name:'Item3'}]},onLoad:function(){}})

在JavaScript文件中，我们可以使用各种方式来初始化数据项，例如从服务器获取数据、从本地缓存获取数据、从用户输入获取数据等等。

通过使用wx:for列表渲染标签，我们可以方便地实现根据数据循环渲染列表的效果，从而增强小程序的可用性和交互性。

WXSS（WeiXinStyleSheets）是小程序的样式语言，用于控制小程序界面的外观和布局。它是一种CSS扩展语言，具有类似CSS的语法，但也有一些自己的特点和限制。

WXSS支持大部分CSS语法和特性，如选择器、盒模型、浮动、定位、字体、背景、颜色、动画等等。目前支持的选择器有：

选择器

样例

样例描述

.class

.intro

选择所有拥有class="intro"的组件

firstname

选择拥有id="firstname"的组件

element

view

选择所有view组件

element,element

view,checkbox

选择所有文档的view组件和所有的checkbox组件

::after

view::after

在view组件后边插入内容

::before

view::before

在view组件前边插入内容

全局样式与局部样式：

如果您想要在多个页面或组件中使用相同的样式，可以使用小程序提供的全局样式(globalstyle)或公共样式(commonstyle)功能。具体来说，您可以在中定义全局样式或在一个独立的wxss文件中定义公共样式，然后在页面或组件的样式标签中引用它们。

定义全局样式的方法是在中定义样式类，这些类可以在整个小程序中使用。例如：

/**/.global-text{font-size:16px;color:00c2ff;color:fff;color:00c2ff;text-decoration:none;}.link:hover{text-decoration:underline;}/*使用样式*/viewclass="page"viewclass="title"这是标题/viewviewclass="subtitle"这是副标题/viewviewclass="text"这是文本内容/viewaclass="link"href=""这是链接/a/view

在这个示例中，定义了一些基本样式，如背景色、字体大小、边距和颜色等，并分别给不同的元素应用了不同的样式类。在使用样式时，只需要在对应的元素上添加对应的类名即可。

微信小程序中的JS主要用于实现页面的逻辑交互和数据处理等功能。以下是一些常见的JS交互方式：

数据绑定和事件绑定：在WXML中通过{{}}语法进行数据绑定，在WXSS中使用{{}}语法绑定样式，同时也可以在JS中使用setData方法更新页面数据。事件绑定则可以使用bind和catch前缀绑定事件处理函数。

API调用：微信小程序提供了丰富的API接口，可以通过JS代码调用这些API来实现各种功能，例如获取用户信息、调用支付接口、发送请求等。

生命周期函数：微信小程序中提供了多个生命周期函数，可以在不同的阶段执行相应的操作，例如onLoad、onShow、onReady、onHide、onUnload等。

自定义组件：自定义组件可以将一组WXML、WXSS和JS封装成一个独立的组件，可以在不同的页面中复用。自定义组件中可以使用属性和事件来实现数据传递和交互。

总之，微信小程序中的JS主要用于实现页面的逻辑交互和数据处理，可以通过数据绑定、事件绑定、API调用、生命周期函数、自定义组件等方式来实现不同的功能。需要注意的是，为了提高小程序的性能和体验，应尽量减少不必要的操作和网络请求，同时避免频繁更新页面数据。

下面是一个简单的微信小程序JS逻辑交互的示例：

1、WXML文件

2、JS文件

Page({data:{message:'HelloWorld'},changeMessage:function(){({message:'你好，世界！'})}})

微信小程序生命周期函数的执行顺序如下：

onLaunch：当小程序初始化完成时，会触发onLaunch函数，这是整个小程序生命周期的第一个函数，只执行一次。一般用来做一些初始化操作。

onShow：当小程序启动或从后台进入前台显示时，会触发onShow函数。在小程序生命周期中，onShow函数可能会被多次执行。一般用来获取小程序的状态信息。

onPageLoad和onReady：当小程序页面加载完成时，会依次触发onLoad和onReady函数。onLoad函数会在页面加载时触发，而onReady函数会在页面初次渲染完成时触发。onPageLoad一般用来初始化页面数据。onReady一般用来进行页面布局操作。

onPullDownRefresh：当用户下拉刷新页面时，会触发onPullDownRefresh函数。

onReachBottom：当页面滚动到底部时，会触发onReachBottom函数。

onHide：当小程序从前台进入后台时，会触发onHide函数。

onUnload：当小程序退出时，会触发onUnload函数。

以页面为例，可以在.js文件中定义相应的生命周期函数：

在组件中也可以使用相应的生命周期函数进行配置。需要注意的是，在小程序中，组件的生命周期函数会受到父组件的影响，具体的执行顺序会受到组件的嵌套关系的影响。

微信小程序中常见的事件函数有：

具体来说：

-bindtap是捕获型事件，触发事件后先执行当前元素的事件函数，再向上冒泡执行父元素的事件函数。如果父元素也绑定了bindtap事件，那么该事件也会被触发执行。-catchtap是冒泡型事件，触发事件后先执行父元素的事件函数，再向下捕获执行当前元素的事件函数。如果当前元素绑定了catchtap事件，那么该事件会阻止冒泡，不会继续向上执行父元素的事件函数。

bindinput/catchinput：输入事件函数，当用户在输入框中输入内容时触发。这两者的区别跟上面的区别一样。

bindscroll/catchscroll：滚动事件函数，当用户在页面上滑动时触发。这两者的区别跟上面的区别一样。

bindlongpress/catchlongpress：长按事件函数，当用户长按某个元素时触发。这两者的区别跟上面的区别一样。

bindsubmit/catchsubmit：表单提交事件函数，当用户提交表单时触发。这两者的区别跟上面的区别一样。

bindcancel/catchcancel：表单取消事件函数，当用户取消表单时触发。这两者的区别跟上面的区别一样。

除了以上常见的事件函数外，微信小程序还提供了很多其他的事件函数，具体可以参考微信小程序开发文档。

在编写事件函数时，需要注意以下几点：

事件函数的名称应该与绑定事件的属性名称一致，以便能够正确地触发事件。

事件函数中可以通过event对象获取事件的相关信息，例如事件类型、触发元素、触发位置等。

在事件函数中可以调用小程序提供的API来实现相应的功能和效果。

需要注意的是，事件函数的触发顺序与绑定的先后顺序有关，即先绑定的事件函数先执行。同时，在一个元素上绑定多个事件函数时，需要使用bind和catch来区分冒泡事件和非冒泡事件。

微信小程序支持双向绑定的方式是通过使用input、textarea等表单元素的value属性实现的。当用户在表单元素中输入内容时，value属性会自动更新绑定的数据，反之，当数据更新时，表单元素的值也会随之更新。

以下是一个示例，演示了如何在微信小程序中实现双向绑定：

!--在wxml文件中--viewclass="container"inputtype="text"value="{{inputValue}}"bindinput="onInput"/text输入的内容是：{{inputValue}}/text/view

js文件

//在js文件中Page({data:{inputValue:''},onInput:function(e){({inputValue:})}})

在这个示例中，input元素的value属性与inputValue数据进行了双向绑定。当用户在输入框中输入内容时，onInput方法会被调用，并通过setData更新inputValue数据的值。这个过程中，value属性会自动更新，以反映inputValue数据的当前值。同时，在页面中也会展示出用户输入的内容。

微信小程序的目录结构如下：

├──//小程序逻辑├──//小程序公共配置├──//小程序公共样式├──pages//页面目录│├──index//index页面目录││├──//index页面逻辑││├──//index页面结构││└──//index页面样式│└──├──components//组件目录│├──my-component//my-component组件目录││├──//my-component组件逻辑││├──//my-component组件结构││└──//my-component组件样式│└──├──images//图片目录├──utils//工具目录├──//项目配置文件└──//项目说明文件

其中说明：

是小程序的全局逻辑文件，包括小程序的生命周期函数等。

是小程序的公共配置文件，包括小程序的页面路径、窗口配置、全局样式等。

是小程序的公共样式文件，包括全局样式和公共组件样式等。

pages目录下存放小程序的页面文件，每个页面文件包括对应的js、wxml和wxss文件。

components目录下存放小程序的组件文件，每个组件文件包括对应的js、wxml和wxss文件。

images目录下存放小程序的图片资源文件。

utils目录下存放小程序的工具函数文件，用于封装一些常用的功能函数，如请求函数、验证函数等。

是小程序的项目配置文件，包括小程序的依赖库、开发者工具版本等。

是小程序的项目说明文件，包括小程序的介绍、使用方法、常见问题等。

微信小程序中，Page构造器和Component构造器都是用来创建页面或组件的工具，但是它们的使用方式和作用有所不同。

Page构造器用来创建页面，它是一个对象，用于定义页面的初始数据、生命周期函数、事件处理函数等。每个小程序页面都必须至少包含一个Page构造器。通过Page构造器可以创建一个新页面，也可以重用一个已有的页面，从而实现页面的复用。

Component构造器则用来创建组件，它也是一个对象，用于定义组件的属性、数据、方法和生命周期函数。组件是小程序中的一个重要概念，它可以被多个页面引用和复用。与Paget不同，Component本身并不具有生命周期，它的生命周期由引用它的页面或组件决定。Component构造器的主要区别是：方法需要放在methods:{}里面。

Component代码示例：

Component({data:{text:"Thisispagedata."},methods:{onLoad:function(options){//页面创建时执行},onPullDownRefresh:function(){//下拉刷新时执行},//事件响应函数viewTap:function(){//}}})

下面我将通过一个简单的示例来看一下。

首先，我们可以使用Component构造器来创建这个组件，代码如下：

//="onInput"/custom-input//="input-container"inputbindinput="onInput"placeholder="请输入内容"/inputbuttonbindtap="onTap"显示内容/button/view//({methods:{onInput(event){({value:})},onTap(){('show',{value:})}}})

接下来，我们可以在一个页面中使用这个组件，代码如下：

//:show="onShow"/custom-input//({data:{inputValue:''},methods:{onShow(event){({inputValue:})}}})

在这个示例中，我们使用Page构造器创建了一个名为index的页面。该页面引用了custom-input组件，并监听了它的show事件。当该事件触发时，将输入框的值保存在页面数据中。

可以看到，Page构造器用于创建页面，可以在页面中引用和使用自定义组件。而Component构造器用于创建组件，可以在多个页面中复用。这是两者的主要区别。

微信小程序有两种生命周期，一种是应用生命周期，另一种是页面生命周期。

应用生命周期指的是整个小程序从打开到关闭的过程中的生命周期，包括小程序的启动、进入前台/后台、退出等事件。小程序的应用生命周期包括以下事件：

onLaunch：小程序初始化时触发，只会触发一次。

onShow：小程序启动或从后台进入前台时触发。

onHide：小程序从前台进入后台时触发。

onError：小程序发生脚本错误或API调用失败时触发。

页面生命周期指的是小程序中每个页面的生命周期，包括页面的创建、显示、隐藏和销毁等事件。每个页面都有自己的生命周期函数，可以在这些函数中执行相应的操作。下图说明了页面Page实例的生命周期。

以下是小程序页面生命周期函数的执行顺序：

onLoad：页面加载时触发，只会触发一次。

onShow：页面显示时触发，每次打开页面都会触发。

onReady：页面初次渲染完成时触发，只会触发一次。

onHide：页面隐藏时触发。

onUnload：页面卸载时触发。

除了上述五个生命周期函数外，还有一些其他的生命周期函数，例如：

onPullDownRefresh：下拉刷新时触发。

onReachBottom：上拉触底时触发。

onPageScroll：页面滚动时触发。

微信小程序的页面路由是指在小程序中切换页面的过程。小程序中有两种方式可以进行页面路由：

小程序中可以使用navigator标签实现声明式导航，类似于HTML中的超链接。通过设置url属性，可以指定要跳转的页面路径，例如：

也可以通过open-type属性指定跳转类型，例如：

navigateTo：普通跳转，关闭当前页面打开新页面。

redirectTo：重定向，关闭当前页面并跳转到新页面。

switchTab：跳转到tabBar页面，只能跳转到带有tabBar的页面。

reLaunch：关闭所有页面并跳转到新页面。

navigateBack：用户按左上角返回按钮。

注意事项

navigateTo,redirectTo只能打开非tabBar页面。

switchTab只能打开tabBar页面。

reLaunch可以打开任意页面。

页面底部的tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。

小程序中也可以使用编程式导航进行页面路由，通过调用()、()、()、()等API实现。例如：

({url:'/pages/index/index'})

{"pages":["pages/index/index","pages/about/about","pages/contact/contact"]}

小程序中还可以通过getCurrentPages()API获取当前所有页面栈，通过getCurrentRoute()API获取当前页面路径，以及通过onRouteChange生命周期函数监听页面路由变化事件。

constpages=getCurrentPages()constcurrentRoute=getCurrentRoute()(function(route){('当前路由变化为：',route)})

微信小程序有许多事件可以触发，以下是一些常见的事件：

Page事件：包括页面加载、页面显示、页面隐藏等事件；

Form事件：包括表单提交事件、表单重置事件等；

Audio事件：包括音频播放事件、音频暂停事件等；

交互事件：包括模态框显示事件、动画结束事件等。

以上只是微信小程序事件的一部分，开发者还可以自定义事件，实现更多复杂的交互逻辑。

下面我用一个简单的微信小程序示例来讲解事件处理。

1、在WXML文件中添加一个按钮元素：

这里我们使用了button元素来创建一个按钮，它有一个bindtap属性，用来绑定tap事件，并调用showModal函数来处理事件。

2、在JS文件中添加showModal函数：

Page({showModal:function(){({title:'提示',content:'Hello,world!'})}})

这里我们使用了函数来创建一个提示框，它有两个参数：title和content，分别用来设置提示框的标题和内容。在showModal函数中，我们直接调用了函数，并传入了相应的参数。