小程序入门

开发准备

开发微信小程序之前，必须有相应的开发工具，而小程序已经为我们提供了很好的开发工具，可以到官网上去下载安装即可，而它的开发入门也还算简单，首先我们必须去官网上了解它的开发文档，像一些组件、API等。

创建项目应用：安装完成后，打开并扫码登录。小程序个人订阅号是不能发布的。所以我这里选择无AppID，创建项目选择一个本地空文件夹，勾选创建quick start 项目生成一个demo。如下面的界面

初始界面

创建项目之后，就会得到相应的项目界面，界面的右边就是小程序的结构了，如下图

项目界面图

对于小程序的结构，目录下的三个结构都是全局。app.js是小程序的初始化脚本，可以在这个文件中监听小程序的生命周期，申请全局变量和调用API等，也就是跟我们熟悉的JavaScript差不多。
app.json是对小程序的全局配置，pages设置页面路径组成（默认第一条为首页），window设置默认页面的窗口表现等。
app.wxss 是整个小程序的公共样式表。也跟就是HTML的css语法相似，对于选择器、style差别不大，主要差异在于小程序有一些布局不一样，如flex等。

创建页面：在pages目录下的index页面，由一个文件夹中的四个同名不同类型文件组成。.js是脚本文件，.json是配置文件，.wxss是样式表文件，.wxml是页面结构文件，其中json和wxss文件为非必须（默认会继承app的json和wxss默认设置）。由此我们必须在app.json下配置页面的路径。
先说index.wxss,也就是页面的布局，其中view组件就像是HTML里的div标签。其布局与HTML一样可以轻松实现布局。
index.wxss就是css样式，不同的是其有一些独特的样式，可以去查阅文档来写。
index.js就是写页面数据处理和页面事件等等

实例一个页面

image.png

//.wxml布局


  
  //输出模板