小程序-使用总结（一）

总结：

 

（一） typeof cb == "function" && cb(that.globalData.userInfo)

 

　　获取用户信息：

getUserInfo:function(cb){
　　console.log(‘getUserInfo 函数开始执行’);
　　var that = this
　　if(this.globalData.userInfo){
　　　　typeof cb == “function” && cb(this.globalData.userInfo)
　　}else{
　　　　//调用登录接口
　　　　wx.login({
　　　　　　success: function () {
　　　　　　　　wx.getUserInfo({
　　　　　　　　　　success: function (res) {
　　　　　　　　　　　　console.log(‘用户数据获取成功’);
　　　　　　　　　　　　that.globalData.userInfo = res.userInfo
　　　　　　　　　　　　typeof cb == “function” && cb(that.globalData.userInfo)
　　　　　　　　　　}
　　　　　　　　})
　　　　　　}
　　　　})
　　}
}

　　调用函数：

app.getUserInfo(function(userInfo){
    //更新数据
    that.setData({
        userInfo:userInfo
    })
    console.log(‘用户数据存入当前页面’);
})

 

　　这里就是传递一个形参，cb的方法

typeof cb == "function" && cb(that.globalData.userInfo)

　　利用的&&的运算规律，首先判断cb是不是一个方法， 这里的==可以作为类型是否相当的判断，然后在&&中如果前面的不满足，后面的则不会执行；如果是cb是一个方法，调用cb方法，并且传入success成功回调的userinfo参数。

在getUserInfo的方法定义中，接收了名为cb的参数，使用时机就是在拿到用户信息的时候，如果这个cb类型为函数就执行名为cb这个函数。再看函数调用，在index.js的onLoad方法中调用了这个函数并定义了一函数作为参数，函数的内容就是将传入的userInfo设置在当前页面的数据中。

　　执行步骤：页面时会先调用onLoad函数，然后执行app.getUserInfo()函数，拿到用户信息后 执行cb作为参数的函数的方法，即’用户数据获取成功’最后会输出’用户数据存入当前页面’。

 

（二） onLoad() 函数一个页面只会调用一次；onShow() 函数 每次打开页面(比如小程序从后台转到前台)都会调用一次

（三） wx.getSetting(Object object)

　　获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。

　　返回值：请求过的权限可以通过res.authSetting拿到，用户是否授权通过res.authSetting['scope.userInfo']可以判断，{scope.userInfo:true}授权为true

　　获取用户信息：wx.getUserInfo（）

（四）userInfoReadyCallback 函数的作用

　　首先执行的是app.js的wx.getUserInfo，这个是获取用户信息的网络请求，由于其返回结果不知道在index页面加载完成之前还是之后完成，可能会在 Page.onLoad 之后才返回。因此分为两种情况：

　　1、在index页面加载完成之前返回：此时优先执行app.js中success函数的代码，app.globalData.userInfo就保存了用户信息。运行到这里时，由于userInfoReadyCallback函数是在index.onload中定义的，因此此时该函数并没有被定义，所以不执行该函数。之后执行index.js中onload中的代码，执行第一个if分支，赋值给页面的userInfo和hasUserInfo

if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
}

　　2、在index页面加载完成之后返回：此时优先执行index.js中onload中的代码，由于用户信息还没有返回，所以app.globalData.userInfo为null，执行第二个if分支，定义userInfoReadyCallback函数。随后数据被返回，执行success的代码，app.globalData.userInfo在此时才保存了用户的信息，并执行userInfoReadyCallback函数，赋值给页面的userInfo和hasUserInfo

　　总结： userInfoReadyCallback函数的作用，就是保证页面的userInfo和hasUserInfo被正确赋值，无论用户信息在页面加载完成之前还是之后返回。

（四） flex 布局

　　实现子元素在父元素中水平垂直居中

　　父元素css：

display: flex;
justify-content: center;
align-items: center;

　　行内元素也可以使用Flex布局：   display: inline-flex

　　Flex布局主要涉及12个属性（不含display:flex），其中容器和子容器各6个，但是平常使用到的基本只有4个属性，父容器和子容器各2个

　　作用于父容器的属性：

flex-direction: row | row-reverse | column | column-reverse; //属性决定主轴的方向，及子容器（项目）的排列方向。
flex-wrap: nowrap | wrap | wrap-reverse; //默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow: <flex-direction> || <flex-wrap>; //属性是flex-direction和flex-wrap属性的简写形式，默认为：row nowrap
justify-content: flex-start| flext-end | center | space-between |space-around; //定义了项目在主轴上的对齐方式
align-items: flex-start| flex-end | center | baseline | strech; //属性定义了项目在交叉轴上的对齐方式
align-content: flex-start| flex-end | center | space-between | stretch; //属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

　　作用于子容器（项目）的属性：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

　　但是要注意：设为Flex布局后，子元素的float、clear、vertical-alian属性都将失效。