微信小程序开发从零开始创建一个页面以及小程序生命周期和页面生命周期

之前我们已经把准备工作都做好了，那么接下来我们就可以创建新的页面进行编写了。

创建新页面

1.我们来到我们的项目结构-pages层，右键-新建文件夹，输入文件夹名称，比如这里输入index作为文件夹名称

2.文件夹创建好之后我们就可以看到在pages目录层下面多了一层index目录，然后我们在index右键，新建Page

这里为什么要选择新建page呢？

我们在之前提到，小程序的界面是由.js .json .wxml .wxss四个界面组成，在我们选择新建Page的时候，小程序就会自动帮我们生成对应的这四个界面

基本上到这里一个页面的创建就完成了，但是我们创建了页面肯定是要进行展示的，所以我们需要在最外层的app.json中配置我们的页面路由。

3.配置页面路由，我们去到最外层的app.json文件，在pages下配置我们的index页面路由

"pages": [
    "pages/index/index"
],

4.这里额外说一点，写过网页的都知道，我们划分区域大多都是使用的div进行划分，但是小程序不一样，小程序使用view进行划分，比如我们要在index.wxml里面编写一个hello word我们就可以使用view关键字进行编写

<!--miniprogram/pages/index/index.wxml-->
<text>miniprogram/pages/index/index.wxml</text>
<view>Hello Word</view>

5.我们来看一下效果图

我们可以看到左边的模拟器已经将我们的内容展示出来了。

小程序的生命周期

小程序一共有onLaunch、onShow、onHide三个主要生命周期、onError、onPageNotFound、onUnhandledRejection、onThemeChange四个主要函数，这里做一下简单介绍，详情可以访问小程序官网进行了解。
地址：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

概念：
onLaunch：小程序生命周期的回调方法之一，小程序在创建初始化的时候会回调该方法。

onShow：小程序的生命周期的回调方法之一，小程序在启动或者从后台切换到前台(也就是小程序从不可见到可见)的时候回调用该犯法。

onHide：小程序的生命周期回调方法之一，监听小程序从前台切换到后台(小程序从可见变成不可见)

onError：小程序发生错误时会走这个函数。

onPageNotFound：当小程序页面找不到时会走这个函数。

生命周期出发顺序：
我们在app.js方法中分别写上小程序的三个主要生命周期的回调方法，然后打印日志，在运行，我们可以看到控制台结果，先执行了launch，然后才执行show，这我们就可以知道小程序的生命周期是在执行完成初始化之后，才执行的show显示操作。

当我们把小程序切换到后台之后就会触发onHide回调。

页面的生命周期

小程序页面也有着自己的生命周期，加载渲染到页面销毁，这里也简单说明一下页面生命周期的几个主要回调方法。

onLoad：监听页面加载，这个方法只会触发一次，就是我们在创建当前页面A的时候触发，但是当我们从A跳转到B页面，再从B页面返回到A页面，这时候A页面不会触发我们的onLoad方法。

onReady：监听页面初次渲染完成，这个方法和onLoad一样，只会触发一次，跳转到其他页面再返回的时候不会重新触发。

onShow：监听页面显示，当我们初次进入页面，或者小程序页面从后台切换到前台时会触发。

onHide：监听页面隐藏，当我们从A页面跳转到B页面，A页面会触发该回调；当我们小程序从前台切换到后台同样也会触发该回调。

onUnload：监听页面卸载。

那么页面的生命周期加载顺序是个什么样的呢？我们通过index页面的创建来展示一下

我们可以看到页面的创建是先执行load，然后show，然后才是ready渲染完成；当我们的页面进行切换，或者小程序从前台切换到后台变成不可见之后就会执行onHide方法。

更多的生命周期内容可以到小程序官方，查看生命周期图，这里就不做过多的叙述了。

地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

本文地址：https://blog.csdn.net/theyangchoi/article/details/110121999