微信小程序（一）

准备工作

下载地址（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=201716）

然后扫码进入微信公众号，他会自动获取你的公众号和微信

创建项目

1.添加项目

2.项目目录是该项目位置；AppID如果没有可选择测试账号或注册；项目名称可以随便起

快速创建小程序模板需要新建一个空的目录才会产生如下所示（建立普通快速启动模板）

项目架构分析

1.整体架构：架构目录

1. 红框1：页面效果展示
2. 红框2：代码架构目录
3. 红框3：代码栏

2.app.js、app.json、app.wxss这三个钟前两个是必看的前两个相当于目录，就好比看一本书之前要先看目录一样

1. app.js是小程序的脚本代码我们可以在这个文件中监听并处理小程序的生命周期函数，声明全局变量；
2. app.json是对整个小程序的全局配置，可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口颜色，配置导航条样式，配置默认标题（注意：app.json中不能添加任何注释！！！）；
3. app.wxss是定义小程序的公共样式，这里申明的样式我们可以在其他的页面中直接引用。

3.app.json解析：

1. 文件后缀为.json格式当然是json格式；
2. 这里包含两个部分pages和window（固定字段）
3. pages就是整个小程序包含的页面，可以根据路径查找页面
4. window就是设置一些窗口样式（窗口 背景字体样式，配置导航条背景样式，配置默认标题，及颜色 ）

我要增加一个界面怎么办呐？

只需要在app.json文件中的pages属性中加入【路径+页面名】（写好路径后系统会自动给你建好文件的），“pages”数组中的一个页面为小程序的首页。

4.app.js解析：文件后缀为.js格式当然是JavaScript的代码

看app.js中的几个方法onLaunch，globalData，getUserInfo

1.onLaunch方法是小程序启动的时候执行的方法 （大致是取本地缓存数据logs字段，插入最新时间，然后存储再次存入到缓存中的logs字段里)；

找到菜单栏里的调试->Storage下就可以看到本地缓存的logs字段及数据，你也可以自行添加数据，然后调用wx.getStorageSync(‘key值’) ，就可以获取数据啦

2.globalData全局变量数据

3.getUserInfo自定义的方法用于获取用户信息

（整体的代码意思就是如果用户信息为空就去调用微信的登录接口，登录成功后存储在全局变量* globalData*里，分析两处代码第一处var that = this，that=this,这个是js语法属性，this应该是引用本实例的一个值，它将它赋值给that的原因从下面的代码中可以判断出来js的一些特性。每一个方法是一个封闭函数，它的上一层实例即为this，所以如果一个方法A包含另一个方法B，在A中使用this指的是A的实例，在B中使用this应该是B的实例，即拥有B的A，所以在这里我们为了拿到A中的实例this，必须要赋一个值给that，让B能使用A的实例。在此demo中，上面的this指的是app这个实例，为了在下面的方法中可以使用app的实例，所以赋了that给this。第二处是typeof cb == “function” && cb(this.globalData.userInfo)，代码中两次调用此代码所以要剖析一下，cb是callback的缩写，翻译代码意思就是cb==function，要求cb为方法，并且回调cb方法，剩下的wx.login猜都能猜出来是微信封装好的登录方法）

   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
   }