从零开始的微信小程序（1）

一、初始化一下脑子（适合小白）

关于为啥写这玩意儿

其实博主只是写过一个小程序的菜鸟，目前还在读大四，然后最近学校准备新开一个微信小程序的项目，带几个学弟学妹一起，所以主要是给他们看的，当然如果屏幕前的老哥愿意指导我一下欢迎联系我 yc@lcx.cc （跟帅气的核总要的，网安小白）。

默认技能点

懂点HTML把，知道啥是标记语言；了解CSS，反正不会了多百度几次就好了；JS有点基础就好，至少（深思ing…）知道ES5 ES6是啥，this的指向问题，运行的同步异步问题，还有毁掉函数！（一个大神博客的梗）乌拉乌拉，大概就这么多吧！

第一步，打开IDE

首先我们分析已有的结构：
pages下存放我们的每一个页面，脚本文件.js；.json暂时不用管；.wxml类似html；.wxss类似css，这四个文件组成一个页面（逻辑、界面、样式）。
utils放一些常用的工具类，默认util.js有一个获取当前日期的方法还挺好用。
app开头的文件：app.js小程序启动的入口，里面是小程序初始化的逻辑；app.wxss全局样式；app.json小程序的配置，"pages"声明页面路径；"window"定穿啥衣服。

我们看一下里面的代码

从入口开始，整个是一个app({})，里面一堆是一个对象参数，有自己的onLaunch方法和globalData的属性。
有点抽象，这样，我们在index.js中打印app

const app = getApp()//在page()外写，获取app.js的示例
console.log(app)//写在onload()里面，加载时执行

重新编译，打开控制台看看发生了什么！

还比较熟悉吧，globalData是定义的存全局变量的地方，重写了onLaunch()方法，里面具体是啥一会儿再说，然后默认有onHide()、onShow()、onUnlaunch()。
我们可以在app.js加一些自己的东西：

 test: {
    user:'yucheng',
    fc:function(){
      console.log('虞诚好帅')
    }
  },
  fcTest:function(){
    console.log('虞诚好丑')
  },

增加了一个属性，一个方法，同时在index.js再加一行

    app.test.fc()//加在之前的console后面就好

编译打印：

可以看到我们的属性方法都已经进去了，同时test里面的fc方法也成功调用，我们可以在这里面写一堆方法，但他们是如何运行的还是要看开发文档啦https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
这样就不抽象了吧，同时大家一定要养成经常看开发文档的习惯。

歇会儿，喝口水咋们继续

接下来看看这个app.js里面写了点啥（不懂不怕，能懂最好）
emmmmm最开始好像是没有箭头函数的，现在有了我就翻译成ES5把

知识储备

• 利用 || 赋值：

var a = b || c

b是true，a=b，b是false，a=c
更多内容请访问：
————————————————
版权声明：本文为CSDN博主「nayi_224」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/nayi_224/article/details/80437329

• 微信缓存机制
  这里就只说见过的了，具体的还是看文档
  wx.setStorageSync(‘key’,‘value’)
  wx.getStorageSync(‘key’)
  有Sync，是同步方法，wx是全局对象，所以在哪个JS文件里面都可以调用
• 箭头函数
  还记得最开始在app.js加的test吗

//ES5
 test: {
    user:'yucheng',
    fc:function(){
      console.log('虞诚好帅')
    }
  }

//ES6箭头函数
  test: {
    user: 'yucheng',
    fc:  () => {
      console.log('虞诚好帅')
    }
  }

箭头函数其实就是函数表达式一个更简洁的写法，避免层级关系引起的频繁hack，具体内容很多大佬都写的很详细，但我觉得没有必要去扣，有需要再了解就可以。

• 回调函数
  跟箭头函数一样简单了解一下就好，之前看的一篇博客说过，函数也是对象，可以被存储在变量中，作为参数被其他函数调用，不过是这个参数由代码块（回调函数）组成，当然这里不谈涉及this的时候apply、call操作，高阶到超纲啦。

//app.js
App({
  onLaunch: function () {
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    wx.login({
      success:function(res){}
    })
    var _this = this
    wx.getSetting({
      success:function(res){
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success:function(res){
              _this.globalData.userInfo = res.userInfo
              
              //判断userInfoReadyCallback这个方法是否被创建，被创建->true->执行if代码块
              //运行userInfoReadyCallback
              //userInfoReadyCallback的声明在index.js
              //这个回调如果被创建说明index.js里面的加载更快，而且index里面没有数据，在这边把数据补加进去
              if (_this.userInfoReadyCallback) {
                _this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

//index.js
const app = getApp()
Page({
  data: {												//页面需要的数据
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  bindViewTap: function() {										//wxml那边绑定的点击事件
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {										//页面初始化从这开始
    if (app.globalData.userInfo) {					//判断有没有用户数据，有的话直接从全局变量拿过来
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){							//全局变量没有，看看微信版本是否允许这样操作
      app.userInfoReadyCallback = function(res){			//版本允许，声明回调函数，注意运行到这边的时候
        this.setData({										//index.js里面是没有用户数据的，等app.js运行这个回调
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      wx.getUserInfo({
        success:function(res){
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

好难写呀
index.wxml里面那些翻文档吧，之后写点自定义组件再细说那个 = =
之后有规划的写应该会写好，会一直更新到这个项目用Vue写完，过程中简单的高阶的都有。
感觉没啥干货，分享一个博客吧https://github.com/yangkean/blog/issues/9

大家中秋快乐啊，快乐恰饭去了