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

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

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

小程序一个页面有四个文件组成:
(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页面,我们希望看到页面加载的时候,从后台看到一句话“欢迎来到小程序全栈工程师”

    小程序开发系列之基础部分-代码结构_第1张图片
  2. 点击编译,就可以看到页面显示出来了。后台看到了代码,这个时候切换到调试模式,就能在看到后台输出的代码了,由于我们写的是log的方式输出,那么要切换到Logs模式,console.log("小程序全栈工程师,页面加载完成"); 这句代码就是用来做控制台输出。

    小程序开发系列之基础部分-代码结构_第2张图片
  3. 好了,如果你按上页的步骤创建页面,是看不到运行效果了。创建的页面必须注册报到,这样就才能加载完成。

小程序开发系列之基础部分-代码结构_第3张图片

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

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

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

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

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

文章首发微信公众号:全栈工程师    (微信号:fullstackeer)​​​​​


你可能感兴趣的:(apple,java,html&css)