一、概述

微信小程序是一种快速构建运用的平台，其根底语法首要包含以下几个方面：

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

  • WXSS：微信小程序的款式言语，相似于 CSS，用于描绘页面款式。

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

  • JSON：微信小程序的装备文件，用于装备小程序的大局装备、页面装备等信息。

在微信小程序中，能够经过在 WXML 中运用标签和特色，设置页面的结构和款式；在 JS 中编写逻辑和事情处理函数，完结页面的交互和动态作用；在 JSON 中装备小程序的大局信息和页面的装备信息，如页面途径、标题栏色彩等。一起，微信小程序也供给了一些内置组件和 API，能够方便地完结各种功用和作用，如音频、视频、地图、扫码等。

【小程序】微信小程序基础语法讲解（一）

二、小程序代码组成

​小程序由装备代码JSON文件、模板代码 WXML 文件、款式代码 WXSS文件以及逻辑代码 JavaScript文件组成。

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

  • JSON（JavaScript Object Notation） 装备：JSON 是一种数据格局，并不是编程言语，在小程序中，JSON扮演的静态装备的人物。

  • WXML（WeiXin Markup Language）模板：相似于HTML的符号言语，用于描绘小程序的结构层次。

  • WXSS（WeiXin Style Sheets）款式：相似于CSS的款式表言语，用于设置小程序的款式和布局。

  • JS（JavaScript）逻辑交互：用于完结小程序的逻辑和交互作用。

以上三个部分别离对应小程序的结构层、款式层和行为层，它们共同组成了小程序的全体代码。此外，小程序还能够运用JSON文件来装备一些大局信息，如窗口标题、页面途径等。

1）JSON 装备

JSON（JavaScript Object Notation）是一种轻量级的数据交换格局，具有易于理解、读写和解析等特色，广泛运用于Web运用、移动运用等范畴。在小程序中，JSON被用于装备小程序的各种特色和信息。

小程序的 JSON 装备包含两部分：

  • app.json 和页面的装备文件。其间，app.json 是小程序的大局装备文件，用于装备小程序的窗口特色、底部导航栏特色、页面途径等信息。
  • 页面的装备文件包含 .json、.wxml、.wxss、.js 四个文件，用于装备页面的数据、结构、款式和行为等信息。

JSON 装备的作用首要有以下几个方面：

  1. 装备小程序的根本信息：小程序的标题、窗口大小、导航栏款式等。
  2. 装备页面的途径和导航栏信息：在 app.json 文件中装备小程序的页面途径，能够经过导航栏进行页面的跳转。
  3. 装备底部导航栏：能够经过 tabBar 特色来装备小程序的底部导航栏，使得用户能够快速切换页面。
  4. 装备页面的数据和结构：在页面的 .json 和 .wxml 文件中装备页面的数据和结构信息，包含页面的标题、背景色、布局等。
  5. 装备页面的款式和行为：在页面的 .wxss 和 .js 文件中装备页面的款式和行为信息，包含页面的字体、色彩、动画等。

经过装备小程序的 JSON 文件，开发者能够操控小程序的外观和行为，然后提高小程序的用户体会。

让咱们来看一个小程序的 JSON 装备示例：

{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "images/about.png",
        "selectedIconPath": "images/about-active.png"
      }
    ]
  }
}

在这个示例中，咱们界说了小程序的三个部分的装备信息：

  • "pages"：界说了小程序的页面途径，能够在其间指定小程序的各个页面。

  • "window"：界说了小程序的窗口特色，能够在其间设置小程序的标题、导航栏背景色等。

  • "tabBar"：界说了小程序的底部导航栏特色，能够在其间设置底部导航栏的色彩、选中色彩等，以及每个导航栏的文字、图标等。

以上三个部分的装备信息都是以JSON格局出现的，小程序能够经过读取这些装备文件，来确认小程序的结构、款式和行为等方面的信息。

2）WXML 模板

WXML（WeiXin Markup Language）是一种相似HTML的符号言语，是小程序开发中的一部分。它用于描绘小程序的结构和组件，能够像HTML一样编写静态页面。

  • WXML 模板由一系列的标签和特色组成，用于描绘小程序页面的结构和内容。与HTML相似，WXML 也是一种层次化结构，标签能够嵌套，构成父子联系。在WXML中，每一个标签都有一个对应的特色，用于操控标签的显现和行为。

  • 与HTML不同的是，WXML的标签和特色称号与HTML略有不同，一起WXML也供给了一些专门的组件，用于描绘小程序的特别功用，如导航栏、下拉改写等。

WXML模板的长处在于：

  • 简练：WXML运用了相似HTML的语法，使得开发者能够用更少的代码完结页面的作用。

  • 专门为小程序设计：WXML供给了许多专门为小程序设计的标签和组件，能够方便地完结小程序的各种功用。

  • 与JS交互方便：WXML能够经过绑定数据、事情等办法与JS交互，使得页面的数据和行为能够方便地操控。

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

经过WXML模板，开发者能够轻松创立小程序的页面结构和布局，并完结小程序的各种功用和交互作用。

1、WXML 模板常用标签

  • <view>：视图容器，相似于 HTML 中的 <div> 标签。

  • <text>：文本容器，用于显现文本内容。

  • <image>：图片容器，用于显现图片。

  • <block>：块级容器，能够代替 <view> 运用，可是不会在页面中生成额定的节点。

  • <swiper>：滑块视图容器，用于展现轮播图等内容。

  • <scroll-view>：可翻滚视图容器，用于展现大量数据时，能够翻滚查看。

  • <icon>：图标容器，用于显现小图标。

  • <button>：按钮容器，用于完结用户交互。

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

  • <checkbox>：复选框容器，用于挑选多个选项。

  • <radio>：单选框容器，用于挑选一个选项。

  • <picker>：挑选器容器，用于从预设的选项中挑选一个或多个选项。

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

  • <navigator>：导航容器，用于完结页面跳转。

以上是 WXML 模板中常用的标签，当然还有其他的标签和特色，能够依据详细需求进行挑选运用。

2、view 标签与 block 标签的差异

在 WXML 模板中，<view> 和 <block> 都是容器标签，用于包裹其他组件或元素，可是它们在烘托和表现上有一些差异：

  • 烘托差异：<view> 在烘托时会被转换为 div 标签，而 <block> 则不会被转换，它仅仅一个朴实的容器标签，不会在页面中生成额定的节点。

  • 款式差异：<view> 和 <block> 的款式类别都是块级元素，可是在一些情况下它们的默认款式或许不同。比方，<view> 默认有一些边距和内边距，而 <block> 则没有，这或许会影响布局作用。

  • 运用场景：<view> 和 <block> 在运用场景上也有一些差异，<view> 更适合用于布局容器，比方页面的首要结构、列表的项等；而 <block> 更适合用于暂时包裹一些元素，比方在一个条件判别中，将一些元素作为一个全体进行包裹等。

综上所述，<view> 和 <block> 都是容器标签，具有相似的功用，可是它们在烘托、款式和运用场景上或许有一些差异，开发者能够依据详细需求进行挑选和运用。

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

<!-- index.wxml -->
<view class="container">
  <view class="title">Hello World!</view>
  <image src="../../images/avatar.png" class="avatar"></image>
  <view class="description">This is a demo for WXML template.</view>
  <button class="button" bindtap="onTap">Click Me</button>
</view>

在这个示例中，<view> 标签表明一个视图容器，能够嵌套其他标签。<image> 标签表明一个图片标签，用于显现图片。<button> 标签表明一个按钮，用于触发事情。

  • 在 WXML 中，每个标签都能够有一些特色，用于操控标签的显现和行为。比方，class 特色用于指定标签的款式类，src 特色用于指定图片的 URL，bindtap 特色用于指定按钮的点击事情。

  • 这个示例中的 onTap 是一个在 JavaScript 文件中界说的函数，用于处理按钮点击事情。经过在 WXML 中绑定事情，开发者能够轻松地完结小程序的交互作用。

  • WXML 的语法与 HTML 相似，可是也有一些差异。在 WXML 中，不能运用 HTML 的标签和特色，而是要运用小程序供给的标签和特色。一起，WXML也支撑一些特别的语法，如 {{ }} 双大括号表明数据绑定、wx:if 条件烘托、wx:for 列表烘托等，能够方便地完结杂乱的页面作用。

3、条件操控

1、wx:if 条件操控

WXML 模板中，能够运用 wx:if 条件烘托标签，完结依据条件显现不同内容的作用。下面是一个 WXML 模板条件示例：

<!-- index.wxml -->
<view class="container">
  <view wx:if="{{isShow}}" class="title">Hello World!</view>
  <view wx:if="{{!isShow}}" class="title">Goodbye World!</view>
  <button class="button" bindtap="onToggle">Toggle</button>
</view>

在这个示例中，咱们界说了一个 isShow 数据项，用于操控显现不同的标题。在 WXML 中，咱们运用 wx:if 条件烘托标签，依据 isShow 的值来判别显现哪个标题。

在 JavaScript 文件中，咱们界说了一个 onToggle 函数，用于切换 isShow 的值。当用户点击按钮时，isShow 的值会产生改变，然后完结标题的切换作用。

// index.js
Page({
  data: {
    isShow: true
  },
  onToggle: function() {
    this.setData({
      isShow: !this.data.isShow
    })
  }
})

在 JavaScript 文件中，咱们运用 setData 函数来更新 isShow 的值，然后触发模板的从头烘托。

经过运用 wx:if 条件烘托标签，咱们能够方便地完结依据条件显现不同内容的作用，然后增强小程序的交互性和可用性。

2、wx:if/else 条件操控

WXML 模板中，除了运用 wx:if 条件烘托标签，还能够运用 wx:else 标签来完结条件判别的 else 分支。下面是一个 WXML 模板条件 if/else 示例：

<!-- index.wxml -->
<view class="container">
  <view class="title">Welcome to My Page!</view>
  <view wx:if="{{isVIP}}" class="subtitle">VIP User</view>
  <view wx:else class="subtitle">Normal User</view>
</view>
<!--elif-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

在这个示例中，咱们界说了一个 isVIP 数据项，用于操控显现不同的用户类型。在 WXML 中，咱们运用 wx:if 和 wx:else 标签，依据 isVIP 的值来判别显现不同的用户类型。

在 JavaScript 文件中，咱们界说了一个 onLoad 函数，用于初始化 isVIP 数据项。

// index.js
Page({
  data: {
    isVIP: true
  },
  onLoad: function () {
  }
})

在 JavaScript 文件中，咱们能够运用各种办法来初始化数据项，例如从服务器获取数据、从本地缓存获取数据、从用户输入获取数据等等。

经过运用 wx:if 和 wx:else 标签，咱们能够方便地完结条件判别的 else 分支，然后增强小程序的可用性和交互性。

3、wx:for 循环

WXML 模板中，能够运用 wx:for 列表烘托标签，完结依据数据循环烘托列表的作用。下面是一个 WXML 模板循环示例：

<!-- index.wxml -->
<view class="container">
  <view class="title">List:</view>
  <view wx:for="{{list}}" wx:key="id" class="item">{{item.name}}</view>
</view>

在这个示例中，咱们界说了一个 list 数据项，它是一个数组，包含了一些目标。在 WXML 中，咱们运用 wx:for 列表烘托标签，遍历 list 数组中的每个目标，然后依据目标的特色烘托列表项。

在 JavaScript 文件中，咱们界说了一个 onLoad 函数，用于初始化 list 数据项。

// index.js
Page({
  data: {
    list: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  },
  onLoad: function () {
  }
})

在 JavaScript 文件中，咱们能够运用各种办法来初始化数据项，例如从服务器获取数据、从本地缓存获取数据、从用户输入获取数据等等。

经过运用 wx:for 列表烘托标签，咱们能够方便地完结依据数据循环烘托列表的作用，然后增强小程序的可用性和交互性。

3）WXSS 款式

WXSS（WeiXin Style Sheets）是小程序的款式言语，用于操控小程序界面的外观和布局。它是一种 CSS 扩展言语，具有相似 CSS 的语法，但也有一些自己的特色和限制。

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

挑选器 样例 样例描绘
.class .intro 挑选一切拥有 class=”intro” 的组件
#id #firstname 挑选拥有 id=”firstname” 的组件
element view 挑选一切view 组件
element, element view, checkbox 挑选一切文档的 view 组件和一切的 checkbox 组件
::after view::after 在 view 组件后边刺进内容
::before view::before 在 view 组件前边刺进内容

大局款式与局部款式：

假如您想要在多个页面或组件中运用相同的款式，能够运用小程序供给的大局款式(global style)或公共款式(common style)功用。详细来说，您能够在 app.wxss 中界说大局款式或在一个独立的wxss文件中界说公共款式，然后在页面或组件的款式标签中引证它们。

界说大局款式的办法是在 app.wxss 中界说款式类，这些类能够在整个小程序中运用。例如：

/* app.wxss */
.global-text {
  font-size: 16px;
  color: #333;
}

然后，您能够在任何页面或组件中运用这个款式类：

/* 页面或组件的款式标签 */
<view class="global-text">这是大局款式中界说的文本款式</view>

界说公共款式的办法是在一个独立的wxss文件中界说款式类，然后在页面或组件的款式标签中引证它们。例如：

/* common.wxss */
.common-button {
  background-color: #00c2ff;
  color: #fff;
  padding: 10px 20px;
}
/* 页面或组件的款式标签 */
<view class="common-button">这是公共款式中界说的按钮款式</view>

请注意，假如运用公共款式，您需求在页面或组件中引进该文件。例如，在页面的config目标中设置 usingComponents 字段：

/* 页面的js文件 */
Page({
  config: {
    usingComponents: {
      'common-style': '/path/to/common.wxss'
    }
  }
})

然后在页面或组件的款式标签中运用 @import 句子引进该文件：

/* 页面或组件的款式标签 */
@import 'common-style';
<view class="common-button">这是公共款式中界说的按钮款式</view>

除了支撑 CSS 语法和特性之外，WXSS 还有一些自己的特色和扩展，例如：

  • 支撑尺寸单位 rpx，能够依据屏幕宽度自动缩放；
  • 支撑导入外部款式文件，能够运用 @import 关键字；
  • 支撑款式继承，能够运用 inherit 和 initial 值；
  • 支撑大局款式掩盖，能够运用 !important 关键字。

经过运用 WXSS，咱们能够方便地操控小程序界面的外观和布局，然后完结各种视觉作用和交互作用。

以下是一个根本的WXSS款式示例：

/* 界说款式 */
.page {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 10px;
}
.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}
.subtitle {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.text {
  line-height: 1.5;
  margin-bottom: 10px;
}
.link {
  color: #00c2ff;
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}
/* 运用款式 */
<view class="page">
  <view class="title">这是标题</view>
  <view class="subtitle">这是副标题</view>
  <view class="text">这是文本内容</view>
  <a class="link" href="https://www.example.com">这是链接</a>
</view>

在这个示例中，界说了一些根本款式，如背景色、字体大小、边距和色彩等，并别离给不同的元素运用了不同的款式类。在运用款式时，只需求在对应的元素上增加对应的类名即可。

4）JS（JavaScript）逻辑交互

微信小程序中的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文件

<view>{{message}}</view>
<button bindtap="changeMessage">点击我修改音讯</button>

2、JS文件

Page({
  data: {
    message: 'Hello World'
  },
  changeMessage: function () {
    this.setData({
      message: '你好，国际！'
    })
  }
})

这个示例中，咱们在WXML中界说了一个 view 元素和一个 button 元素。view 元素用于显现一个音讯，button 元素用于触发一个事情。在JS文件中，咱们界说了一个名为 changeMessage 的事情处理函数，当用户点击按钮时，会触发这个事情处理函数。changeMessage 函数运用 setData 办法来更新 message 数据，将其改为“你好，国际！”。因为 message 数据现已被绑定到view元素中，所以当数据更新后，页面上的音讯也会相应地更新。

在这个示例中，咱们演示了数据绑定、事情绑定和API调用的根本用法。其间，setData办法用于更新页面数据，能够在changeMessage事情处理函数中完结数据更新；bindtap用于绑定点击事情，能够在button元素上运用该特色来绑定事情处理函数。

1、生命周期函数

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

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

  • onShow：当小程序发动或从后台进入前台显现时，会触发onShow函数。在小程序生命周期中，onShow函数或许会被屡次履行。一般用来获取小程序的状态信息。

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

  • onTabItemTap：当用户点击tab栏时，会触发onTabItemTap函数。

  • onPullDownRefresh：当用户下拉改写页面时，会触发onPullDownRefresh函数。

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

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

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

以页面为例，能够在.js文件中界说相应的生命周期函数：

Page({
  // 页面的初始数据
  data: {
    message: 'Hello World!'
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log('页面加载完结')
  },
  // 生命周期函数--监听页面初次烘托完结
  onReady: function () {
    console.log('页面初次烘托完结')
  },
  // 生命周期函数--监听页面显现
  onShow: function () {
    console.log('页面显现')
  },
  // 生命周期函数--监听页面躲藏
  onHide: function () {
    console.log('页面躲藏')
  },
  // 生命周期函数--监听页面卸载
  onUnload: function () {
    console.log('页面卸载')
  },
  // 页面相关事情处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
    console.log('用户下拉改写')
  },
  // 页面上拉触底事情的处理函数
  onReachBottom: function () {
    console.log('页面上拉触底')
  },
  // 用户点击右上角共享
  onShareAppMessage: function () {
    console.log('用户点击共享')
    return {
      title: '小程序共享',
      path: '/pages/index/index'
    }
  }
})

在组件中也能够运用相应的生命周期函数进行装备。需求注意的是，在小程序中，组件的生命周期函数会受到父组件的影响，详细的履行次序会受到组件的嵌套联系的影响。

2、事情函数

在微信小程序中，事情函数是指在小程序中产生事情时所履行的函数，例如用户点击按钮、滑动页面、输入内容等。事情函数能够经过wxss款式表中的bind或catch特色和wxml模板中的event目标来绑定和触发。

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

  • bindtap/catchtap：点击事情函数，当用户点击某个元素时触发。

bindtap和catchtap都是用来绑定点击事情的特色，它们之间的差异在于事情冒泡的处理办法不同。

详细来说：

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

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

  • bindscroll/catchscroll：翻滚事情函数，当用户在页面上滑动时触发。这两者的差异跟上面的差异一样。

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

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

  • bindcancel/catchcancel：表单撤销事情函数，当用户撤销表单时触发。这两者的差异跟上面的差异一样。

除了以上常见的事情函数外，微信小程序还供给了许多其他的事情函数，详细能够参阅微信小程序开发文档。

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

  • 事情函数的称号应该与绑定事情的特色称号一致，以便能够正确地触发事情。

  • 事情函数中能够经过event目标获取事情的相关信息，例如事情类型、触发元素、触发方位等。

  • 事情函数中能够运用this关键字来获取事情的源目标，例如点击事情中的this指向被点击的元素。

  • 在事情函数中能够调用小程序供给的API来完结相应的功用和作用。

需求注意的是，事情函数的触发次序与绑定的先后次序有关，即先绑定的事情函数先履行。一起，在一个元素上绑定多个事情函数时，需求运用 bind 和 catch 来区别冒泡事情和非冒泡事情。

3、双向绑定

微信小程序支撑双向绑定的办法是经过运用 <input>、<textarea> 等表单元素的 value 特色完结的。当用户在表单元素中输入内容时，value 特色会自动更新绑定的数据，反之，当数据更新时，表单元素的值也会随之更新。

以下是一个示例，演示了如安在微信小程序中完结双向绑定：

<!-- 在 wxml 文件中 -->
<view class="container">
  <input type="text" value="{{inputValue}}" bindinput="onInput" />
  <text>输入的内容是：{{inputValue}}</text>
</view>

js 文件

// 在 js 文件中
Page({
  data: {
    inputValue: ''
  },
  onInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  }
})

在这个示例中，<input> 元素的 value 特色与 inputValue 数据进行了双向绑定。当用户在输入框中输入内容时，onInput 办法会被调用，并经过 setData 更新 inputValue 数据的值。这个进程中，value 特色会自动更新，以反映 inputValue 数据的当时值。一起，在页面中也会展现出用户输入的内容。

三、目录结构

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

├── app.js             // 小程序逻辑
├── app.json           // 小程序公共装备
├── app.wxss           // 小程序公共款式
├── pages              // 页面目录
│   ├── index          // index页面目录
│   │   ├── index.js   // index页面逻辑
│   │   ├── index.wxml // index页面结构
│   │   └── index.wxss // index页面款式
│   └── ...
├── components         // 组件目录
│   ├── my-component   // my-component组件目录
│   │   ├── my-component.js     // my-component组件逻辑
│   │   ├── my-component.wxml   // my-component组件结构
│   │   └── my-component.wxss   // my-component组件款式
│   └── ...
├── images             // 图片目录
├── utils              // 东西目录
├── package.json       // 项目装备文件
└── README.md          // 项目阐明文件

其间阐明：

  • app.js 是小程序的大局逻辑文件，包含小程序的生命周期函数等。
  • app.json 是小程序的公共装备文件，包含小程序的页面途径、窗口装备、大局款式等。
  • app.wxss 是小程序的公共款式文件，包含大局款式和公共组件款式等。
  • pages 目录下寄存小程序的页面文件，每个页面文件包含对应的js、wxml和wxss文件。
  • components 目录下寄存小程序的组件文件，每个组件文件包含对应的js、wxml和wxss文件。
  • images 目录下寄存小程序的图片资源文件。
  • utils 目录下寄存小程序的东西函数文件，用于封装一些常用的功用函数，如恳求函数、验证函数等。
  • package.json 是小程序的项目装备文件，包含小程序的依靠库、开发者东西版本等。
  • README.md 是小程序的项目阐明文件，包含小程序的介绍、运用办法、常见问题等。

四、Page 结构器和 Component 结构器的差异

根底库 1.6.3 开始支撑，低版本需做兼容处理。

微信小程序中，Page 结构器和 Component 结构器都是用来创立页面或组件的东西，可是它们的运用办法和作用有所不同。

  • Page 结构器用来创立页面，它是一个目标，用于界说页面的初始数据、生命周期函数、事情处理函数等。每个小程序页面都必须至少包含一个 Page 结构器。经过 Page 结构器能够创立一个新页面，也能够重用一个已有的页面，然后完结页面的复用。

  • Component 结构器则用来创立组件，它也是一个目标，用于界说组件的特色、数据、办法和生命周期函数。组件是小程序中的一个重要概念，它能够被多个页面引证和复用。与Paget 不同，Component 本身并不具有生命周期，它的生命周期由引证它的页面或组件决议。 Component 结构器的首要差异是：办法需求放在 methods: { } 里面。

Component 代码示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创立时履行
    },
    onPullDownRefresh: function() {
      // 下拉改写时履行
    },
    // 事情响应函数
    viewTap: function() {
      // ...
    }
  }
})

下面我将经过一个简略的示例来看一下。

假定咱们要创立一个包含一个输入框和一个按钮的组件，当点击按钮时，将输入框中的内容显现在页面上。

首要，咱们能够运用 Component 结构器来创立这个组件，代码如下：

// index.wxml
<custom-input bindinput="onInput"></custom-input>
// custom-input.wxml
<view class="input-container">
  <input bindinput="onInput" placeholder="请输入内容"></input>
  <button bindtap="onTap">显现内容</button>
</view>
// custom-input.js
Component({
  methods: {
    onInput(event) {
      this.setData({ value: event.detail.value })
    },
    onTap() {
      this.triggerEvent('show', { value: this.data.value })
    }
  }
})

在这个示例中，咱们运用 Component 结构器创立了一个名为 custom-input 的组件。该组件包含一个输入框和一个按钮，当输入框内容产生改变时，将会触发 onInput 办法，将输入框的值保存在组件数据中。当按钮被点击时，将会触发 onTap 办法，经过 triggerEvent 办法触发自界说事情 show，并将输入框的值作为参数传递给该事情。

接下来，咱们能够在一个页面中运用这个组件，代码如下：

// index.wxml
<custom-input bind:show="onShow"></custom-input>
// index.js
Page({
  data: {
    inputValue: ''
  },
  methods: {
    onShow(event) {
      this.setData({ inputValue: event.detail.value })
    }
  }
})

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

能够看到，Page 结构器用于创立页面，能够在页面中引证和运用自界说组件。而 Component 结构器用于创立组件，能够在多个页面中复用。这是两者的首要差异。

总的来说，Page 结构器和 Component 结构器都是用来创立小程序中的不同类型的目标，它们的作用和运用办法略有不同。Page 结构器用来创立页面，而Component 结构器用来创立组件。

五、小程序的生命周期

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

1）运用生命周期

运用生命周期指的是整个小程序从翻开到封闭的进程中的生命周期，包含小程序的发动、进入前台/后台、退出等事情。小程序的运用生命周期包含以下事情：

  • onLaunch：小程序初始化时触发，只会触发一次。
  • onShow：小程序发动或从后台进入前台时触发。
  • onHide：小程序从前台进入后台时触发。
  • onError：小程序产生脚本错误或 API 调用失利时触发。

2）页面生命周期

页面生命周期指的是小程序中每个页面的生命周期，包含页面的创立、显现、躲藏和销毁等事情。每个页面都有自己的生命周期函数，能够在这些函数中履行相应的操作。下图阐明了页面 Page 实例的生命周期。

【小程序】微信小程序基础语法讲解（一）
以下是小程序页面生命周期函数的履行次序：

  • onLoad：页面加载时触发，只会触发一次。
  • onShow：页面显现时触发，每次翻开页面都会触发。
  • onReady：页面初次烘托完结时触发，只会触发一次。
  • onHide：页面躲藏时触发。
  • onUnload：页面卸载时触发。

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

  • onPullDownRefresh：下拉改写时触发。
  • onReachBottom：上拉触底时触发。
  • onShareAppMessage：点击共享按钮时触发。
  • onPageScroll：页面翻滚时触发。

需求注意的是，不同的页面或许具有不同的生命周期，详细的生命周期函数触发次序和触发次数也会因页面类型的不同而不同。

六、小程序页面路由

微信小程序的页面路由是指在小程序中切换页面的进程。小程序中有两种办法能够进行页面路由：

1） 声明式导航

小程序中能够运用 <navigator> 标签完结声明式导航，相似于 HTML 中的超链接。经过设置 url 特色，能够指定要跳转的页面途径，例如：

<navigator url="/pages/index/index">跳转到主页</navigator>

也能够经过 open-type 特色指定跳转类型，例如：

  • navigateTo：一般跳转，封闭当时页面翻开新页面。
  • redirectTo：重定向，封闭当时页面并跳转到新页面。
  • switchTab：跳转到 tabBar 页面，只能跳转到带有 tabBar 的页面。
  • reLaunch：封闭一切页面并跳转到新页面。
  • navigateBack：用户按左上角回来按钮。

【小程序】微信小程序基础语法讲解（一）

<navigator url="/pages/index/index" open-type="navigateTo">跳转到主页</navigator>

注意事项

  • navigateTo, redirectTo 只能翻开非 tabBar 页面。
  • switchTab 只能翻开 tabBar 页面。
  • reLaunch 能够翻开恣意页面。
  • 页面底部的 tabBar 由页面决议，即只要是界说为 tabBar 的页面，底部都有 tabBar。
  • 调用页面路由带的参数能够在目标页面的onLoad中获取。

2）编程式导航

小程序中也能够运用编程式导航进行页面路由，经过调用 wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.reLaunch() 等 API 完结。例如：

wx.navigateTo({
  url: '/pages/index/index'
})

【注意】在小程序中运用编程式导航时，需求在 app.json 文件中声明要跳转的页面途径。

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

小程序中还能够经过 getCurrentPages() API 获取当时一切页面栈，经过 getCurrentRoute() API 获取当时页面途径，以及经过 onRouteChange 生命周期函数监听页面路由改变事情。

const pages = getCurrentPages()
const currentRoute = getCurrentRoute()
wx.onRouteChange(function(route) {
  console.log('当时路由改变为：', route)
})

七、小程序事情

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

  • Page事情：包含页面加载、页面显现、页面躲藏等事情；
  • View事情：包含点击事情、长按事情、滑动事情等；
  • Form事情：包含表单提交事情、表单重置事情等；
  • Audio事情：包含音频播放事情、音频暂停事情等；
  • Video事情：包含视频播放事情、视频暂停事情等；
  • NavigationBar事情：包含导航栏按钮点击事情、导航栏高度改变事情等；
  • TabBar事情：包含Tab切换事情、Tab被点击事情等；
  • 交互事情：包含模态框显现事情、动画结束事情等。

以上仅仅微信小程序事情的一部分，开发者还能够自界说事情，完结更多杂乱的交互逻辑。

下面我用一个简略的微信小程序示例来解说事情处理。

假定咱们现在要完结一个功用，在页面上显现一个按钮，点击按钮后弹出一个提示框，提示框上显现一段文本内容。

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

<view>
  <button bindtap="showModal">点击我</button>
</view>

这儿咱们运用了 <button> 元从来创立一个按钮，它有一个 bindtap 特色，用来绑定 tap 事情，并调用 showModal 函数来处理事情。

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

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

这儿咱们运用了 wx.showModal 函数来创立一个提示框，它有两个参数：title 和 content，别离用来设置提示框的标题和内容。在 showModal 函数中，咱们直接调用了 wx.showModal 函数，并传入了相应的参数。

3、在微信开发者东西中预览页面，点击按钮，即可看到弹出的提示框，上面显现着 Hello, world! 这段文本内容。

以上就是一个简略的微信小程序事情处理示例，经过绑定 tap 事情，并调用相应的函数来处理事情，完结了按钮点击后弹出提示框的功用。开发者能够依据自己的需求来编写相应的事情处理函数，完结更杂乱的交互作用。

篇幅有点长，就先到这儿了，剩下的内容会放到下篇文章继续解说，有任何疑问欢迎给我留言哦，也可关注我的公众号【大数据与云原生技术共享】加群沟通或私信沟通~

【小程序】微信小程序基础语法讲解（一）