小程序学习笔记（一）

代码组成

小程序由配置文件json，模板文件wxml，样式代码wxss，以及逻辑代码javascript组成

一、JSON配置

小程序中，JSON扮演静态配置角色
在创建的小程序的根目录下，有两个json文件，app.json和project.config.json，在每个pages页面目录下，也有一个json文件，这几个json文件分别是什么功能呢？

app.json

app.json文件是当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部TAB等，配置方式如下

代码片段1-1：

  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

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

工具配置 project.config.json

你在工具上做的任何配置都会写入到project.config.json这个文件中，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

用于对单个页面进行配置，页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项

二、WXML

wxml在小程序中充当html的角色，wxml也由标签和属性构成，但也有不一样的地方
1.小程序中的标签是包装好的标签，如view, button, text ，还提供了地图、视频、音频等等组件能力
2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式，使用方式与vue等MVVM框架相似

模板语法

通过{{}}将变量绑定到界面上： {{text}}
属性也可以动态绑定： hello world

注意：没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中

逻辑语法

{{}}内可以进行简单的逻辑运算
三元运算：{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}
算数运算： {{a + b}} + {{c}} + d
字符串拼接：{{"hello " + name}}
{{ }}中还可以直接放置数字、字符串或者是数组

{{[1,2,3]}}

{{"hello world"}}

条件逻辑

WXML中使用 wx:if="{{condition}}"进行逻辑渲染

 True 

使用wx:elif和wx:else来书写一个else块

 1 
 2 
 3 

列表渲染

在组件上使用wx:for进行列表渲染，默认变量index为数组当前下标，变量item为数组的当前项

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


Page({
  data: {
    list: [{message: 1},{message: 2},{message: 2}]
  }
})

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

{{idx}}:{{name}}

wx:key用来指定列表中项目的唯一标识符，取值可以是以下两种

1.字符串。必须是列表中的某一个属性值，且该属性值在列表中必须是唯一的
2.使用关键字this与item本身进行绑定，这就要求item本身是唯一的数字或字符串

在数据发生改变的时候，绑定了key的组件只会被重新排序，不会被重新渲染，以确保组件保持自身的状态

 {{item}} 

模板

WXML提供模板，可以在模板中定义代码片段，在别处调用