微信小程序学习（1）

微信小程序1月9号就要上线了！不说废话了，学习学习，加油！

开发工具：微信web开发工具（吐槽，果然够原生，让我情何以堪！）

一、添加项目

自己练习的话选无AppID就可以了。

填写项目名称，项目目录，然后点击“添加项目”按钮！

勾选了“在当前目录中创建quick start项目”选项的，小程序会自动生成一套框架！

是这样的：

但是今天呢我们不选quick start选项，一张白板一行一行实现上图的页面！

在此之前先介绍一下小程序的文件类型：wxml(相当于html),wxss(相当于css),js,json。

每一个页面都是由.wxml(实现页面的结构),.wxss（实现页面的样式）,.js（实现页面的行为）组成的！

例如上图中项目有两个页面，它们包含在pages文件夹下，其中index页面由index.wxml、index.wxss、index.js组成；logs页面由logs.wxml 、logs.wxss 、logs.js 、logs.json组成。

下面的app.js 、app.json 、app.wxss可以看作整个app的配置文件对整个项目都有效。

但是大家不要忘了就近原则！！！

好了!本文就实现一个index页面。go！go！go！

不勾选quick start选项

点击添加项目进入

二、创建文件

点击加号创建pages文件夹

点击pages行的加号新建index文件夹

输入文件名index

在index文件夹下创建wxml,wxss,js文件

创建成功

三、在wxml文件下编写index页面结构：

类似html，相当于

,犹如

。然后起个类名。

tips：在编译index.wxml文件前，应该先创建app.json文件配置路径，否则小程序无法找到index文件。

如图配置后小程序执行时就可以找到index下的所以index文件

tips:被包围的文本在手机页面显示时才能长按选中。

四、在wxsswen文件中写样式：

好了！一个静态页面就做好了！其他的下一篇笔记再说！