【零基础】学会微信小程序开发-实现第一个页面

上一篇我们了解了微信小程序代码结构组成，本篇文章，我们将要开始进行小程序的真正开发工作，Let’s go!

##第一个页面
让我们来创建第一个页面
右键单击 pages 目录，在弹出来的菜单里，选择 新建文件夹，我们起名为home

接下来，我们右键单击刚刚创建的home文件夹，选择新建 Page，输入 index 回车，我们会看到系统会自动为我们生成4个文件，分别是 index.js、index.json、index.wxml、index.wxss，这些文件的用途，我在上一篇里已经介绍过了，忘记了的小伙伴可以翻看一下上一篇文章回顾一下。

让我们先打开index.js文件，打开后我们能看到如下图所示：

我们可以 看到onLoad、onReady、onShow 这些小程序预置方法，这在小程序的各个生命周期内可以分别被触发，如 onLoad 函数 是在页面加载时触发， onShow 是在页面展示的时候触发， 我们可以根据我们自己的业务需求，在不同生命周期函数里进行具体逻辑实现。

data对象里面可以定义我们在当前视图里需要使用到的一些变量，比如定义一个显示在页面的数据，我们可以这样写：

    /**
     * 页面的初始数据
     */
    data: {
        text:"这是一段自定义文字"
    },

在wxml里使用的话，可以这么写：

<view>{{text}}</view>

小程序会自动将我们在data中定义的 text的值渲染到页面

在进行真正的开发工作之前，我们要先了解一下如何搭建小程序的视图页面，小程序的视图页面后缀为：.wxml，一个完整的视图文件如下图所示：

视图文件使用<view>标签进行页面的组件，每对<view>标签应该成对出现，视图官方文档详见：WXML说明

接下来我们打开index.json文件，index.json文件可以定义一些页面级的设置，比如页面标题，引入页面级组件，改变页面标题样式等等，我想改变home页面的标题展示，那么我可以像下面这么写：

{
    "navigationBarTitleText": "主页",
    "usingComponents": {} //引入页面级组件，稍后章节将会进行讲解
}

我们看到页面的标题同步变成：

最后，我们打开index.wxss文件，这里现在是空空如也，因为我们还没有自定义样式，那么在前几个章节，我们先不会进行自定义样式创建，所以我们先忽略它

讲解完页面的文件组成了，那么我们如何让新建的页面展示到左侧的模拟器中呢，让我们来实现一下：
我们来打开app.json文件，可以看到如下图所示，我们要把pages数组进行一些修改，首先我们删除掉其他多余的项，只保留"pages/home/index"
然后我们保存app.json文件，这时候我们可以看到左侧模拟器页面发生了变化，它变成了我们创建的页面！

到此，我们完成了第一个页面的创建，并成功在模拟器中展示出来，本篇文章到此就结束了，下一篇我们将实现简单的程序交互，See you soon！