4-6 js文件结构与Page页面的生命周期

直接把各种数据，image，文本硬编码到wxml里，只为了模拟前后端分离的开发方式。只有钱前端确定各种样式都没有问题的情况下，才合适来对接服务器。如果过早获取服务器的数据，实际上是分散你在前端构建的精力。不利于专心于编写前端代码。前端样式调试完毕之后，实际上数据获取都是非常简单的。直接把服务器获取的数据填充到前端上。然后就可以了，这就是前后端分离的一种开发方式。

知识点1、服务器数据

数据肯定还是要从服务器过来的，但是先在前端测试文章的样式等等有没有问题。

知识点2、js脚本构建

如何获取数据，wxml和wxss文件肯定是获取不到的。要通过post.js脚本文件获取服务器数据 ， 在这个脚本里可以输入page，然后使用小程序给大概的骨架结构就生成好了。默认的方法和属性。所有的脚本，都是在page的json的结构体里面编写的。你也可以在page里面写自己需要的属性，方法。

知识点3、onLoad，onReady，onShow。onload：页面初始化完了之后，就会执行这个函数。onready：页面渲染完成后执行这个函数。以及页面显示时候，隐藏时候，关闭时候执行响应的函数。就是监听函数。每当小程序进入某个阶段的时候，就执行对应阶段定义的函数。

它们的执行顺序通过console.log()，可以知道是onLoad-onShow-onReady。至于onHide和onUnload没有显示，是因为单个页面，没有关闭页面也没有隐藏页面。其实可以理解，先需要加载所需要的内容，然后显示出来，最后渲染。关于为什么要先显示，后渲染，个人理解：如果先要渲染好，再显示，那么有些css文件如果一直没有加载，也就一直没有渲染，导致不能正常显示。所以显现加载后，显示出来内容，就算没有渲染好，也不至于让用户连基本的内容都看不了。

pages/posts/post.js 出现脚本错误或者未正确调用 Page()，已经加了page（{}），还是报错。怎么办？

答案：大写Page，请仔细一些。

 生命周期函数--监听页面加载onLoad:function(options) {

 生命周期函数--监听页面初次渲染完成onReady:function() 

生命周期函数--监听页面显示onShow:function() {

知识点4、断点调试

微信小程序里面的单步调试和变量查看

作者：bright789

在微信小程序开始学习与开发的过程中，总有一些东西，想看看它跑起来的内容与我们编程时想的是否一致，于是就想到了能不能单步调试或者打出一些我们想要的变量的内容，以便我们做进一步的开发和调整，现在我就要介绍下微信小程序的一般用到的调试方法和打印日志以及看到变量里面的运行值。

第一步：打断点，我们必须在我们想要它停下来的地方打上调试断点，点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab，在Sources页中点开”Top”根节点，层层打开，找到自己想要调试的js文件，一般是打那种.js后面带[sm]，如index.js[sm]，非index.js，当然这里之后想修改内容不能在”调试”模式下修改，而要转到”编辑”模式，之前我老容易犯这个错误，打开index.js[sm]文件后，点击左边的行上的数字，就会由灰色背景变成蓝色背景，这样断点就打好了，(如果不想要了，也可以点击就会取消)如下图所示:

第二步：运行，首先点击编译上面的那个运行小图标(或者快捷键ctrl+b)，然后操作到你想要的那个界面或者触发某个动作，程序自动会跑到断点处代码，如下图所示:

第三步：单步调试，按调试器窗口(debugger)的向下箭头

(step into nextfunction call)，一步步的可以往下调试，如果想跳到下一个断点，就按调试器窗口的类似于播放的小按钮

,英文叫resume script execution，快捷键为F8或者Ctrl+\,如下图所示

如果想看调试中变量的运行值怎么办？有许多办法，这里以查看上个界面传来的options变量值为例

办法1：让鼠标指针放在变量上，他会有提示框，框内就是变量值，如下图所示

办法2:使用console.log(options);打印出来，在console窗口可以查看，如下图所示

方法3：在调试器窗口，点开Scope标签，然后再点开相应变量,如下图所示

如果我们的断点过多或者不想它们调试了，怎么让它们失效呢？

办法就是点击调试器窗口中的图标

，英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

知识点5、page里面可以定义函数，变量

知识点6、生命周期。

暂时看不懂没关系

最常用的就是onLoad，onShow，onReady，会用这三个就行了。并不建议一开始就非得看懂这样的图。官方也建议不需要一开始就弄明白。就是这三个，多试几次，就懂了。