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

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

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

小程序一个页面有四个文件组成：
（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()函数定义小程序页面生命周期中的函数

1. 在新项目中创建一个demo页面，我们希望看到页面加载的时候，从后台看到一句话“欢迎来到小程序全栈工程师”
   

   
   

2. 点击编译，就可以看到页面显示出来了。后台看到了代码，这个时候切换到调试模式，就能在看到后台输出的代码了，由于我们写的是log的方式输出，那么要切换到Logs模式，console.log("小程序全栈工程师,页面加载完成"); 这句代码就是用来做控制台输出。
   

   
   

3. 好了，如果你按上页的步骤创建页面，是看不到运行效果了。创建的页面必须注册报到，这样就才能加载完成。

在小程序中所有的页面都必须先注册声明才能使用，在app.json中需要注册一下，写到pages数组中，根据数组顺序加载，现在示例代码中就是首先加载本次项目中创建的小程序页面 demo

上面讲的小程序的页面构成。一个小程序主体部分由三个文件组成，必须放在项目的根目录
app.js
app.json
app.wxss

后面随着项目的展开再一一说明这三个文件的使用，只需要记着这三个文件负责小程序整体的业务逻辑、外观呈现、公共数据

小作业
1、小程序页面的名字能不能和文件夹的名字不一致？
2、Page()函数 与App()函数都是写在哪里呢？

阅读原文进入“直播间”进行交流
阅读原文

文章首发微信公众号：全栈工程师    （微信号:fullstackeer）​​​​​