#微信小程序学习打卡#First day

一、 关于JSON

JSON是一种数据格式，并非编程语言，在小程序中，JSON为静态配置
1.1 语法
JSON文件包裹在{}中，格式：key-value
“名称”+：+“值”   注意：一定要给key值加双引号

1.2 JSON值只能包含以下几种数据格式：

(1)数字，包含浮点数和整数

(2)字符串，需要包裹在双引号中

(3)Bool值，true，false

(4)数组，包裹在方括号中[]

(5)对象，包裹在大括号中{}

(6)Null

**JSON文件中无法使用注释

二、wxml文件

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

在app.json文件下添加“pages/wxml/index”保存文件，找到pages/wxml/index.wxml文件修改

2.1  wxml基本语法

不带任何逻辑功能的wxml基本语法如下：

<!-- 在此写注释 -->

<标签名 属性名1 = “属性值” 属性名2 = “属性值2”  ...  > ...<标签名>

 与HTML类似，不同的是，WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

wxml属性大小写敏感。

2.2 数据绑定

WXML通过{{变量名}}来绑定WXML文件和对应javascript文件中的data对象属性。

属性值也可动态的改变，{{}}属性值需要包裹在“ ”中

2.3 逻辑语法

{{ }}内可进行逻辑运算，字符串拼接，数字，字符串，数组

2.3.1 条件逻辑：

使用wx:if="{{变量名}}"来判断渲染

<view wx:if="{{condition}}"> True </view>

使用wx:elif和wx:else添加else块

<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>
wx:if为控制属性，需将其添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">

  <view> view1 </view>

  <view> view2 </view>

</block>
2.3.2 列表渲染
在组件上用wx：for控制属性绑定一个数组，可使数组中的各项数据重复地去渲染同一个组件，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<!-- array 是一个数组 --> 

<view wx:for="{{array}}">

  {{index}}: {{item.message}}

</view>

<!-- 对应的脚本文件

Page({

  data: {

    array: [{

      message: 'foo',

    }, {

      message: 'bar'

    }]

  }

})