小程序-使用总结(一)
总结:
(一) 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属性都将失效。