1.微信小程序的使用和基本介绍

微信小程序： mvvm+底层
用途： 微信公众号，微信订阅号，微信小游戏
编辑器：微信开发者工具。
步骤：准备 -> 开发 -> 审核 -> 交钱 -> 发布

一.开发前准备

1.申请微信公众号平台账号
https://mp.weixin.qq.com

2.添加开发者+项目组成员
管理 -> 成员管理

3.获取小程序id
通过小程序id创建项目
开发 -> 开发设置 -> 开发者id

4.安装微信开发者工具
文档 -> 工具 -> 微信开发者工具

5.登陆
选择的目录必须为空文件夹，demo01

二.目录结构组成

wxml：
基于html -> 更加类似于element-ui
封装了常用的html标签

wxss：
基于css
1.增加了相对单位rpx
2.只支持css中一部分常用选择器

js：
基于js：mvvm思想
只关心逻辑层

json(项目配置)：

• 全局配置：
  • app.json(根组件配置): pages,window
    project.config.json：es6, node_modeuls
• 局部配置:
  • 子页面配置会自动覆盖全局页面配置

三.创建页面

home：
home.wxml
home.wxss：
home.js
home.json
子文件内的文件名称必须和文件夹名称一致（添加页面路径后会自动生成同名文件夹和子文件）。
在app.json文件内配置pages，默认第一个pages为首页

四.逻辑层和视图层

1.数据绑定

基本数据绑定：
js：设置data，初始化数据。
html: 用{{}}引用。

双向数据绑定:
基础库版本在2.8.3之后都可以使用双向数据绑定。
model:value="{{msg}}"

2.列表渲染

wx:for="{{arr}}"//默认情况下，每一个数组元素名称为item，下标index
wx:for-item=“it”//给数组项起名字
wx:for-index=“in”//给数组下标起名字
wx:key=""

3.条件渲染
wx:if
wx:elif
wx:else
block: 承载子元素，但是不被编译（类似template）

4.事件绑定

bindxxx:
xxx:type
支持事件冒泡
小程序没有浏览器，不支持bom事件类型；没有鼠标，不支持鼠标点击事件

catchxxx：
不支持事件冒泡

5.组件

单标签要在开始标签中进行关闭，或者添加一个结束标签

<input/>
<input></input>