二. 2 语法小总结

小程序代码构成

JSON 配置

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

我们简单说一下这个配置各个项的含义:

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

JSON语法

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []
5. 对象，需要包裹在大括号中 {}
6. Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

wxml模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

JS逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

实用示例

swiper 滑块视图容器

swiper 滑块视图容器——轮播图

<swiper current='{{currentTab}}' bindchange="swiperview">   //今日头条轮播图
      <swiper-item>
       <view class="swiper-view1">社会新闻</view>
       </swiper-item>
        <swiper-item>
       <view class="swiper-view2">国际新闻</view>
      </swiper-item>
      <swiper-item>
       <view class="swiper-view1">国内新闻</view>
    </swiper>

swiper-item 仅可放置在 swiper 中，宽高自动设置为 100%

scroll-view可滚动视图区域

scroll-view——首页可滚动导航栏

最基本两个：

允许横向滚动：

navigator 页面链接

navigator ——页面链接

 <navigator url="" data-navindex='0' bindtap="navnews" 
 class="{{currentTab==0 ? 'color-green':'color-white'}}">社会新闻</navigator>

事件

事件是视图层到逻辑层的通讯方式。可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件的使用方式

• 在组件中绑定一个事件处理函数
  点击该组件，bindtap 会跳转到Page中的事件处理函数
• 在相应的Page 定义中写上相应的事件处理函数

Page({
  tapName: function(event) {
    console.log(event)
  }
})

组件绑定(wxml)——>事件处理函数(js)
事件分类

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
  
  普通事件绑定

用户点击view，调用bindtap的handleTap会被调用

事件对象
当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

数据绑定

数据绑定
WXML 中的动态数据均来自对应JS 文件中 Page 的 data。

使用格式：双大括号将变量包起来。




数据来源
JS 文件中 Page

数据绑定还支持在双括号内进行 三目运算，算数运算，逻辑判断，字符串运算还有数据路径运算

条件渲染和列表渲染

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

·
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名

block wx:for
类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。

this.setData()函数

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

navnews:function(event){
  var navIndex = event.currentTarget.dataset.navindex
  this.setData({
    currentTab :navIndex          //key ：value形式
  })
},

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。