一.小程序学习大纲
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
网友评论