微信小程序

初步认识小程序

1.什么是微信小程序
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”，的梦想，用户扫一扫或者搜一下即可打开应用

2.微信小程序特点
无需安装和卸载
制作成本低
内存小，运行快，操作便利快捷
容易部署，具有丰富的延展性

小程序语法

1.小程序中的四种结构
.js 逻辑文件 .wxml 页面结构 .json页面配置 .wxss页面样式表
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

2.小程序中的配置文件
1. 全局配置
小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径，窗口表现，设置网络超时时间，设置多tab等
**Pages:**用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息

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

**tabBar:**如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象


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

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

4.小程序中的模板语法

1. 数据绑定
wxml中的动态数据均来自对应的Page 的 data
简单绑定的数据绑定使用Mustache语法（双大括号）将变量包起来
组件属性，控制属性：需要在双引号之内

wsml 文件
<!-- 普通表达式 -->
<view>
{{ msg }}
</view>
<!-- 字符串 -->
<view>{{ '字符串' }}</view>
<!-- 三目表达式 -->
<view>
 {{ !bool ? '真的':'假的'}}
</view>
<!-- 算术表达式 -->
<view>
{{ 1 + 1 + 2}}
<text>{{text}}</text>
{{ num1 + num2}} + {{num3}} + nmu4
</view>
<!-- 组件属性绑定 -->
<view id='item-{{id}}'>
item-{{ id }}
</view>
<!-- 控制属性 wx:if="{{condition}}" 属性值要使用{{}}
   不然会被解析成字符串
-->
<view wx:if="{{ condition}}">
 显示
</view>

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

<!-- 列表渲染
默认的下标为index  值为item  wx:key 为唯一标识
-->
<view wx:for="{{array}}" wx:key='item'>
{{index}} : {{item}}
</view>
<!-- 修改属性别名 -->
<view wx:for="{{obj}}" wx:for-index='i' wx:for-item='v' wx:key='msg'>
 {{i}} : {{v.msg}}
</view>
<!-- 空标签生成循环 -->
<block wx:for="{{array}}" wx:key='item'>
{{item}}
</block>
<!-- 关键字 *this 代表自身 -->
<view wx:for="{{array}}" wx:key='*this'>
{{item}}
</view>
<!-- 注意点  1.不带花括号  2.多一个空格 -->
<!-- <view wx:for="array" wx:key='*this'>{{item}}</view>
<view wx:for="{{array}} " wx:key='*this'>{{item}}</view> -->

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符
作用：给循环生成的元素添加key属性，做唯一值标记，提高性能

wx:key 的值以两种形式提供
1.代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

*this的作用：保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

3. 条件渲染

<!-- 条件渲染 
wx:if
wx:elif
wx:else
wx:if 创建与销毁元素 与 hidden 对本身添加display:none
-->
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length < 5}}">2</view>
<view wx:else>3</view>
<view wx:if="condition">wx:if</view>
<view hidden="condition">hidden</view>

<!-- 练习 -->
<view wx:if="{{islogin}}">
<view wx:for="{{block}}" wx:key='*this'>{{item}}</view>
</view>
<view wx:else>您未登录</view>

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

js文件
Page({

 /**
  * 页面的初始数据
  */
 data: {
   msg:'江湖小卖部',
   bool:false,
   id:5,
   condition:true,
   num1:1,
   num2:2,
   num3:3,
   text:'\n',
   array:['☀','🌙','⭐'],
   obj:[{
       msg:'苹果'
     },
     {msg:'香蕉'}
   ],
   length:2,
   islogin:true,
   block:['React由浅入深📕','Vue由浅入深📕']
 },