一.开发小程序的文件结构
- 这5个文件是必备的核心文件,对比Vue的项目结构
- .wxml对比就是.html
- .wxss对比就是.css
- .json文件是配置文件,其中主要有两个重要的配置,
- page:相当于路由
- window:更改小程序的外观细节
二.页面文件结构结构
- 一般情况下,把我们所写好的页面存放到一个文件夹里面【page】
- 每一个页面对比vue,就相当于是一个组件
- 每一个页面,都包含4个基础文件(.js .wxss .wxml .json)
三.数据
- 数据一般是在.js文件中的data对象里面
- 在页面中展示数据一般用{{}},对比vue的双大括号插值语法相同
- 更改数据的时候要注意:
-
在vue2中,可以直接使用this.msg来更改数据,因为vue中的this数据劫持了data中的数据【get,set】
-
在小程序中,没有使用数据劫持代理,就必须使用this.data.msg****获取数据
-
在小程序中,必须使用
this.setData({msg:'xxx'})
来更改数据
-
this都是指代的当前页面的实例化对象
-
修改数据的行为始终都是同步的!!!!
- vue数据劫持【小程序没有】
- vue2中是通过Object.defineProperty使得this数据劫持data
- 特点就是可以直接this.msg获取和更改数据
- 其中在设置Object.defineProperty,set要监视数据更改,并且同时更改data中的值,就实现了完全的数据劫持代理
四.事件
1. 事件的绑定:
- bind绑定:事件的绑定不会阻止事件向上冒泡
<view bindtap='method'><view>
- catch绑定:事件绑定会阻止事件冒泡
<view catchtap='method'><view>
2. 事件流的三个阶段:
- 捕获:从外向内
- 执行目标阶段
- 冒泡:从内向外
- 例子【假设这三个都有点击事件,并且我们点击子】:
<div name='祖'>
<div name='父'>
<div name='子'> <div>
<div>
<div>
事件的流程就是:
1. 捕获:先捕获 祖—父----子
2. 执行:执行子
3. 冒泡:在执行父—祖
3.事件的函数
事件的函数应该放置在.js文件中,并且与生命周期函数,data对象等同级
- 这里区别一下vue,vue中的函数专本放在method对象里面的,这里不同
五.路由跳转
- wx.navigateTo():保留当前页面,可以返回上一级的路由跳转
- 如果在url中不使用绝对路径,那么直接
page/a/a
是表示相对路径
wx.navigateTo({
url:'/page/a/a'
})
- wx.redirectTo() 关闭当前页面,然后跳转【不可以返回上一级】
- wx.reLaunch() 关闭所有页面,然后跳转【不可以返回上一级】
六.生命周期
- onLoad:监听页面加载
- 在页面刚初始化,还没有获取数据的时候,一般在这里可以执行服务器请求
- onShow:监听页面显示
- 在页面显示出来,没有获取数据
- 在返回上一级的时候触发【路由跳转navigateTo】
- onReady:监听页面初次渲染完成
- 在页面渲染完成的时候【有了数据】
- onHide:监听页面隐藏
- 在页面跳转,并且没有被销毁的时候触发【没有被关闭,路由跳转navigateTo】
- onUnload:监听页面销毁
- 在页面跳转,被销毁时的页面触发【页面被关闭,跳转用redirectTo和reLaunch】
综上总结:
- 在每次跳转新页面的时候,必定都会触发新页面的onLoad,onShow,onReady
- 在不同的路由跳转方式下,会触发旧页面的onHide,onUnload,触发情况看页面是否被销毁
- 在返回上一级页面的时,这时一定是navigateTo跳转过来的时候,会触发上一级页面的onShow
七.获取用户信息
- 现在最新获取用户信息的api是:wx.getUserProfile()
wx.getUserProfile({
desc: '获取当前用户信息',
complete:(res)=>{
console.log(res)
}
}
})
- 注意**wx.getUserProfile()**只能用在点击事件中!,不能用在生命周期钩子中
- 并且每次必须用户点击同意才能获取到信息
2.wx.getUserInfo()
- 跟wx.getUserProfile用法相似,但是不需要用户点击就可以获取用户数据
- 注意:这个获取的用户数据是匿名的,不完整