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

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

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

小程序一个页面有四个文件组成:

(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()函数都是写在哪里呢?

,可以参考小程序定制的资料,