一、登录微信测试公众品平台，修改网页授权基本信息，输入授权回调页面域名（自己的域名）。

然后重新建立一个tp框架 编写方法如图：

在公共模块中新建function.php

在自己的手机端访问，就能获取access_token;

在 JavaScript 中

1. call、apply 和 bind 是 Function 对象自带的三个方法，都是为了改变函数体内部 this 的指向。
2. call、apply 和 bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文。
3. call、apply 和 bind 三者都可以利用后续参数传参。
4. bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用 。

举个栗子

function fruits() {}

fruits.prototype = {
   color: 'red',
   say: function() { console.log('My color is ' + this.color); 
   }
} var apple = new fruits;
apple.say(); // 此时方法里面的this 指的是fruits // 结果： My color is red
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

如果我们有一个对象 banana= {color : 'yellow'} ,我们不想重新定义 say 方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法：

var banana = { color: 'yellow' };
apple.say.call(banana); // 此时的this的指向已经同过call（）方法改变了，指向的是banana，this.color就是banana.color='yellow'; // 结果是My color is yellow 

apple.say.apply(banana); // 同理，此时的this的指向已经同过apply（）方法改变了，指向的是banana，this.color就是banana.color ='yellow'; // 结果是My color is yellow

apple.say.apply(null); // null是window下的，此时，this 就指向了window ，但是window下并没有clolr这个属性，因此this.clolr就是window.color=undefined; // 结果是My color is undefined
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

    

call 和 apply 的区别

二者的作用完全一样，知识接受 参数 的方式不太一样。

call 是把参数按顺序传递进去，而 apply 则是把参数放在 数组 里面。

var array1 = [12,'foo',{name:'Joe'},-2458]; var array2 = ['Doe' , 555 , 100]; Array.prototype.push.call(array1, array2); // 这里用 call 第二个参数不会把 array2 当成一个数组,而是一个元素 // 等价于 array1.push("'Doe' , 555 , 100"); // array1.length=5; Array.prototype.push.apply(array1, array2); // 这里用 apply 第二个参数是一个数组 // 等价于:  array1.push('Doe' , 555 , 100); // array1.length=7;
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

    

类（伪）数组使用数组方法

var divElements = document.getElementsByTagName('div'); // 虽然 divElements 有 length 属性，但是他是一个伪数组，不能使用数组里面的方法 Array.isArray(divElements);// false var domNodes = Array.prototype.slice.call(document.getElementsByTagName('div')); // 将数组对象 Array 里的 this 指向伪数组 document.getElementsByTagName('div')，  // slice() 方法可从已有的数组中返回选定的元素，不传参数是，返回整个数组  Array.isArray(domNodes);// true
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

验证一个对象的类型可以用

Object.prototype.toString.call(obj)
    


        

            1
        

    

bind() 方法

bind() 方法会创建一个 新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind() 方法的第一个参数 作为 this，传入 bind() 方法的 第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

注意：bind()方法创建的函数不会立即调用，在下面的例子中，最后 func（） 才调用了函数，这是它与 call和apply的区别。

var bar = function(){ console.log(this.x);
} var foo = {
    x:3 }
bar(); // undefined var func = bar.bind(foo); //此时this已经指向了foo，但是用bind（）方法并不会立即执行，而是创建一个新函数，如果要直接调用的话 可以bar.bind(foo)（） func(); // 3
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

在 Javascript 中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

var bar = function(){ console.log(this.x);
} var foo = {
  x:3 } var sed = {
  x:4 } var func = bar.bind(foo).bind(sed);
func(); //3 var fiv = {
  x:5 } var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3

以下是阮一峰老师关于Flex的博客  。在此感谢他让我get一项新技能！

Flex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

1、色子数：1

思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 200px;  height: 200px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  justify-content: center;  align-items:center;  }  .main >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
</div>
</body>
</html>

思路：竖列布局且在主轴方向采用justify-content的两端对齐布局，这样两个圆点会在左边呈现，然后采用align-items让其居中

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 200px;  height: 200px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  flex-direction: column;  justify-content: space-between;  align-items:center;  }  .main >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

思路：用到align-self属性让第二个和第三个圆点有自己的属性设置，分别在纵轴方向上居中和低端对齐

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  }  .main >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .item:nth-child(2){  align-self:center;  }  .item:nth-child(3){  align-self:flex-end;  }  </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

思路：先竖着放两行圆点，每行圆点里横着放两个圆点，所以最外层父元素设置align，里面的父元素设置justify-content

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  flex-wrap:wrap;  align-content:space-between;  }  .column >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .column{  flex-basis:100%;  display:flex;  justify-content: space-between;  }  </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</body>
</html>

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  flex-wrap:wrap;  align-content:space-between;  }  .column > div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .column{  flex-basis:100%;  display:flex;  justify-content: space-between;  }  .column:nth-child(2){  justify-content: center;  }  </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
    <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</body>
</html>

思路：跟四点的一样，先竖放三行在每行横放两个圆点

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 15px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  align-content:space-between;  flex-wrap:wrap;  }  .column > div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .column{  flex-basis:100%;  display:flex;  justify-content: space-between;  }  </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>

</div>
</body>
</html>

Facebook是一个连接全球数十亿人的社交工具。 面对这一视觉系统，设计师遇到了前所未有的挑战

虽然每个工具都能很好地履行其预期的功能，但它们并没有提供令人满意的整体经验。设计的UI模式，使用颜色和图像每个产品都是不同的。整体看起来不仅过时，而且与Facebook的这些专业人士在个人生活中使用也脱离联系。

我们希望制作出一致，令人满意的用户体验，值得我们的商业产品为公司和人们喜欢。我们还希望通过改进他们所依赖的工具来展示我们对这些业务的承诺。

应用程序缓存为应用带来的三大优势：

离线访问应用

速度更快——已缓存资源加载的更快

减少服务器负载——浏览器只从服务器下载更新过或更改过的资源

浏览器支持情况：主流浏览器都支持，IE要10以上的版本

HTML5通过在html文件添加manifest属性，启用应用程序缓存

例子：

<!DOCTYPE HTML>

<htmlmanifest="demo.appcache">

...

</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

Mainifest文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

例子：

CACHE MANIFEST

# 2012-02-21 v1.0.0

CACHE:

cached.js

cached.css

NETWORK:

uncached.js

uncached.css

FALLBACK:

index.html 404.html

CACHE MANIFEST 写在manifest文件开头，是必须的

CACHE作用是标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径

NETWORK可选，这一部分是要直接读取的文件，可以使用通配符 * 。

FALLBACK可选，指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。

在线的情况下，浏览器发现html头部有manifest属性,会请求manifest文件，如果是第一次访问应用，浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过应用并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

注意：

1.服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。

2.manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。

3.如果更新中某个资源下载失败，则整个更新就视作失败，浏览器会依旧采用原来的资源

4.站点离线存储的容量限制是5M

浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

window.applicationCache对象常用事件

1.   oncached:当离线资源存储完成之后触发这个事件

2.   onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件

3.   ondownloading:当浏览器开始下载离线资源的时候会触发这个事件

4.   onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。

5.   onupdateready:当浏览器对离线资源更新完成之后会触发这个事件

6.   onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

最后一点是该特性已经从web标准删除，可能在未来某个时间停止，推荐使用Service Workers 代替。