day01-微信小程序基础

项目结构：

创建完一个新的项目后。会出现以下的目录结构：

• project.config.json：项目的配置文件。比如设置项目的名字，设置appid等。

• app.js：小程序逻辑处理。比如小程序加载完成执行的代码。
• app.json：小程序公共配置。比如小程序的页面，是否有tabbar等。
• app.wxss：小程序公共样式。在这个里面写的样式可以被所有页面使用。
• pages：存储小程序页面的。
• index：页面的名称
• index.js：index页面的逻辑处理文件。
• index.json：index页面的配置文件。
• index.wxml：index页面的页面结构。
• index.wxss：index页面的样式。
• 其他页面
  一个微信小程序就是由以上几个部分组成的。如果熟悉网站前端开发的同学肯定都知道。在前端中存
  在 html 、 css 、 js ，其实就分别对应的是小程序中的 wxml 、 wxss 、 js 文件。其中小程序中的 wxml 中的标签
  和语法，稍微和 html 有点不一样。 wxss 语法采用的都是大部分的 css 语法，并且增加了导入的功能。所以如果你
  对前端比较熟悉，学习微信小程序开发就非常简单了。

WXML语法:

微信官方教程如下：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
特点：

1. 布局的方式跟HTML是一模一样的。
2. 标签的名字不再是传统的HTML的了，而是使用微信自己定义的一套，所以写代码的时候完全使用之前写
   HTML的方式去写，只不过改个标签名就可以了。
3. WXML的语法，和一些模板语法比如Django中的模板语法非常的类似。

变量渲染：

1. 使用双大花括号。
2. 获取对象的值，通过下标获取数组中的值。
3. 可以做运算，比如判断，四则运算等。
4. 总而言之一句话：需要使用js中传过来的值，就必须使用双大花括号。

条件渲染：

1. 在指定的标签中使用 wx:if="条件" ，如果条件成立，则会渲染这个标签。示例代码如下：

进入网吧

2. else 和 elif 可以直接在 if 下面使用。示例代码如下：

出去旅游


去逛街


哪里都不去

注意：elif和else只能跟在if后面，否则会报错

3. 如果需要通过条件来判断是否需要渲染一组标签，那么可以使用 block 。示例代码如下：

出去旅游




去逛街
16




哪里都不去

列表渲染：

1. 通过语法 wx:for="{{列表}}" 来渲染一个列表。示例代码如下：

{{item}}

2. 循环中，默认的下标名称是 index ，默认的值的名称是 item 。如果想要修改循环列表的值和下标的名称，那
   么可以通过 wx:for-index 和 wx:for-item 来指定。示例代码如下：

{{index}}/{{value}}

3. 如果想要在循环中渲染多个标签，那么也可以通过 block 来实现。示例代码如下：

{{index}}
{{item}}

九九乘法表案例：

image.png

wxml文件代码：

{{col}}*{{row}}={{row*col}}

wxssw文件代码：

.row{
display: flex;
justify-content: start;
font-size: 10px;
}
.row .col{
width: 40px;
}

wx:key作用：

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态
（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供：

1. 字符串或者数字，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符
   串或数字，且不能动态改变。在写的时候，直接写这个 property 的名字就可以了，不需要
   写 item.property 的形式，并且不需要加中括号。
2. 保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
   当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，*框架会确保他们被重新排序，而不是重新
   创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
3. 及时列表中的组件没有发生状态改变，那么也建议使用 wx:key 。因为如果不使用，那么以后重新渲染的时
   候，就会把之前组件销毁掉，然后重新创建，性能会很低。
   如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

---

模板：
有些时候，一段布局代码我们需要在多个地方使用，那么我们可以将其定义成模板，然后把变量单独抽取出来，通
过调用模板的时候再传递过去。示例代码如下：

调用模板：