发表于   |   分类于   |  

nodejs简介

  • nodejs能提供静态文件服务

    • 网页
    • 纯文本
    • 图片
    • 前端JavaScript代码
    • css样式表文件
    • 媒体文件
    • 字体文件

  • nodejs能提供http服务

    • api接口
    • 中间件

  • nodejs能提供tcp(socket)服务

安装及启动

安装

1 安装node软件
2 安装express生成模板

1
npm install -g express-generator

3 安装express

1
npm install -g express

4 安装nodemon调试模块

1
npm install -g nodemon

5 使用模板创建nodejs工程

1
express [工程名]

然后执行npm install安装第三方模块。

创建工程后出现如下目录

1
2
3
4
5
6
7
+bin
 -www  //执行脚本
+public 
+routes 
+view     //静态页面
-app.js   //创建express实例
-package.json

启动服务

1
npm start

具体使用

使用express的静态文件服务

使用express的静态服务的中间件，直接使用
use方法使用中间件
public目录当做我们的静态文件目录
/直接使用

1
app.use(express.static(path.join(__dirname, 'public')));

使用express的路由

  • 将不同的请求。分配给响应的函数
  • 区分：路径，请求方法

三种方法：

  • path方式 直接get
1
2
3
app.get('/login',function(){

})
  • Router方式

比如一组路由，都是post下面的

1
2
3
4
5
6
var Router = express.Router();
Router.get('/add',function(req,res){
})
Router.get('/list',function(req,res){
})
app.user('post',Router);
  • route方式

针对一个路由，编写不同方法的不同处理。
不如针对以上路由的get请求方法

1
2
3
app.route('article').get(function(req,response)
{
}).post(function(req,response))

带参数路由

1
2
3
4
5
6
7
app.param('newsId',function(req,res,next,newsId){
req.nresId = newsId;
});

app.get('/news/:newsId,function(req,response){
req.end('newsId:'+req.newsId)
});

发表于   |   分类于   |  

v-21 ripple配合selector，state_enabled不起作用

ripple是android L之后新增的水波纹特效，当我们的按钮增加了特效后，state_enabled=false，让按钮置为灰色，不起作用了下面贴出代码

drawable btn_green.xml

1
2
3
4
5
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@color/pressed"></item>
    <item android:state_enabled="false" android:drawable="@color/dark_gray"></item>
    <item  android:drawable="@color/green"/>
</selector>

drawable-21 btn_green.xml

1
2
3
4
5
6
7
8
9
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/pressed">
    <item>
        <selector >
            <item android:state_enabled="true" android:drawable="@color/green"></item>
            <item android:state_enabled="false" android:drawable="@color/dark_gray"></item>
        </selector>
    </item>
</ripple>

也就是说在新版的selector里面，没有默认状态，我们必须手动填写android:state_enabled="true"

Activity has leaked window that was originally added

报错但并不crash

原因：

因为使用了Dialog，但是未在activity销毁时，调用dismiss（）。

发表于   |   分类于   |  

前言

因为在开发环境使用了webpack的动态加载，所以在正式部署的生产环境，配置文件要做相应的调整。

目录

首先贴出我的文件目录结构

1
2
3
4
5
6
7
8
9
10
11
+ 工程名
  + app        //开发文件目录
     - mian.js //js入口
  + build      //生产环境打包地址
     - build.js //打包之后的文件
     - index.html
  + dev         //开发环境打包地址
     - dev.js  //打包之后的文件
     - index.html 
  + webpack.config.js   //开发配置文件
  + webpack.config.prod.js  //生产配置文件

配置文件

packkage.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "name": "7pluszhifu",
  "version": "1.0.0",
  "description": "7+的付费工程",
  "main": "./index.js",
  "scripts": {
    "build": "webpack --config webpack.config.prod.js -p --content-base build",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base dev"
  },
  "author": "hammercui",
  "license": "ISC",

  "dependencies": {
    "babel-runtime": "^6.5.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "amazeui-react": "^1.0.1",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "material-ui": "^0.15.0-alpha.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-tap-event-plugin": "^0.2.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

开发环境配置文件webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
 * Created by hammer on 2016/3/26.
 * 配置的打包文件
 */
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common','common.js');
var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
    //插件项
    plugins: [
        //commonsPlugin,
        new webpack.NoErrorsPlugin()
    ],
    //页面入口文件配置
    //entry: {mian : './app/main.js'},
    entry:[
        'webpack/hot/dev-server',
        path.resolve(__dirname,'app/main.js')
    ],

    //入口文件输出配置
    //output: {path: __dirname+'_build_', filename: '[name].js'}
    output:{
        path: path.resolve(__dirname,'dev'),
        filename: 'dev.js'
    },

    devServer: {
        inline: true,
        port: 7777
    },

    module: {
        //加载器配置
        loaders: [
            //LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，
            // 从而运行时可以通过style标签将其应用到最终的浏览器环境
            {test: /\.less/, loader: 'style-loader!css-loader!less-loader'},
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理 jsx-loader可以添加?harmony参数使其支持ES6语法
            { test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query:{
                    presets:['es2015','react']
                } //备注：es2015用于支持ES6语法，react用于解决render()报错的问题
            },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ],
        noParse: [pathToReact]
    },
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        //root: 'E:/github/flux-example/app', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js',
            //'react': pathToReact,
           // 'react-dom':pathToReactDom,
        }
    }
};

生产环境配置文件webpack.config.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
 * Created by hammer on 2016/4/4.
 * 生产环境配置文件
 */
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common','common.js');
var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
    //插件项
    plugins: [
        //commonsPlugin,
        new webpack.NoErrorsPlugin()
    ],
    //页面入口文件配置
    //entry: {mian : './app/main.js'},
    entry:[
        path.resolve(__dirname,'app/main.js')
    ],

    //入口文件输出配置
    //output: {path: __dirname+'_build_', filename: '[name].js'}
    output:{
        path: path.resolve(__dirname,'build'),
        filename: 'build.js'
    },

    module: {
        //加载器配置
        loaders: [
            //LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，
            // 从而运行时可以通过style标签将其应用到最终的浏览器环境
            {test: /\.less/, loader: 'style-loader!css-loader!less-loader'},
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理 jsx-loader可以添加?harmony参数使其支持ES6语法
            { test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query:{
                    presets:['es2015','react']
                } //备注：es2015用于支持ES6语法，react用于解决render()报错的问题
            },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ],
        noParse: [pathToReact]
    },
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        //root: 'E:/github/flux-example/app', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js',
            //'react': pathToReact,
            // 'react-dom':pathToReactDom,
        }
    }
};

打包生成js文件

开发环境

执行npm run dev
然后浏览器输入http：//localhost：7777/

生产环境

执行npm run build，会在build目录生成build.js文件

发表于   |   分类于   |  

android studio版本号：2.1.5 preview
jdk 1.8
sdk: 6.0

开启 instant run支持

这个类似于swift的热加载，大大改善开发效率
setting->Build,Execution,Deployment ->Instant Run

开启java8的支持

android studio从2.1开启改善了对java8的支持，好开森，可以放弃gradle-retrolambda了
re
参考地址在 Android Studio 中支持 Java 8

app.gradle文件增加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
android{
···
	defaultConfig {
    ...
	//要想使用java8，必须使用jack编译
    jackOptions {
      enabled true
    }
  }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

···
}

另外别忘了下载并修改buildTollersion 24.0.rc2

注意事项

现阶段
com.android.tools.build:gradle:2.1.0-alpha
buildToolsVersion "24rc2"
build gradle时还是比较卡的，不推荐尝鲜，我尝试了一下又换回
gradle-retrolambda了

支持instant和不支持instant的地方

发表于   |   分类于   |  

参考文献

React入门教程 - 组件生命周期

React Native 中组件的生命周期:这个是带图详解版本

首先上图
rn组件生命周期

  • componentWillMount（）：组件加载。

componentWillMount会在组件render()之前执行，永远只执行一次。类似于Android的onCreat

  • componentDidMount():组件加载。

这个方法在组件加载之后执行，这时组件已经生成了对应的DOM结构，可以通过geDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中执行setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  • componentWillReceiveProps（object nextProps）：组件更新。

这个方法在初始化render时不会被调用。旧的props可以通过this.props来获取。在这个函数内调用this.setState()方法不会增加一次新的render.

  • boolean shouldComponentUpdate(object nextProps, object nextState)：组件更新。

返回一个布尔值。在组件接收到新的props或者state时被执行。在初始化时或者使用forceUpdate时不被执行。可以在你确认不需要更新组件时使用。

  • componentWillUpdate(object nextProps, object nextState):组件更新.

在组件接收到新的props或者state但还没有render时被执行。在初始化时不会被执行。

一般用在组件发生更新之前。

  • componentDidUpdate(object prevProps, object prevState):组件更新.

在组件完成更新后立即执行。在初始化时不会被执行。一般会在组件完成更新后被使用。例如清除notification文字等操作。

  • componentWillUnmount():组件Unmounting.

在组件从DOM unmount后立即执行.主要用来执行一些必要的清理任务。例如清除setTimeout等函数，或者任意的在componentDidMount创建的DOM元素。

发表于   |   分类于   |  

安装

方法1 一一安装

1
2
3
4
5
6
npm install react react-dom babel-preset-react --save-dev
npm install babel-preset-es2015 --save-dev
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev

方法2 批量安装

package.json添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 "dependencies": {
   "babel-runtime": "^6.5.0",
   "react": "^0.14.7",
   "react-dom": "^0.14.7"
 },


 "devDependencies": {
"amazeui-react": "^1.0.1",
   "babel-core": "^6.7.4",
   "babel-loader": "^6.2.4",
   "babel-preset-es2015": "^6.6.0",
   "babel-preset-react": "^6.5.0",
   "css-loader": "^0.23.1",
   "material-ui": "^0.15.0-alpha.2",
   "react": "^0.14.7",
   "react-dom": "^0.14.7",
   "react-hot-loader": "^1.3.0",
   "react-tap-event-plugin": "^0.2.2",
   "style-loader": "^0.13.1",
   "url-loader": "^0.5.7",
   "webpack": "^1.12.14",
   "webpack-dev-server": "^1.14.1"
 }

然后执行npn install

配置webpack

工程截图

在工程目录下新建webpack.config.js文件，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/**
 * Created by hammer on 2016/3/26.
 * 配置的打包文件
 */
var webpack = require('webpack');
//var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var path = require('path');
console.log(__dirname);

module.exports = {
    //插件项
    plugins: [
		//commonsPlugin,
		new webpack.NoErrorsPlugin()
	1],
    //页面入口文件配置
    //entry: {mian : './app/main.js'},
    entry:path.resolve(__dirname,'./app/main.js'),
    //入口文件输出配置
    //output: {path: __dirname+'_build_', filename: '[name].js'}
    output:{
        path: path.resolve(__dirname,'./build'),
        filename: 'build.js'
    },
    module: {
        //加载器配置
        loaders: [
            //LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，
            // 从而运行时可以通过style标签将其应用到最终的浏览器环境
            {test: /\.less/, loader: 'style-loader!css-loader!less-loader'},
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理 jsx-loader可以添加?harmony参数使其支持ES6语法
            { test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query:{
                    presets:['es2015','react']
                } //备注：es2015用于支持ES6语法，react用于解决render()报错的问题
            },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        //root: 'E:/github/flux-example/app', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

执行webpack命令进行打包，打包完成就会在build目录出现build.js文件，编译成功。

编译并启动

修改package.json文件

1
2
3
4
"scripts": {
    "build": "webpack",
	"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },

index.html文件如下

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content"></div>
<script src="build.js"></script>
</body>
</html>

可修改服务的端口号webpac.config.js

1
2
3
4
devServer: {
       inline: true,
       port: 7777
   },

运行npm run dev
在浏览器打开http://localhost:7777预览

启用webpack-dev-server进行动态开发

1 在配置中增加一个入口点,修改webpack.config.js文件

1
2
3
4
entry:[
        'webpack/hot/dev-server',
        path.resolve(__dirname,'app/main.js')
    ],

2 修改inedx.html文件

1
2
3
4
<body>
    <div id = "app"></div>
    <script src="http://localhost:7777/webpack-dev-server.js"></script>
    <script src="build.js"></script>

这样可以通过

运行npm run dev进入开发模式，可以快速编辑直接预览

优化重合并

你可能注意到在引入 React JS 到你的项目之后，给你的应用重新合并会花费太多的时间。在开发环境中，最理想的是编译最多 200 到 800 毫秒的速度，取决于你在开发的应用。
在开发环境中使用压缩文件
为了不让 Webpack 去遍历 React JS 及其依赖，你可以在开发中重写它的行为。
修改webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var path = require('path');
+ var node_modules = path.resolve(__dirname, 'node_modules');
+ var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

config = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
    resolve: {
        alias: {
         + 'react': pathToReact
        }
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel'
        }],
        noParse: [pathToReact]
    }    
};

module.exports = config;

出现的问题

1 Uncaught ReferenceError: webpackJsonp is not defined

使用CommonsChunkPlugin生成了公共文件，但是未使用
添加

参考文献

初学webpack与react,这个是我认为最好的教程。

轻松入门React和Webpack

一小时包教会 —— webpack 入门指南

react新版本与babel新版本的兼容问题:Module build failed: SyntaxError:React.render(
Hello
React+Webpack快速上手指南

发表于   |   分类于   |  

对于不能翻墙的同学，npm加载会变得相当难受，可以采用淘宝的npm镜像进行加速。

如何使用

临时使用

1
npm --registry https://registry.npm.taobao.org install express

持久使用

1
2
3
4
5
6
npm config set registry https://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

通过cnpm使用

1
2
3
4
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 使用
cnpm install express

以后需要通过npm安装的，使用cnpm安装就行

发表于   |   分类于   |  

参考文章

语法

Array

数组，常用map进行遍历

新建

var array = new Array();

或者

var array = ["1111","22222"]

  • array.lenght:数组长度
  • array.isArray:判断一个对象是否是数组

Array.from

这个方法作用是将一个 ArrayLike 对象或者 Iterable 对象转换成一个 Array ，本文只讨论 ArrayLike 对象相关内容。
比如

1
2
3
//把一个字符串转换成数组对象
var Array.from(“qwert”)
//["q","w","e","r","t"]

Array.map

用来将数组转换为另外一个数组

基本用法跟forEach方法类似：

array.map(callback,[ thisObject]);

callback的参数也类似：

1
2
3
4
[].map(function(value, index, array) {
    // ...
    return Object
});

但是map更多的是用来返回对象
callback需要有return值,return值就相当于foreach运算之后的返回值。所以常用于循环遍历数组，返回对象，也就是react的render方法里，比如以下代码用法：

1
2
3
4
5
6
7
8
var array = ["我","你"]
render(){
return(
	array.map((str,index)==>{
		<View>{str}</View>
	})
)
}

Array.concat()

方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

1
2
3
4
var arr = Array.of(1, 2, 3);
var resArr = arr.concat(4);
arr // [ 1, 2, 3 ]
resArr // [ 1, 2, 3, 4 ]

Array.join()

方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

1
2
3
4
var arr = Array.of(1, 2, 3);
var resStr = arr.join(",");
arr // [ 1, 2, 3 ]
resStr // 1,2,3

Array.pop()

方法用于删除并返回数组的最后一个元素。

1
2
3
4
var arr = Array.of(1, 2, 3);
var resEle = arr.pop();
arr // [ 1, 2 ]
resEle // 3

Array.push()

方法可向数组的末尾添加一个或多个元素，并返回新的长度。

1
2
3
4
var arr = Array.of(1, 2, 3);
var resLen = arr.push('a');
arr // [ 1, 2, 3, 'a' ]
resLen // 4

Array.sort()

方法用于对数组的元素进行排序。

1
2
3
4
5
//按照整数数值比较
var arr = Array.of(3, 11, 8);
var res = arr.sort((a, b) => a - b);
arr // [ 11, 3, 8 ]
res // [ 3, 8, 11 ]

Array.fliter()

使用指定的函数测试所有元素，并返回一个包含所有测试通过的元素的数组。

1
var new_arrary = arr.filter(callback[, thisArg])

callback函数：
用来测试数组每个元素的函数，参数是（element，index，array），返回true表示用过测试，保留，false表示不保留

thisArg：
可选。执行 callback 时的用于 this 的值。

Promise

Promise

1 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果.

2 语法上，promise是一个对象，可以获取异步操作的消息。有三种状态：Pending(进行总)，Resolved（已完成），Rejected（已失败）

3 Promise构造函数接受一个函数作为参数。该函数的两个参数是resolve方法和reject方法。

Async

es7新增特性，结合或者Promise使用，表达一个异步操作，内部函数体内。awite function()操作为要等待的操作，类似于c#的yield，之后的awite操作执行完毕，后面的代码段才执行

##