微信小程序开发入门学习01

目录 1 使用模板创建小程序2 app.json3 页面布局总结 原来我们使用微信开发者工具，比较困难的是前端框架的选择上，官方也没有提供一套框架供我们使用，最近开发者工具已经提供了一套前端框架，后续我们开发的效率会因为使用模板提高不少。本篇我们带着大家一起体验一下这套框架。

1 使用模板创建小程序

打开微信开发者工具，在新建项目的时候，选择官方提供的模板 创建成功后，会生成一系列的文件

2 app.json

要学习一套模板，我们就要从头开始阅读代码，那从哪个位置开始看起呢？首先是要先阅读微信小程序的入口文件。入口文件是app.json，这个配置文件是我们程序的全局配置文件，具体的配置项可以参考官方的文档 带的这套模板，分别配置了pages、subpackages、usingComponents、window和sitemapLocation

pages表示我们小程序的页面，每一个页面由wxml、wxss、json和js四个文件组成，配置项的类型是数组，里边的元素是一个页面的路径，我们先看一下目前模板的配置

"pages": [ "pages/home/home" ]

我们找到我们home文件 首先我们的页面都是放在pages文件夹里，然后第二层是我们的home文件夹，第三层home是我们的home.wxml

wxml相当于网页开发里的html，只是他不需要html、body这些标记，可以直接写页面的内容部分

在pages配置数组里的第一个元素就相当于首页，你需要哪个作为首页就把它放入到第一个位置，现在他叫home，你也可以创建一个index作为首页。

创建页面的方法是先选中pages目录，右键，创建一个文件夹

然后选中文件夹，再创建页面(Page)

然后我们去app.json里调整一下页面的顺序，将index放到第一个位置

3 页面布局

在小程序中我们可以使用两种布局模式，一种是相对定位，一种是绝对定位。相对定位其实就是我们的流式布局，组件会从左到右，从上到下依次排列。绝对定位就是按照像素进行布局，通过x，y坐标来决定某一个组件具体放置到哪里

相对定位的优势是可以做到自适应，随着手机屏幕大小的不同我们可以做到自动变化。缺点是要想做到自适应，我们需要