微信小程序 学习笔记 页面结构详解

一.小程序学习大纲

image.png

image.png

二.小程序简介

image.png

image.png

新建一个微信小程序

image.png

image.png

image.png

image.png

注意：这里面的 function就是(){}

1.json页面

（1）app.json 配置页面路由和窗口样式

image.png

app.json最多就是这个样子，就是json格式。

pages：页面列表，新建页面的时候，需要把页面的路径写在这里注册，不需要加后缀

windows：来定义页面窗口，全局的每个页面都是一样的

tabbar：定义底部切换栏 borderStyle只有white 和black两种

networkTimeout：网络请求超时时间设置

debug：控制台信息是否打开，开发过程中是打开的

（2）页面的json

image.png

页面里面的.json很简单，最多显示这五个属性来配置标题，
因为页面的.json优先于app.json，所以可以覆盖app.json

2.wxml页面

（1）页面的wxml页面

image.png

wxml.定义页面的骨架，其中class中指定的内容在.wxss中指定，app.wxss中设置统一的布局样式，但是页面的.wxss的优先级高于app.wxss

3..js页面

image.png

三..js页面 page函数详解

1.page 生命周期

image.png

.js 肯定以page开头的({}) 里面的data可以理解为数据仓库，其他founction是业务逻辑的方法，onload方法只会执行一次，调用方法可以用this.方法()

1.data 重置数据

image.png

int类型重置数据

image.png

类类型重置数据

image.png

改变data里面的数据用data.setData({}),内部有路径的概念，可以用".";

四.page生命周期调用时机

image.png

五.页面跳转

微信提供页面跳转的api "wx.navigateTo()" 和“wx.redirectTo”

1.navigateTo() 在wxml跳转页面

image.png

2.wx.navigateTo() 代码跳转页面

image.png

3. wx.redirectTo() 代码跳转页面

image.png

4. redirectTo() 在wxml跳转页面

image.png

image.png

redirectTo跳转的页面没有返回键，因为上个页面被杀死了，而navigateTo跳转的页面上个页面还保留，并且第二个页面有返回键。

六.课下作业

image.png