微信小程序的示例程序quickstart学习笔记

网上有几个关于微信小程序开发的基本教程，

比如crazytea的：http://blog.csdn.net/crazytea/article/category/6444510

还有狂兔科技的：http://www.henkuai.com/thread-15457-1-1.html

顺子有一套教程也挺好：http://blog.csdn.net/u014360817?viewmode=contents

当然，最重要的其实是官方教程的框架这一部分，它才是权威解释

微信官方https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=20161222

 

因为没有系统学习过javascript，因此看完这2篇教程之后，还是没有完全明白quickstart中的一些函数和调用之间的关系。又在网上搜索了一些文章。基本弄清楚了，做一下笔记。

 

先说app.js。

  onLaunch: function () {

    //调用API从本地缓存中获取数据

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

  },

官方教程中说：“当小程序初始化完成时，会触发 onLaunch（全局只触发一次）”。

这个函数触发后，首先是从本地缓存中找key为‘logs’的数据。如果找到了，就传递给变量logs，如果找不到，就生产一个新的变量logs，其值为空。

logs.unshift(Date.now())是把当前时间放到logs的最前面（如果原来有数据的话）。

也可以改为logs.push(Date.now())，这个的效果是把当前时间放到logs的最后面。

这样，本地缓存里面会有类似下面的数据：

Logs  Array[1482658382226, 1482658508926, 1482658538332]

Logs这个key对应一个数组，中括号中的三个值其实都是时间，是目前为止3次启动这个微信小程序的时间记录。但是这个格式只有机器能懂，要格式化一下才能看得懂。Utils目录下面的util.js中的formatTime(date)函数就是用作格式翻译的。

wx.setStorageSync('logs',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)

            }

          })

        }

      })

    }

  },

首先这个var that = this是防止后面调用的时候用错了对象指针。

if(this.globalData.userInfo){ typeof cb == "function"&& cb(this.globalData.userInfo) }

         刚开始的时候，因为下面因为全局变量userInfo是空的，所以这句话会被跳过，执行下面else后面的半句：首先是调用微信的登录函数，登录完毕之后，调用微信的wx.getUserInfo函数，得到用户的userInfo。然后这句比较关键：

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

         我们来看看cb会是什么东西。真正调用getUserInfo:function(cb)的，是在index.js中onload函数里面：

app.getUserInfo(function(userInfo){

     //更新数据

     that.setData({

       userInfo:userInfo

     })

})

所以这个cb其实是一个函数，函数体是：

function(userInfo){  that.setData({ userInfo:userInfo  })

那么cb(that.globalData.userInfo)相当于：

function(that.globalData.userInfo){  that.setData({ userInfo: that.globalData.userInfo})

结果就是取得的用户信息传递给全局变量userInfo。

至于为什么用setData，官方文档中介绍，setData 函数用于将数据从逻辑层发送到视图层，从而触发视图层自动改变。直接修改app或page数据无效，无法改变页面的状态，还会造成数据不一致。

 

再看index.js这里面要紧的是事件处理函数：

  bindViewTap: function() {

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

当事件触发的时候，微信会导航到/logs/logs页面。那么什么时候会触发这个事件呢，首先这是一个视图被点击的事件，从index.wxml里看，这个视图包括一个用户的头像和头像下面的用户名。所以，当你在用户头像和用户名上点击的时候，就会跳转到logs页面。

 

下面是quickstart的官方源码及介绍地址

https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161222

还有这篇文章也很不错：理解和使用javascript中的回调函数

http://blog.csdn.net/luoweifu/article/details/41466537