微信小程序-快速上手

一.开发小程序的文件结构

1. 这5个文件是必备的核心文件，对比Vue的项目结构
2. .wxml对比就是.html
3. .wxss对比就是.css
4. .json文件是配置文件，其中主要有两个重要的配置,
   • page：相当于路由
   • window：更改小程序的外观细节
     

二.页面文件结构结构

• 一般情况下，把我们所写好的页面存放到一个文件夹里面【page】
• 每一个页面对比vue，就相当于是一个组件
• 每一个页面，都包含4个基础文件(.js .wxss .wxml .json)

三.数据

1. 数据一般是在.js文件中的data对象里面
2. 在页面中展示数据一般用{{}}，对比vue的双大括号插值语法相同
3. 更改数据的时候要注意：

• 在vue2中，可以直接使用this.msg来更改数据，因为vue中的this数据劫持了data中的数据【get，set】

• 在小程序中，没有使用数据劫持代理，就必须使用this.data.msg****获取数据

• 在小程序中，必须使用this.setData({msg:'xxx'})来更改数据
  

• this都是指代的当前页面的实例化对象

• 修改数据的行为始终都是同步的！！！！

4. vue数据劫持【小程序没有】

• vue2中是通过Object.defineProperty使得this数据劫持data
• 特点就是可以直接this.msg获取和更改数据
• 其中在设置Object.defineProperty,set要监视数据更改，并且同时更改data中的值，就实现了完全的数据劫持代理

四.事件

1. 事件的绑定：

• bind绑定：事件的绑定不会阻止事件向上冒泡<view bindtap='method'><view>
• catch绑定：事件绑定会阻止事件冒泡<view catchtap='method'><view>

2. 事件流的三个阶段：

1. 捕获：从外向内
2. 执行目标阶段
3. 冒泡：从内向外

• 例子【假设这三个都有点击事件，并且我们点击子】：

 <div name='祖'>
	<div name='父'> 
		<div name='子'> <div>	
	<div>	  
<div>	

事件的流程就是：
1. 捕获：先捕获 祖—父----子
2. 执行：执行子
3. 冒泡：在执行父—祖

3.事件的函数

事件的函数应该放置在.js文件中，并且与生命周期函数，data对象等同级

• 这里区别一下vue，vue中的函数专本放在method对象里面的，这里不同

五.路由跳转

1. wx.navigateTo():保留当前页面，可以返回上一级的路由跳转

• 如果在url中不使用绝对路径，那么直接page/a/a是表示相对路径

wx.navigateTo({
	url:'/page/a/a'
})

2. wx.redirectTo() 关闭当前页面，然后跳转【不可以返回上一级】
3. wx.reLaunch() 关闭所有页面，然后跳转【不可以返回上一级】

六.生命周期

1. onLoad:监听页面加载

• 在页面刚初始化，还没有获取数据的时候，一般在这里可以执行服务器请求

2. onShow:监听页面显示

• 在页面显示出来，没有获取数据
• 在返回上一级的时候触发【路由跳转navigateTo】

3. onReady:监听页面初次渲染完成

• 在页面渲染完成的时候【有了数据】

4. onHide:监听页面隐藏

• 在页面跳转，并且没有被销毁的时候触发【没有被关闭，路由跳转navigateTo】

5. onUnload：监听页面销毁

• 在页面跳转，被销毁时的页面触发【页面被关闭，跳转用redirectTo和reLaunch】

综上总结：

• 在每次跳转新页面的时候，必定都会触发新页面的onLoad，onShow，onReady
• 在不同的路由跳转方式下，会触发旧页面的onHide，onUnload，触发情况看页面是否被销毁
• 在返回上一级页面的时，这时一定是navigateTo跳转过来的时候，会触发上一级页面的onShow

七.获取用户信息

1. 现在最新获取用户信息的api是：wx.getUserProfile()

wx.getUserProfile({
          desc: '获取当前用户信息',
          complete:(res)=>{
             	console.log(res)
              }
          }
        })

• 注意**wx.getUserProfile()**只能用在点击事件中！，不能用在生命周期钩子中
• 并且每次必须用户点击同意才能获取到信息

2.wx.getUserInfo()

• 跟wx.getUserProfile用法相似,但是不需要用户点击就可以获取用户数据
• 注意：这个获取的用户数据是匿名的，不完整