微信小程序开发教程(基础篇)3-app.js 解析
2016-10-22 11:35
886 查看
上一篇教程中写道,开发工具会生成一个默认的程序框架,其中程序的主流程代码包含在app.js中。默认实现中,该部分功能比较简单,不过对于学研究小程序开发还是比较有价值的。
由于代码行数不多,下面一次性贴出来后进行讲解
代码中定义了一个App对象,该对象包含onLaunch, getUserInfo两个方法和globalData成员变量
其中onLaunch方法会在程序启动时由框架来进行调用。在该方法中,程序通过微信提供的本地存储接口获取了一个logs变量,第一次获取时会返回空,这时将变量初始化为空数组。之后在数组头部添加一个格式化的时间字符串,之后将数组变量存储在本地。
微信小程序框架提供了一系列api来帮助我们进行本地数据存储,上面的代码中使用到了wx.getStorageSync和wx.setStorageSync两个api,更多相关api可以参考这里
getUserInfo方法很容易理解,会执行获取用户信息的功能。不过该方法不同于onLaunch,它不是框架预设的函数,因此不会自动触发调用。该方法是在index.js的onload方法中调用的(关于index.js部分会在后续教程中讲解)。该方法需要调用者传递一个名为cb的参数,首先判断是否获取过用户信息,如果获取过并且cb是函数的话,就会调用cb函数并将globalData成员变量传递进去,否则将调用wx.login接口来获取用户信息。
对js不熟悉或者很少接触脚本语言的同学可能会对上述代码的语法产生困惑,这几行代码涉及到了函数回调,匿名函数,闭包等概念,我后续会针对这部分单独写一篇教程。
代码最后定义了 globalData成员变量,该成员包含userInfo变量,用来保存用户信息。
由于代码行数不多,下面一次性贴出来后进行讲解
//app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })
代码中定义了一个App对象,该对象包含onLaunch, getUserInfo两个方法和globalData成员变量
其中onLaunch方法会在程序启动时由框架来进行调用。在该方法中,程序通过微信提供的本地存储接口获取了一个logs变量,第一次获取时会返回空,这时将变量初始化为空数组。之后在数组头部添加一个格式化的时间字符串,之后将数组变量存储在本地。
微信小程序框架提供了一系列api来帮助我们进行本地数据存储,上面的代码中使用到了wx.getStorageSync和wx.setStorageSync两个api,更多相关api可以参考这里
getUserInfo方法很容易理解,会执行获取用户信息的功能。不过该方法不同于onLaunch,它不是框架预设的函数,因此不会自动触发调用。该方法是在index.js的onload方法中调用的(关于index.js部分会在后续教程中讲解)。该方法需要调用者传递一个名为cb的参数,首先判断是否获取过用户信息,如果获取过并且cb是函数的话,就会调用cb函数并将globalData成员变量传递进去,否则将调用wx.login接口来获取用户信息。
对js不熟悉或者很少接触脚本语言的同学可能会对上述代码的语法产生困惑,这几行代码涉及到了函数回调,匿名函数,闭包等概念,我后续会针对这部分单独写一篇教程。
代码最后定义了 globalData成员变量,该成员包含userInfo变量,用来保存用户信息。
相关文章推荐
- 微信小程序开发教程(基础篇)5-index 页面解析
- 微信小程序开发教程(基础篇)8-数据绑定下
- 用Vue.js开发微信小程序:开源框架mpvue解析
- 微信小程序全方位深度解析课程Dome-First项目app.js
- 微信小程序开发教程(基础篇)6-logs页面解析
- 开发配置基础设置-小程序开发设置1-微信小程序开发-视频教程8
- 微信小程序开发(五) - 全局(app.js)逻辑 - js 文件
- 使用Vue.js开发微信小程序开源框架mpvue解析
- 微信小程序开发教程(六)配置——app.json、page.json详解
- 微信小程序开发教程(七)逻辑层——.js详解
- 微信小程序开发入门基础教程
- EA&UML日拱一卒-0基础学习微信小程序(9)-C++程序员眼中的app.js
- 微信小程序开发教程(基础篇)4-关于回调函数,匿名函数,闭包的杂谈
- 微信小程序开发教程(基础篇)7-数据绑定上
- [034] 微信公众帐号开发教程第10篇-解析接口中的消息创建时间CreateTime
- 微信公众帐号开发教程第10篇-解析接口中的消息创建时间CreateTime
- (转)微信公众账号开发教程(二) 基础框架搭建
- 微信公众帐号开发教程第10篇-解析接口中的消息创建时间CreateTime
- 微信公众账号开发教程(二) 基础框架搭建(转)