微信小程序基础

微信小程序的概况

微信小程序，小程序的一种,英文名 Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

微信小程序的特点

• 无需安装和卸载
• 制作成本低
• 容易部署，具有丰富的延展性
• 内存小、运行快，操作便利快捷

微信小程序的基本使用

微信小程序语法

一、小程序中的四层结构

1. js - 页面逻辑
2. wxml - 页面结构
3. json - 页面配置
4. wxss - 页面样式表

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

二、小程序中的配置文件

• 全局配置
  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

  
  全局配置

• 页面配置
  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

• sitemap配置
  小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引

小程序中的模板语法

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

1. 数据绑定

WXML 中的动态数据均来自对应 Page 的 data

• 简单绑定
  数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：内容
  

  

• 组件属性-需要在双引号之间

  
  

• 运算
  可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

  • 三元运算

    
    

• 算数运算

  
  

• 逻辑判断

  
  

• 字符串运算

  
  

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

  
  使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名：
  
  block wx:for 实现一个空标签
  类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。
  

wx:key

1. 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
2. wx:key 的值以两种形式提供 字符串，
3. 代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
4. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
5. 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

• 条件渲染

  
  

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