小程序开发系列之基础部分-代码结构_新建一个页面时,小程序会为你生成多少个文件-CSDN博客

本文链接：https://blog.csdn.net/jadebird20080808/article/details/71703380

小程序开发系列基础部分-代码结构

上节中开发环境帮助自动生成很多文件，也尝试的修改了一些并完成了显示

小程序一个页面有四个文件组成：
（1）js 表示页面逻辑
（2）wxml 表示页面结构
（3）wxss 表示页面样式（负责页面外观）
（4）json 表示页配置（存放页面基础数据）
为了减少页面配置，小程序约定这四个文件要有相同的文件名和路径

其中 wxss 和 json 不是必须项。

js文件表示页面的逻辑，一个小程序页面有一个生命周期，从开始到结束需要处理的内容都可以在这个文件中完成

Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

Page()函数定义小程序页面生命周期中的函数

在新项目中创建一个demo页面，我们希望看到页面加载的时候，从后台看到一句话“欢迎来到小程序全栈工程师”
点击编译，就可以看到页面显示出来了。后台看到了代码，这个时候切换到调试模式，就能在看到后台输出的代码了，由于我们写的是log的方式输出，那么要切换到Logs模式，console.log("小程序全栈工程师,页面加载完成"); 这句代码就是用来做控制台输出。
好了，如果你按上页的步骤创建页面，是看不到运行效果了。创建的页面必须注册报到，这样就才能加载完成。