ReactNative启动白屏解决

本文主要设置andriod的启动屏，ios的感觉不需要这个插件..

下载依赖插件

在项目根目录打开终端运行

npm react-native-splash-screen --save

安装(自动安装或手动安装)

自动安装终端运行：（推荐）

react-native link react-native-splash-screen  
或
rnpm link react-native-splash-screen

手动安装

1.在你的android/settings.gradle 文件中添加下列代码:
include ':react-native-splash-screen'     
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')  

2.在你的android/app/build.gradle 文件中添加 :react-native-splash-screen：
...  
dependencies {  
        ...  
    compile project(':react-native-splash-screen')  
}

3.更新你的MainApplication.Java文件，如下:
public class MainApplication extends Application implements     ReactApplication {  

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {  
    @Override  
    protected boolean getUseDeveloperSupport() {  
        return BuildConfig.DEBUG;  
    }  

    @Override  
    protected List<ReactPackage> getPackages() {  
        return Arrays.<ReactPackage>asList(  
                new MainReactPackage(),  
        new SplashScreenReactPackage()  //添加这一句  
        );  
    }  
};  

@Override  
public ReactNativeHost getReactNativeHost() {  
    return mReactNativeHost;  
}  
}

配置

1.更新你的MainActivity.java 文件如下：

import android.os.Bundle; //需要新添加的？
import com.facebook.react.ReactActivity; //原来有的
import com.cboy.rn.splashscreen.SplashScreen; //需要新添加的？

public class MainActivity extends ReactActivity {  
    //原来有的
    @Override
    protected String getMainComponentName() {
        return "examples";
    }
    //下面是新添加的
       @Override  
        protected void onCreate(Bundle savedInstanceState) {  
               SplashScreen.show(this);    
            super.onCreate(savedInstanceState);  
        }  
    }
}

2.创建一个名为launch_screen.xml 的布局文件来自定义你的启动屏幕

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical" android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="@drawable/launch_screen">  
</LinearLayout>

创建的文件夹和文件路径如下：
splash.png就是你想要设置的启动图图片，

3.在.js文件中使用

import SplashScreen from 'react-native-splash-screen'  

//然后在componentDidMount中调用Splash.hide().
export default class WelcomePage extends Component {
    componentDidMount() {
        SplashScreen.hide();
    }
}

参考网址：https://github.com/crazycodeboy/react-native-splash-screen

OVER

2016-12-10

SVG图标使用

在网页设计中，经常会用掉SVG图标，或者自己画或者别人画，画好的SVG该如何使用，本文对此做点使用介绍

首先这里需要借助第三方图标库icomoon

icomoon入口

网站进入后依次进行如下：

1.点击进入IcoMoon App

2.点击import icons上传本地.svg文件

3.上传后如下图显示

4.shift+鼠标左键选中上传的图标，点击右下角Generate Font

5.显示如下图，记住图标对应的类名,然后点击右下角download下载到本地

类名使用的时候需要icon-add_circle    
<span class='icon-add_circle'></span>

6.把下载下来的font和style.css拷贝到项目目录下

7.使用方式如下，直接引入css文件，用color和font-size改变颜色和大小

<!DOCTYPE html>

Document

OVER

2016-12-09

CSS布局之Stickyfooters

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

这里说2个实现的原理

因为兼容性问题，请在高端浏览器或手机端使用~

1.使用CSS取值函数calc()

注意运算符的前后一定要➕空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;}
        header,footer{
            height: 50px;
            color: red;
            background: #000;
        }
        div{
            background: blue;
            min-height: calc(100vh - 100px);
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div>内容部分</div>
    <footer>底部</footer>
</body>
</html>

效果就不展示了，自己建一个html运行一下吧…

2.使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;}
        body{
            display: flex;
            flex-direction: column;
            min-height: 100vh;   //给body一个最小的高度
        }
        header,footer{
            height: 50px;
            color: red;
            background: #000;
        }
        div{
            background: blue;
            flex:1;  //头部底部固定，中间占据剩余空间
        }
    </style>
</head>
<body>
    <header>头部</header>
    <div>内容部分</div>
    <footer>底部</footer>
</body>
</html>

OVRE

2016-12-08

手机端自适应单位换算

移动端自适应布局之单位换算

首先头部全部需要引入如下文件

flexible.debug.js + flexible_css.debug.js+update.js

方式一

使用cssrem+sublime,布局开始时，设置配置文件（例如：视觉稿640*1136）就设置为64
width:100p + tab 自动生成rem单位

方式二

使用这个源文件还是px，容易修改，上面的源文件都改为rem了
使用gulp转换
npm install gulp-postcss

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');

             //这里的75和cssrem一样根据视觉稿更改
gulp.task('default', function() {
      var processors = [px2rem({remUnit: 75})];
       return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
    });

.vue文件

这个和方式一相同，可以直接在sublime中使用

react native

import {Dimensions} from 'react-native';
//app 只有竖屏模式，所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width;
// UI 默认给图是 640
const uiWidthPx = 640;

function pxToDp(uiElementPx) {
    return uiElementPx *  deviceWidthDp / uiWidthPx;
}
export default pxToDp;


调用方法
import pxToDp from './pxToDp';
<View style={{width:pxToDp(100),height:pxToDp(100)}}></View>

2016-12-07

移动端布局+事件

针对移动端做点自我总结…

杂谈

文本超过一行用…代替

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

文本超过2行用…代替

width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
background-color: burlywood;

animate.css动画库使用

animated 动画库使用方法在对应标签上加上对应类名就好了 
如：class=“animated  flash” 闪烁
默认执行一次，如果需要修改就修改css
 animation-duration: 3000ms;
 animation-direction: alternate;
 animation-iteration-count: infinite;

进入正题

布局

1，html和body必须同时设置宽高100%，下面的div的高才会有100%的高度
2，最外层标签元素也要设置100%宽高，不然直接给内部设置100%,页面会高出一截，导致会有上下晃动
3，来一波meta标签
    <!-- 显示苹果工具栏和菜单栏(默认)，改为no不显示 -->
    <meta content="yes" name="apple-mobile-web-app-capable">  
    <!-- iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； -->  
    <meta content="yes" name="apple-touch-fullscreen">

    <!-- iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） 
    注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方
    （会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
    -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">   
    <!-- 告诉设备忽略将页面中的数字识别为电话号码。 -->
    <meta content="telephone=no" name="format-detection">


    <!-- 苹果手机safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上显示的图标 -->
    <link rel="apple-touch-icon" href="favicon.png">

    <!-- 浏览器网址左侧的图标 -->
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">

事件

在事件出发前记得组件默认拖拽事件
$('body').on('touchmove', function (event) {
    event.preventDefault();
});

JS原生事件

touchstart --- onmousedown
touchmove --- onmousemove
touchend --- onmouseup
需要用事件绑定的第二种形式触发

//如下是获取坐标点以便完成拖拽
$('.drag').on('touchstart',function(e){
    console.log(e.originalEvent.touches[0])
})

var div = document.querySelector('.drag');
div.addEventListener("touchstart", function(e) {
      console.log(e.touches[0]); //方式一
       console.log(e.targetTouches[0]);//方式二
 },false)

touch.js插件

touch我这里有三个版本，有轻到重，功能由简单到复杂
touch1.js, touch2.js, touch3.js

touch1.js

依赖文件：不依赖任何文件
完成功能：上下左右滑动和点击
使用：document.querySelector(‘div’).touch({
tap:function(ev){
//var e = ev || window.event; 不需要了
console.log(‘哎呀，被点击了’,e)
},
swipeUp:function(ev){
console.log(‘哎呀，执行了上滑’,e)
},
swipeDown:function(){
console.log(‘哎呀，执行了下滑’)
},
swipeLeft:function(){
console.log(‘哎呀，执行了左滑’)
},
swipeRight:function(){
console.log(‘哎呀，执行了右滑’)
},
})
JQ使用：如果是用jq就—get()是获取DOM元素，eq()是获取jq对象
$(‘div’).get(0).touch({
tap:function(){
console.log(‘哎呀，被点击了’,e)
},
…
})

touch2.js

依赖文件：依赖jquery，必须在jq之后引入
完成功能：上下左右滑动，单击，双击(doubleTap)，长按(longTap)
使用：

//必须用驼峰标示
$(‘.begin’).doubleTap(function(){
alert(123)
})

touch3.js

依赖文件：不依赖任何文件 //必须全部小写
完成功能：滑动，上下左右滑动，单击，双击(doubletap)，长按(hold)，旋转，缩放
使用：
1，对手势事件库进行全局配置。
touch.config({ //可以不配置，就用默认的就好
tap: true, //tap类事件开关, 默认为true
doubleTap: true, //doubleTap事件开关，默认为true
hold: true, //hold事件开关, 默认为true
holdTime: 650, //hold时间长度
swipe: true, //swipe事件开关
swipeTime: 300, //触发swipe事件的最大时长
swipeMinDistance: 18, //swipe移动最小距离
swipeFactor: 5, //加速因子, 值越大变化速率越快
drag: true, //drag事件开关
pinch: true, //pinch类事件开关
})

2，事件绑定
touch.on( element, types, callback );
//多个手势同个效果，用空格隔开即可
touch.on('#target', 'hold tap doubletap', function(ev){  } 

旋转：
var div1 = document.querySelector('.d');
var angel = 0;//初始角度
touch.on(".d","touchstart",function(e){
    e.startRotate();//开启旋转
    e.preventDefault();//阻止默认事件
})

touch.on(".d","rotate",function(e){
    console.log(e)
    var deg = angel + e.rotation;//计算当前旋转角度
    div1.innerHTML = deg;
    if(e.fingerStatus == "end"){//判断手指的状态，如果手势已停止
        angel = deg;
    }
    div1.style.transform = "rotate("+deg+"deg)";
})

缩放：
touch.on(".d",'pinch',function(e){
    alert(e.scale)  //这是缩放倍数
})    

3，解除某元素上的事件绑定
touch.off( element, types, callback )    

4，触发事件
touch.trigger(element, type);

关于touch3.js，更多详情请参考这位的文章：touch3.js

2016-12-06

面向对象编程

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有`class`（类）。

那么，如果我们要把”属性”（property）和”方法”（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

一、生成实例对象的原始模式

var Cat = {
    name : '',
    color : ''
}

现在，我们需要根据这个原型对象的规格（schema），生成两个实例对象。

var cat1 = {}; // 创建一个空对象
    cat1.name = "大毛"; // 按照原型对象的属性赋值
    cat1.color = "黄色";
var cat2 = {};
    cat2.name = "二毛";
    cat2.color = "黑色";

好了，这就是最简单的封装了，把两个属性封装在一个对象里面。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

二、原始模式的改进

我们可以写一个函数，解决代码重复的问题。

function Cat(name,color) {
    return {
        name:name,
        color:color
    }
}

然后生成实例对象，就等于是在调用函数：

var cat1 = Cat("大毛","黄色");
var cat2 = Cat("二毛","黑色");

这种方法的问题依然是，`cat1`和`cat2`之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

三、构造函数模式

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

所谓”构造函数”，其实就是一个普通函数，但是内部使用了`this`变量。对构造函数使用`new`运算符，就能生成实例，并且`this`变量会绑定在实例对象上。

比如，猫的原型对象现在可以这样写，

function Cat(name,color){
    this.name=name;
    this.color=color;
}

我们现在就可以生成实例对象了。

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.name); // 大毛
alert(cat1.color); // 黄色

这时`cat1`和`cat2`会自动含有一个`constructor`属性，指向它们的构造函数。

alert(cat1.constructor == Cat); //true
alert(cat2.constructor == Cat); //true

Javascript还提供了一个`instanceof`运算符，验证原型对象与实例对象之间的关系。

四、构造函数模式的问题

构造函数方法很好用，但是存在一个浪费内存的问题。

请看，我们现在为`Cat`对象添加一个不变的属性`type`（种类），再添加一个方法`eat`（吃）。那么，原型对象Cat就变成了下面这样：

function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "猫科动物";
    this.eat = function(){alert("吃老鼠");};
}

还是采用同样的方法，生成实例：

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，`type`属性和`eat()`方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

alert(cat1.eat == cat2.eat); //false

能不能让`type`属性和`eat()`方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

五、 Prototype模式

Javascript规定，每一个构造函数都有一个`prototype`属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在`prototype`对象上。

function Cat(name,color){
    this.name = name;
    this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};

然后，生成实例

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

这时所有实例的`type`属性和`eat()`方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率

　　alert(cat1.eat == cat2.eat); //true

六、 Prototype模式的验证方法

为了配合`prototype`属性，Javascript定义了一些辅助方法，帮助我们使用它。

6.1 isPrototypeOf()

这个方法用来判断，某个`proptotype`对象和某个实例之间的关系。

alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()

每个实例对象都有一个`hasOwnProperty()`方法，用来判断某一个属性到底是本地属性，还是继承自`prototype`对象的属性。

alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false

6.3 in运算符

`in`运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

alert("name" in cat1); // true
alert("type" in cat1); // true

`in`运算符还可以用来遍历某个对象的所有属性。

for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

2016-12-02

学习Javascript闭包

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

1. 变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

var n=999;
function fn(){
alert(n)
}
fn()

另一方面，在函数外部自然无法读取函数内的局部变量。

function f1(){
var n=999;
}
alert(n); // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

function f1(){
n=999;
}
f1();    
alert(n); // 999

2. 如何从外部读取局部变量？

function f1(){

    var n=999;

    function f2(){
        alert(n);//999
    }

}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

function f1(){

    var n=999;

    function f2(){
        alert(n); 
    }

    return f2;

}

var result=f1();

result(); // 999

3. 闭包的概念

各种专业文献上的”闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

4. 闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

function f1(){

var n=999;

nAdd=function(){n+=1}

function f2(){
    alert(n);
}

return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是”nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

2016-11-30

Javascript的this用法

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

function test(){
    this.x = 1;
}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

　function test(){
    this.x = 1;
    alert(this.x);
}
test(); // 1

为了证明this就是全局对象，我对代码做一些改变：

var x = 1;
function test(){
    alert(this.x);
}
test(); // 1

运行结果还是1。再变一下

var x = 1;
function test(){
    this.x = 0;
}
test();
alert(x); //0

情况二：作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

function test(){
    alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

情况三作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

function test(){
    this.x = 1;
}
var o = new test();
alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

var x = 2;
function test(){
    this.x = 1;
}
var o = new test();
alert(x); //2

运行结果为2，表明全局变量x的值根本没变

情况四 apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

var x = 0;
function test(){
    alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为

o.m.apply(o); //1

运行结果就变成了1，证明了这时this代表的是对象o。

2016-11-28

php缓存文件

PHP缓存文件

对前端ajax上传的文件进行缓存，并保存到数据库

HTML

<body>
    名字：<input type="text" id="username"><br>
    密码：<input type="text" id="pwd"><br>
    文件：<input type="file" id="file"><br>
    <button onclick="ajax()">提交</button>


    <script>
        function ajax(){
            var username = $('#username');    
            var psd = $('#psd');
            var file = $('#file')[0]['files'][0];    
            console.log( $('#file'))

            var form = new FormData();
            form.append('username',username);
            form.append('pwd',pwd);
            form.append('file',file);

            $.ajax({
                type:'post', //传输数据的格式
                url:'ajax.php',    //请求路径
                async:true, //true 异步  默认
                data:form,  //上传表单数据
                //如果上传文件下面2个必须要设置为false
                processData:false,    
                contentType:false,
                success:function(data){
                    console.log(data)
                }
            })
        }
    </script>
</body>

PHP

$data['username'] = $_POST['username'];
$data['password'] = $_POST['pwd'];

//处理文件
if(!file_exists('./uploads')){
    mkdir('uploads');
}
$tmpPath = $_FILES['img']['tmp_name'];  //获取文件路径
$newName = $_FILES['img']['name']; //获取文件的名字
$res = move_uploaded_file($tmpPath,"uploads/{$newName}"); //原名上传到指定文件夹

if($res){
    $data['imgurl'] ="uploads/{$newName}";
    echo "上传成功";
}

//存储数据
$data = json_encode($data);
$reslut = file_put_contents('data.txt',$data);
if($reslut){
    echo '数据存储成功';
}else{
    echo '数据存储失败';
}

2016-11-27

数据库基本操作二

php5.5以下用mysql来连接（面向过程），php5.5以上使用mysqli来连接（面向过程，面向对象）;

连接数据库

面向过程

//默认用户名都是root，我的密码为空,四参是要连接的数据库
$link=mysqli_connect('localhost','root','','mydb');
if(mysqli_errno($link)){
    echo mysqli_error($link);
}else{
    echo '连接数据库成功<br/>';
}
//插入字段
$sql = 'INSERT INTO users(username,age,pwd) VALUES("张飞",99,123456)';

//设置编码格式  utf8不能写成utf-8
//方式一 常用        
mysqli_query($link,'set names utf8');
//方式二
mysqli_set_charset($link,'utf-8');

//执行sql语句
// $res = mysqli_query($link,$sql);
// if($res){
//     echo "添加成功";
// }else{
//     echo "添加失败";
// }

$name = '马云2';
$age = 38;
$pwd = 44444;                                   //注意这里有引号
$sql = "INSERT INTO users(username,age,pwd)VALUES('$name',$age,$pwd)";
// echo $sql;die;
// addData2($sql);

数据库添加函数

//对添加进行函数封装--面向对象
function addData($sql){
    $mysqli = new mysqli('localhost','root','','mydb');
    if($mysqli->errno){
        echo $mysqli->error;
    };
    //设置编码
    $mysqli->query('set names utf8');
    $res = $mysqli->query($sql);
    if($res){
        return true;
    }else{
        return false;
    }
}

//对添加进行函数封装--面向过程
function addData2($sql){
    $link = mysqli_connect('localhost','root','','mydb');
    // if(mysqli_errno($link)){
    //     echo mysqli_error($link);
    // }else{
    //     echo '连接数据库成功<br/>';
    // }
    //设置编码
    mysqli_query($link,'set names utf8');
    //执行
    $res = mysqli_query($link,$sql);
    if($res){
        return ture;
    }else{
        return false;
    }
}

面向对象

// $mysqli = new mysqli('localhost','root','','mydb');
// if($mysqli->errno){
//     echo $mysqli->error;
// }else{
//     echo '连接数据库成功了';
// }



$sql = "UPDATE users SET username='马云3' WHERE id = 21";
// update($sql);

$sql = "SELECT * FROM users";
$res = getlist($sql);
echo "<pre>";
print_r($res);
echo "</pre>";

$sql = "DELETE FROM users WHERE id=8";
// remove($sql);

获取数据库函数

function getlist($sql){
    $link = mysqli_connect('localhost','root','','mydb');
    //设置编码
    mysqli_query($link,'set names utf8');
    //执行
    $res = mysqli_query($link,$sql);
    //获取
    $list = array();
    while($li = mysqli_fetch_assoc($res)){
        $list[] = $li;
    }

    return $list;
}

其他数据库函数

//面向过程  后面的封装都是一样的，就桑传入的参数不一样
function update($sql){
    $link = mysqli_connect('localhost','root','','mydb');
    //设置编码
    mysqli_query($link,'set names utf8');
    //执行
    $res = mysqli_query($link,$sql);
    if($res){
        echo '更新成功';
    }else{
        echo '更新失败';
    }
}

function remove($sql){
    $link = mysqli_connect('localhost','root','','mydb');
    //设置编码
    mysqli_query($link,'set names utf8');
    //执行
    $res = mysqli_query($link,$sql);
    if($res){
        echo '删除成功';
    }else{
        echo '删除失败';
    }
}


// function update($sql){
//     $link = mysqli_connect('localhost','root','','mydb');
//     //设置编码
//     mysqli_query($link,'set names utf8');
//     //执行
//     $res = mysqli_query($link,$sql);
//     if($res){
//         echo '更新成功';
//     }else{
//         echo '更新失败';
//     }
// }

OVER

2016-11-23

本文主要设置andriod的启动屏，ios的感觉不需要这个插件..

下载依赖插件

安装(自动安装或手动安装)

配置

OVER

首先这里需要借助第三方图标库icomoon

网站进入后依次进行如下：

OVER

这里说2个实现的原理

1.使用CSS取值函数calc()

2.使用flex布局

OVRE

移动端自适应布局之单位换算

首先头部全部需要引入如下文件

方式一

方式二

.vue文件

react native

针对移动端做点自我总结…

杂谈

进入正题

布局

事件

JS原生事件

touch.js插件

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

那么，如果我们要把”属性”（property）和”方法”（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

一、 生成实例对象的原始模式

一、 生成实例对象的原始模式

现在，我们需要根据这个原型对象的规格（schema），生成两个实例对象。

好了，这就是最简单的封装了，把两个属性封装在一个对象里面。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

二、 原始模式的改进

我们可以写一个函数，解决代码重复的问题。

然后生成实例对象，就等于是在调用函数：

这种方法的问题依然是，cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

三、 构造函数模式

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

比如，猫的原型对象现在可以这样写，

我们现在就可以生成实例对象了。

这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数。

Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。

四、构造函数模式的问题

构造函数方法很好用，但是存在一个浪费内存的问题。

请看，我们现在为Cat对象添加一个不变的属性type（种类），再添加一个方法eat（吃）。那么，原型对象Cat就变成了下面这样：

还是采用同样的方法，生成实例：

能不能让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

五、 Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

然后，生成实例

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率

六、 Prototype模式的验证方法

为了配合prototype属性，Javascript定义了一些辅助方法，帮助我们使用它。

6.1 isPrototypeOf()

这个方法用来判断，某个proptotype对象和某个实例之间的关系。

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

6.3 in运算符

in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

in运算符还可以用来遍历某个对象的所有属性。

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

另一方面，在函数外部自然无法读取函数内的局部变量。

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

各种专业文献上的”闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有`class`（类）。

一、生成实例对象的原始模式

一、生成实例对象的原始模式

二、原始模式的改进

这种方法的问题依然是，`cat1`和`cat2`之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

三、构造函数模式

所谓”构造函数”，其实就是一个普通函数，但是内部使用了`this`变量。对构造函数使用`new`运算符，就能生成实例，并且`this`变量会绑定在实例对象上。

这时`cat1`和`cat2`会自动含有一个`constructor`属性，指向它们的构造函数。

Javascript还提供了一个`instanceof`运算符，验证原型对象与实例对象之间的关系。

请看，我们现在为`Cat`对象添加一个不变的属性`type`（种类），再添加一个方法`eat`（吃）。那么，原型对象Cat就变成了下面这样：

能不能让`type`属性和`eat()`方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

Javascript规定，每一个构造函数都有一个`prototype`属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在`prototype`对象上。

这时所有实例的`type`属性和`eat()`方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率

为了配合`prototype`属性，Javascript定义了一些辅助方法，帮助我们使用它。

这个方法用来判断，某个`proptotype`对象和某个实例之间的关系。

每个实例对象都有一个`hasOwnProperty()`方法，用来判断某一个属性到底是本地属性，还是继承自`prototype`对象的属性。

`in`运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

`in`运算符还可以用来遍历某个对象的所有属性。

情况三作为构造函数调用