上节中开发环境帮助自动生成很多文件,也尝试的修改了一些并完成了显示
小程序一个页面有四个文件组成:
(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("小程序全栈工程师,页面加载完成"); 这句代码就是用来做控制台输出。
好了,如果你按上页的步骤创建页面,是看不到运行效果了。创建的页面必须注册报到,这样就才能加载完成。
在小程序中所有的页面都必须先注册声明才能使用,在app.json中需要注册一下,写到pages数组中,根据数组顺序加载,现在示例代码中就是首先加载本次项目中创建的小程序页面 demo
上面讲的小程序的页面构成。一个小程序主体部分由三个文件组成,必须放在项目的根目录
app.js
app.json
app.wxss
后面随着项目的展开再一一说明这三个文件的使用,只需要记着这三个文件负责小程序整体的业务逻辑、外观呈现、公共数据
小作业
1、小程序页面的名字能不能和文件夹的名字不一致?
2、Page()函数 与App()函数都是写在哪里呢?
阅读原文进入“直播间”进行交流
文章首发微信公众号:全栈工程师 (微信号:fullstackeer)