初识微信小程序

一、注册一个微信小程序，在这就不写了，怎么注册在微信公众平台都有介绍的，根据它的提示一步步下去即可。

二、注册号之后，下载一个微信开发者工具，同样可以再微信公众平台上下载。

三、下载之后刚进入微信开发者工具首先刷二维码进入创建一个空的项目

四、创建好之后进入微信开发者工具，这是我之前创建好的一个小程序项目

五、现在我们先来了解一下文件结构

微信小程序中就四大类型的文件

1、. JS —— JavaScrip文件

2、. Json —— 项目配置文件，负责窗口颜色等等

3、 . wxml —— 类似HTML文件

4、. wxss —— 类似CSS文件

在根目录下用app来命名的这四种类型的文件就是程序入口文件。

1、app.json

必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，你只需创建这个文件，里面写个大括号就行，
以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。

2、app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写，
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

3、app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

4、app.wxml

这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

六、可以参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

七、下面我们来做个小例子：实现点击文字变色

1、首先我们打开index.wxml 

将里面代码改成这样

其实主要添加了

• catchtap="click"

一些方法：

catchtap="click" 的含义
catch 代表非冒泡事件
tap 代表点击事件
所以连在一起就是非冒泡点击事件
那后面那个click是啥
click 其实只是个变量名字
我们在index.js需要用这个名字绑定接收事件的函数

我们打开index.js
然后添加如下函数

添加完后代码长这样 红框中就是 添加的这个代码

所以其实点击事件的回调函数 就是 catchtap="click"
中的 click 后面加上 :function() 构成的
现在我们来运行程序试试 然后点击文字

那如何让一个文字变色呢，当然是css
所以我们需要再index.wxss 中添加一个样式

添加完后是这样的

然后我们进入index.js文件
你会发现代码里面有个 data:{} 它不是page生命周期函数
其实他是个变量的数组，这个里面申请的变量都可以在 wxml中使用

我们在这里申请一个colors

color的值就是index.wxss中的样式名称

最终我们在index.wxss添加的代码如下：

然后进入index.wxml中,将class中的值改成 {{colors}}

其实意思就是 将js文件中变量 colors的值在这里使用
也就是值等于 win
然后我们再回到index.js文件
在最上面申请一个变量控制点击
然后在click:function() 函数中添加如下代码

修改完后的代码如图

我们更换完值 但是在wxml中不会立即生效
所以我们需要调用this.setData()方法将值同步给wxml 让它立即生效

好了我们运行程序 点击文字看看是不是点一下 变一下颜色！

点击前：

点击后：