微信小程序

1. 什么是微信小程序

微信小程序，小程序的一种,英文名 Wechat Mini Program，是一种不需要下载安装即可使用的应用

2. 微信小程序的特点

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

3. 小程序语法

3.1 小程序中的四层结构

js / 页面逻辑
wxml / 页面结构
json / 页面配置
wxss / 页面样式

3.2小程序配置文件

• 全局配置
  Pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的.json, .js, .wxml, .wxss 四个文件进行处理。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab栏的表现，以及 tab 切换时显示的对应页面。list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab按数组的顺序排序，每个项都是一个对象

具体详情可查阅官网:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• 页面配置

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

• sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有
sitemap.json ，则默认为所有页面都允许被索引；

加粗样式****加粗样式

3.3小程序中的模板语法

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

• 数据绑定

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

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello World!'
  }
})

• 列表渲染

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

1. wx:for="{{数组或者对象}}" wx:for-item=“循环项名称” wx:for-index=“循环项索引”;
2. wx:key=“唯一的值” 用来提高列表渲染的性能
   2.1 wx:key 绑定一个普通的字符串的时候,name这个字符串名称 肯定是 循环数组中的 对象 唯一属性
   2.2 *wx:key ="this" 就表示 你的数组是一个普通的数组 *this 表示是 循环项 [1,2,3,4,5] [‘1’,‘2’,‘3’,‘4’,‘5’]
3. 当出现数组的嵌套循环的时候 尤其要注意 一下绑定的名称 不要重名 wx:for-item=“item” wx:for-index=“index”
4. 默认情况下 我们 不下 wx:for-item=“item” wx:for-index=“index” 小程序也会把 循环项的名称 和索引的名称 item 和 index 只有一层循环的话 ( wx:for-item=“item”
   wx:for-index=“index”) 可以省略

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
      //列表渲染
    array:[
      {message:'🍎'},
      {message:'🍊'},
      {message:'🍉'}
    ],
  }
})

<!-- 列表循环渲染 -->
<view wx:for="{{array}}" wx:key="message">
  {{index}}:{{item.message}}
</view>

<!--使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名-->
<!-- 修改 index和item -->
<view wx:for="{{array}}" wx:for-index="x" wx:for-item="i" wx:key="message">
{{x}}:{{i.message}}
</view>

Page({
  data: {
      //列表渲染
    array:[
      {message:'🍎'},
      {message:'🍊'},
      {message:'🍉'}
    ],
  }
})

<!-- 实现一个空标签 -->
<!--类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块-->
<block wx:for="{{[1,2,3]}}" wx:key="message">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>

<!-- 九九乘法表 -->
<!-- <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:key="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j" wx:key="j">
<view wx:if="{{i<=j}}">
  {{i}}x{{j}}={{i*j}}
</view>
  </view>
</view> -->

• 条件渲染
  在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True</view>
Page({
  data: {
   condition:true,
  }
})

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length>5}}">1</view>
<view wx:elif="{{length>2}}">2</view>
<view wx:else>3</view>
Page({
  data: {
 length:5,
  }
})

block wx:if

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

注意： <block/ > 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

具体详情可到官网查阅:
https://developers.weixin.qq.com/miniprogram/dev/framework/