目录
一、简介
1.微信小程序与APP的区别
2.微信小程序的开发
二、小程序开发介绍
1.pages
js文件
json文件
wxml文件
wxss文件
2.app.js
3.app.json
4.app.wxss
5.json文件
三、微信小程序的配置
1.全局配置
2.局部配置
四、新建页面路由
1.新建文件夹
2.新建page文件
3.创建路由
五、钩子函数
1.onload：监听页面加载
2.onready：监听页面初次渲染完成
3.onshow：监听页面显示
4.onhide：监听页面隐藏
5.onunload：监听页面卸载
六、页面元素介绍
1.view标签
2.image标签
七、双向绑定
1.单项绑定
2.双向绑定
八、for事件的引用
1.基础用法
2.对元素内容和索引重命名
九、点击事件
一、简介
微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
1.微信小程序与APP的区别
APP区别于IOS和Android系统但是微信小程序不在区别于系统，对于开发者来说，这是比较节省资金，对于用户来说，也不需要下载，做到了让用户即用即走。
2.微信小程序的开发
微信小程序的开发相对于pc端以及APP端比较简单，也更有利于用户的使用
二、小程序开发介绍
1.pages
pages里面包含的文件夹为用户所需要用到的界面，包括js文件，json文件，wxml文件以及wxss文件，其中：
js文件
js文件是对于页面元素进行的操作，包括页面元素的遍历，页面元素的各种事件等等，其用法相当于vue中的javascript操作
json文件
json文件是对于页面进行的配置 ，例如设置表头，或者表头的背景颜色
wxml文件
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxss文件
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
2.app.js
对于页面全局的元素的操作
3.app.json
对于页面全局的配置
4.app.wxss
对于页面元素样式的全局配置
5.json文件
对于微信小程序中的配置信息的详解
三、微信小程序的配置
1.全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
设置tab
tabBar需要写在{}里面，属于全局配置
其中pagePath：为tab的路由
text：为tab的名称
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/index","text": "日志"}]},如果需要对于tab进行图标的添加
需要在text后面添加字段
"iconPath":icon图标的路径设置点击图标之后的变化
"selectedIconPath":icon的路径其页面的实时效果
2.局部配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
以下为基础配置：
{"navigationBarBackgroundColor": "#ffffff", //小程序头部的背景颜色"navigationBarTextStyle": "black", //小程序头部表头的文字颜色"navigationBarTitleText": "微信接口功能演示", //小程序头部的文字}四、新建页面路由
要想新建页面路由，需要新建一个页面，上面说到页面的搭建需要写到pages文件夹里
1.新建文件夹
在pages中新建文件夹，名字为你想要进行页面的名字
2.新建page文件
在新建的文件夹里创建新的page文件，例如index，只需要输入index就可以自动生成四种文件（wxml，wxss，js，json）
3.创建路由
在app.json文件中的pages中的路由路径添加新配置的路由
这样就可以在app.json文件中的tabBar中进行路由跳转
五、钩子函数
1.onload：监听页面加载
onLoad(options) {},2.onready：监听页面初次渲染完成
onReady() {},3.onshow：监听页面显示
onShow() {},4.onhide：监听页面隐藏
onHide() {},5.onunload：监听页面卸载
onUnload() {},这些钩子函数是自动创建在新创的page文件中的js文件下，如果想要对该页面进行全局配置，需要这些钩子函数
六、页面元素介绍
1.view标签
用法：
view标签相当于html中的div盒子标签，可以为view标签进行元素的样式调整，即可以设置class，在wxss文件中进行class类的元素样式调整
2.image标签
如果想要在小程序添加图片需要用到image标签
用法：
src中为图片的相对路径
相对于HTML中的标签，都差不多，但是有几个不一样的，需要我们在小程序开发的时候注意一下
七、双向绑定
1.单项绑定
在 WXML 中，普通的属性的绑定是单向的
<input value="{{value}}" />value中为js文件中data中的值
2.双向绑定
如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。
<input model:value="{{value}}" />八、for事件的引用
1.基础用法
在vue中我们经常使用v-for来遍历列表中的内容，而在微信小程序中我们需要用wx:for来进行遍历列表
用法：
<view wx:for="{{list}}" wx:key="index1" >{{index1}}--{{item}}</view>其用法和vue中的方法一样，需要用{{}}来进行data元素的引用，需要设置key值，但是不同的是，在微信小程序中我们并不需要进行命名，默认元素就是item，默认的元素的索引值为index
2.对元素内容和索引重命名
如果item和index并不是我们需要引用的理想名字，我们也可以对iten和index进行重命名
用法：
<view wx:for="{{list}}" wx:for-index="index1" wx:key="index1">{{index1}}--{{item}}</view>使用wx:for-index="你想定义的index名字" ，wx:for-item="你想定义的item名字"，来进行重命名
九、点击事件
在微信小程序中我们有很多元素会用到点击事件，所以在小程序的基础阶段，点击事件也是我们所必不可缺的阶段
用法：
<view wx:for="{{list}}" wx:for-index="index1" wx:key="index1" bind:tap="handlerTap">{{index1}}--{{item}}</view>使用bind:tap="你想要定义的点击事件的名字"进行点击事件的注册
在js文件中来对于点击事件进行操作
