微信小程序开发入门：10分钟从0开始写一个hello-world

小程序开发需要三个描述整体程序的app文件 和 一个描述多个页面的 pages文件夹。

（1）三个app文件分别是app.js,app.json,app.wxss。

• app.js文件是脚本文件处理一些公共的或者全局的逻辑。比如在这里定义全局变量处理登录逻辑指定首页等。

• app.json文件是小程序的整体配置文件。我们必须要在这个文件中配置小程序是由哪些页面组成的，我们还可以在这个文件中配置整个小程序的统一的窗口 背景色，导航条 样式，默认标题。但是必须注意该文件不可添加任何注释。

• app.wxss文件是整个小程序的公共样式表。我们可以在小程序子页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。也就是说在这个文件里定义的样式在其他任何的子页面中都可以使用。这个也是为了代码的简洁和整体风格的统一。

（2）接下来说pages文件夹：
小程序的所有显示的页面都必须以子文件夹的形式存放在pages文件夹里面，包括首页。项目展示多少个页面，在pages文件夹下就要新建多少个子文件夹。每个页面的子文件夹，必须包括这四个文件：.js , .wxml , .wxss 和 .json（* 表示文件名）。这四个文件的文件名必须和子文件夹的名字一样。

• *.js文件是当前页面脚本文件，也是业务逻辑的处理文件，当前页面的所有和后端服务器接口的交互，请求数据的逻辑都在这个文件完成，是核心文件，必须创建。

• .wxml文件是搭建当前页面元素的文件。负责搭建当前页面的结构和布局，相当于网页开发中的.html文件，这个文件中存放一些类似于div span form input sectiond等布局代码，必须创建。

• *.wxss文件是当前页面的样式文件。负责调整当前页面的样式，元素之间的间距，字体的大小，字体颜色，背景图等，相当于网页开发中的css文件，需要时创建。

• *.json文件是当前页面的配置文件。配置当前页面的窗口背景色，导航条样式，默认标题等，需要时创建不需要千万不要创建，这里我发现一个bug，就是如果创建了这个配置文件，但是配置文件中没有任何内容，那么页面渲染的时候什么也显示不出来，所以如果创建了这个文件，那么就必须在这个文件里写点什么即使写“{}”也行，要不然就不要创建。（个人猜测：是如果json文件为空，小程序在加载的时候就认为这个json配置是错的，页面渲染终止。我已经把这个bug提交给微信官方了！！！）

以上这四个文件只作用于当前的页面，不作用于整体和其他页面。

说了这么多，现在要正式开发啦： 
1、点击 目录窗口 右上角的 + 号，创建一个pages文件夹和app.js，app.json，app.wxss文件。创建完成以后就是下面这个样子：

图5 

2、此时pages文件夹下还没有任何的页面，现在我们的项目需要一个首页，那么就需要在pages目录下新建首页的子文件夹，点击 pages那行的最右边的 +号创建index子文件夹，然后点击index那行的最右边的+号，在这个子文件夹里把那3个文件创建完（鉴于上文发现的bug，这里就先不创建index.json文件，需要时再创建）。

这里要注意，3个文件必须和目录同名。

完成以后，就是下面这样

图6：

3、页面结构现在已经完成了，该有的页面也有了。但是，此时此刻页面上居然什么也没有显示，当然了，因为我们还没写代码呢！
好吧，接下来，开始敲~代~码~~~~
上面已经说了，wxml是搭建页面元素的文件。我从子页面的wxml文件开始，来一点一点的编写。写下第一行代码：

<text>hello world!</text>

写完了，crtl+s保存就行。今天子页面的代码编写工作已经完成了，是不是很惊悚，很难以置信。今天，子页面就写这一行代码。

如图7：

4、首页页面虽然我们写好了，但是现在小程序的页面上还是什么都没有显示。
别着急！这是因为我们还没有配置。如果想要页面显示出来，就必须在app.json中配置小程序的页面，参数为pages。pages是一个数组，其中的每个元素都是每个页面的相对根目录的路径+文件名，文件名不需要写后缀，小程序运行的时候会自动去寻找.json .wxml .wxss .js四个文件。数组的第一项表示小程序的初始页面，也就是首页，小程序的每个页面都需要在数组中配置，并且以后小程序页面增加或者减少都需要修改pages数组。
现在我们在app.json中写下我们的配置信息，我们把index做为小程序的初始页面，代码如下：

{"pages": [

    "pages/index/index"

    ]

}

图8：

注意：配置文件的编写遵循json的格式，参数需要用双引号""括起来，配置文件的开始和末尾需要用大括号"{""}"包含。

如果你对这些基础知识已经烂熟于心了，那么这篇文章可以帮助你快速开发一个完整的小程序demo。

您可能感兴趣的

• 小程序错误监控支持用户行为回溯