微信小程序开发教程(基础篇)3-app.js 解析

lemon 发布于2019-08-20 12:23 / 1721人阅读

摘要：微信小程序框架提供了一系列来帮助我们进行本地数据存储，上面的代码中使用到了和两个更多相关可以参考这里方法很容易理解，会执行获取用户信息的功能。

上一篇教程中写道，开发工具会生成一个默认的程序框架，其中程序的主流程代码包含在app.js中。默认实现中，该部分功能比较简单，不过对于学研究小程序开发还是比较有价值的。

由于代码行数不多，下面一次性贴出来后进行讲解

//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变量，用来保存用户信息。

超融合服务器服务器托管购物微信小程序开发视频教程微信小程序开发微信小程序开发语言微信小程序开发免费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80959.html

微信小程序开发教程(基础篇)6-logs页面解析

摘要：到此为止，默认生成程序的解析部分就结束了。这个解析过程是为了对微信小程序有个总体上的理解，所以很多地方并没有深入。在后面的教程中，我会继续讲解微信小程序开发的各个方面。上一篇教程中对index页面进行了解析，这一篇来解析下logs页面老规矩先上图 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...

shiguibiao 2019-08-20 12:34 评论0 收藏0
微信小程序开发教程(基础篇)5-index 页面解析

摘要：上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。这边教程主要对默认生成的页面进行讲解。而的显示则是由属性直接指定。在该例子中，当用户点击用户头像和昵称的视图区域时，程序便会显示页面。上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。这边教程主要对默认生成的index 页面进行讲解。在之前的教程中有写道，每一个页面都包含.js(处理逻辑)，.wxml...

GT 2019-08-20 12:29 评论0 收藏0
微信小程序开发教程(基础篇)2-微信小程序结构概览

摘要：在新建一个项目后，微信小程序会生成一个默认的程序框架，后续程序的开发工作都在这个框架上进行。微信小程序的开发模式确实和开发很相似。通常一个完整的微信小程序包含上面两部分，当然我们也可以定义自己的目录用于存放公共代码和程序需要的其它文件。在上一篇教程的最后，我们生成了一个类似Hello World的小程序，这个过程中没有编写任何一行代码。在新建一个项目后，微信小程序会生成一个默认的程序...

muddyway 2019-08-20 12:21 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0