rambo-lei / daily Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 19 KB

daily learning

Java 18.47% JavaScript 10.55% PHP 64.05% Python 6.93%

daily's People

Watchers

daily's Issues

zoom

Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
Zoom的使用方法：

zoom : normal | number

normal :　默认值。使用对象的实际尺寸

number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等，如：

.border{ 
border:1px solid #CCC; 
padding:2px; 
overflow:hidden; 
_zoom:1; 
}

_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里
overflow:hidden;和_zoom:1;是连起来用的，作用是清除border内部浮动。

同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。

css中的zoom的作用

nodejs实现服务器的效果

nodejs实现服务器的效果（以图灵机器人为例）
angular.html：

<!DOCTYPE html>
<html lang="en" ng-app = "wsscat">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-controller = "indexCtrl">
    {{name}}
</body>
    <script src = "angular.js"></script>
    <script>
        var app = angular.module("wsscat",[]);
        app.controller("indexCtrl",function($scope,$http){
            $scope.name = 'lei';
            $http.jsonp("http://localhost:8888/",{
                params:{
                    callback:'JSON_CALLBACK',
                    q:"先有鸡还是先有蛋"
                }
            }).success(function(data){
                console.log(data);
            })
        })
    </script>
</html>

http.js代码如下：

var http = require('http');
//处理url
var url = require('url');
//处理字符串
var querystring = require('querystring');
function responseMsg(response,param){
    var data = {
        key:'c75ba576f50ddaa5fd2a87615d144ecf',
        info:param.q
    }

    http.request({
    hostname:"www.tuling123.com",
    port:'80',
    path:"/openapi/api?"+querystring.stringify(data),
    method:'get',
    /*headers:{
        "apiKey":'0aea38d1a7c4443f2f00adc86c4c3e72'
    }*/
},function(request){
    var data = ''
    request.on('data',function(chunk){
        //console.log(data);
        data += chunk;
    })
    request.on('end',function(){
        console.log(data);
        response.end(param.callback+"("+JSON.stringify(data)+")")
    })
}).on('error',function(e){
    console.log(e.message)
}).end()
//服务器接受前端的请求，响应结果，http//reques拿，response是服务器响应的
//console.log(http);
}

http.createServer(function(request,response){
    //url上的路由
    var pathname = url.parse(request.url).pathname;
    //url上的参数
    var paramStr  = url.parse(request.url).query;
    console.log('luyou'+ pathname);
    console.log('canshu'+paramStr);
    //处理url上的参数，把他解析为对象
    var param = querystring.parse(paramStr);
    console.log("duixiang:"+param);
    var datas = {
        name:'wsscat',
        age:0,
        sex:'cat',
        skill:['ps','nodejs']
    }
    responseMsg(response,param);
    //response.end(param.callback+"("+JSON.stringify(datas)+")");
}).listen(8888)

一：公众平台的申请（个人的话选择订阅号）
二：新浪云SAE（版本控制用svn）,在微信开发者文档中，接入指南的下方，找到php代码下载链接，下载php事例代码，然后将weixin_sample.php上传到新浪云应用中（新版本中加入了MP_verify_Lye8rXmDLHnwlmSz.txt文件，也要一并上传）。
三：微信公众平台的基本配置（URL，token，EncodingAESKey(消息加解密密钥)，其中url是新浪云中，你创建的对用应用的链接，去掉前面的版本号，token是在weixin_sample.php中的token，默认为weixin,）
四：公众号设置，找到功能设置一项，然后设置JS安全域名，此域名为对应应用中的链接，去掉前面的版本号，如aaaaaaa.applinzi.com
五：测试，代码如下
`<?php
/**

wechat php wsscat test
*/

//define your token
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
if (isset($_GET['echostr'])) {
$wechatObj -> valid();
} else {
$wechatObj -> responseMsg();
}

class wechatCallbackapiTest {
public function valid() {
$echoStr = $_GET["echostr"];

    //valid signature , option
    if ($this -> checkSignature()) {
        echo $echoStr;
        exit ;
    }
}

public function responseMsg() {
    //get post data, May be due to the different environments
    $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];

    //extract post data
    if (!empty($postStr)) {
        /* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,
         the best way is to check the validity of xml by yourself */
        libxml_disable_entity_loader(true);
        $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
        $fromUsername = $postObj -> FromUserName;
        $toUsername = $postObj -> ToUserName;
        $keyword = trim($postObj -> Content);
        $time = time();
        $textTpl = "<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[%s]]></MsgType>
                        <Content><![CDATA[%s]]></Content>
                        <FuncFlag>0</FuncFlag>
                        </xml>";

        if (!empty($keyword)) {
            $msgType = "text";
            $contentStr = "Welcome to wechat world! I'am wsscat，nice to meet you";
            $resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
            echo $resultStr;
        } else {
            echo "Input something...";
        }

    } else {
        echo "";
        exit ;
    }
}

private function checkSignature() {
    // you must define TOKEN by yourself
    if (!defined("TOKEN")) {
        throw new Exception('TOKEN is not defined!');
    }

    $signature = $_GET["signature"];
    $timestamp = $_GET["timestamp"];
    $nonce = $_GET["nonce"];

    $token = TOKEN;
    $tmpArr = array($token, $timestamp, $nonce);
    // use SORT_STRING rule
    sort($tmpArr, SORT_STRING);
    $tmpStr = implode($tmpArr);
    $tmpStr = sha1($tmpStr);

    if ($tmpStr == $signature) {
        return true;
    } else {
        return false;
    }
}

}
?>
如果是官方的代码，则必须加上以下代码，让其调用responseMsg()函数，代码如下
//define your token define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest(); if (isset($_GET['echostr'])) { $wechatObj -> valid(); } else { $wechatObj -> responseMsg(); }
七：基本测试完毕后，调用图灵机器人接口，测试，代码如下：
`<?php
/**

wechat php test
*/

//define your token
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
//$wechatObj->valid();

if(isset($_GET["echostr"])){
$wechatObj->valid();
}else{
$wechatObj->responseMsg();
}

class wechatCallbackapiTest
{
public function valid()
{
$echoStr = $_GET["echostr"];

    //valid signature , option
    if($this->checkSignature()){
        header("content-type:text");
        echo $echoStr;
        exit;
    }
}

public function responseMsg()
{
    //get post data, May be due to the different environments
    $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];

    //extract post data
    if (!empty($postStr)){
            /* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,
               the best way is to check the validity of xml by yourself */
            libxml_disable_entity_loader(true);
            $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
            $fromUsername = $postObj->FromUserName;
            $toUsername = $postObj->ToUserName;
            $keyword = trim($postObj->Content);
            $time = time();
            $textTpl = "<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[%s]]></MsgType>
                        <Content><![CDATA[%s]]></Content>
                        <FuncFlag>0</FuncFlag>
                        </xml>";             
            if(!empty( $keyword ))
            {
                $msgType = "text";
                //$contentStr = "Welcome to wechat world!";
                if($keyword){
                $contentStr = "you are seracing";
                    $apiKey = "c75ba576f50ddaa5fd2a87615d144ecf";
                    $apiUrl = "http://www.tuling123.com/openapi/api?key=KEY&info=INFO";
                    header("Content-type: text/html; charset=utf-8");
                    //http://www.tuling123.com/openapi/api?key=c75ba576f50ddaa5fd2a87615d144ecf&info=INFO
                    $reqInfo = $keyword;
                    $url = str_replace("INFO",$reqInfo,str_replace("KEY",$apiKey,$apiUrl));
                    $res = file_get_contents($url);
                    $contentStr = json_decode($res)->text;
                    //echo $_GET['callback']."(".$res.")";

                    //$contentStr = json_encode($postObj);
                $resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
                echo $resultStr;
                }

            } else{
                echo "Input something...";
            }

    }else {
        echo "";
        exit;
    }
}

private function checkSignature()
{
    // you must define TOKEN by yourself
    if (!defined("TOKEN")) {
        throw new Exception('TOKEN is not defined!');
    }

    $signature = $_GET["signature"];
    $timestamp = $_GET["timestamp"];
    $nonce = $_GET["nonce"];

    $token = TOKEN;
    $tmpArr = array($token, $timestamp, $nonce);
    // use SORT_STRING rule
    sort($tmpArr, SORT_STRING);
    $tmpStr = implode( $tmpArr );
    $tmpStr = sha1( $tmpStr );

    if( $tmpStr == $signature ){
        return true;
    }else{
        return false;
    }
}

}
?>`

websocket是何方神圣

今天见到了websocket的字眼，突然觉得好像见过，又好像没见过，再来查阅一番
在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。
一、什么是WebSocket API?
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。
二、WebSocket API的用法

[Copy to clipboard] [ - ]
CODE:
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 

// 打开Socket 
socket.onopen = function(event) { 

  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 

  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 

  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 

  // 关闭Socket.... 
  //socket.close() 
};

让我们来看看上面的初始化片段。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件，以表示Socket的状态。

onmessage事件提供了一个data属性，它可以包含消息的Body部分。消息的Body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多的数据。

WebSocket的语法非常简单，使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信，下面有几个后备方案供你使用：
Flash技术 —— Flash可以提供一个简单的替换。使用Flash最明显的缺点是并非所有客户端都安装了Flash，而且某些客户端，如iPhone/iPad，不支持Flash。

AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术，但它不能优化发送的信息。也就是说，它是一个解决方案，但不是最佳的技术方案。

由于目前的IE等浏览器不支持WebSocket，要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API，那么该怎么办呢？幸运的是，Guillermo Rauch创建了一个Socket.IO技术。
三、带Socket.IO的WebSocket
Socket.IO是Guillermo Rauch创建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技术官以及LearnBoost实验室的首席科学家。Socket.IO使用检测功能来判断是否建立WebSocket连接，或者是AJAX long-polling连接，或Flash等。可快速创建实时的应用程序。Socket.IO还提供了一个NodeJS API，它看起来非常像客户端API。
建立客户端Socket.IO

Socket.IO可以从GitHub下载，可以把socket.io.js文件包含到页面中：

[Copy to clipboard] [ - ]
CODE:
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
[/code

此时，Socket.IO在此页面上是有效的，是时候创建Socket了：

[code]
// 创建Socket.IO实例，建立连接
var socket= new io.Socket('localhost',{ 
  port: 8080 
}); 
socket.connect(); 

// 添加一个连接监听器
socket.on('connect',function() { 
  console.log('Client has connected to the server!'); 
});

// 添加一个连接监听器
socket.on('message',function(data) { 
  console.log('Received a message from the server!',data); 
});

// 添加一个关闭连接的监听器
socket.on('disconnect',function() { 
  console.log('The client has disconnected!'); 
}); 

// 通过Socket发送一条消息到服务器
function sendMessageToServer(message) { 
  socket.send(message); 
}

Socket.IO简化了WebSocket API，统一了返回运输的API。传输包括：
WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling

你还可以设置任意的Socket.IO构造器的第二个选项，选项包括：

port - 待连接的端口
transports - 一个数组，包含不同的传输类型
transportOptions - 传输的参数使用的对象，带附加属性

Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。

微信开发二

            libxml_disable_entity_loader(true);
            $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
            $fromUsername = $postObj->FromUserName;
            $toUsername = $postObj->ToUserName;
            $keyword = trim($postObj->Content);//接受文字时
            $keyword = $postObj->MediaId;//接受图片时
            $time = time();

js-sdk的开发
wx.config({
debug: true,
appId: '',
timestamp: ,
nonceStr: '',
signature: '',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',
'chooseImage'
]
});
wx.ready(function () {
// 在这里调用 API

  wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
    // 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}

});

  //选取图片的方法
  wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}

});

步骤：1.将php的demo上传到新浪sae中，建立 sample文件夹->php文件夹，上传四个必须文件，设置appId和appSecret。
2.wx.config(){},jsApiList中是各种接口的注入地
3.wx.ready(function(){})中是Api的调用，此处写各种逻辑

html中的table

前面复习了form的一些用法，table也是应该看一下的。好，来一个table

<html>  
<body>  
<TABLE   border=1   span="3" width="600px">     
      <COLGROUP bgcolor="red" span=3>  
        <col width="150px" style="display: block">     
            <col width="300px" bgcolor=green>     
            <col width="150px">    
     </COLGROUP>     
  <TBODY>     
  <TR>     
  <TD>1111</TD>     
  <TD>222</TD>     
  <TD>3333</TD>     
  </TR>     
  <TR>     
  <TD>1111</TD>     
  <TD>222</TD>     
  <TD>3333</TD>     
  </TR>     
  <TR>     
  <TD>1111</TD>     
  <TD>222</TD>     
  <TD>3333</TD>     
  </TR>     
  </TABLE>  

</body>  
</html>

注意点：
1.colgroup属性的写法，其中可以加入col进行嵌套，来设定子单元格的格式
2.子单元格的属性有cellspacing和cellpadding,用法同盒子模型，给table加一个border的话，则整个单元格都是会有border的。
3.合并行和列用到了colspan和rowspan
4.colgroup要放在th,thead,tr,td之前

css3常用属性

1.transition
transition:width 2s linear 1s;(其中，最后的1秒是从1秒开始)
2.animation
首先定义动画

@keyframes firstanimation{
from:{width:0}
to:{width:100px}
}
还可以用@keyframes firstanimation{
0:{width:0}
25%:{width:25px}
50%:{width:50px}
75%:{width:75px}
100%:{width:100px}
}

接着第二步调用动画

div{
animation:firstanimation 2s linear 1s infinite alternate running//其中infinite指动画的次数，alternate指动画//的走向，即正向还是反向，最后一个running,指的是动画开始时的运行状态
}

3.transform(translate,rotate,scale,skew)

transform:translate 20px;(x轴和y轴均平移，这里还会涉及2d和3d)，有关文章参考大神张鑫旭的文章
transform:rotrate(20deg)(主义单位是deg)
transform:scale(2,4)(注意是缩放的比例)
transform:skew(20deg,20deg)(指沿着x轴和y轴的倾斜)

4.box-shadow,border-radius,text-shadow,word-wrap
box-shadow

div{
box-shadow:10px 10px 5px #fff;
//对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
}

border-radius(比较常用)

div{
border-radius:50%
}

text-shadow

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

word-wrap

p{
word-wrap:break-word
}

hr水平分分隔线的一些用法：
hr的样式修改

.hr0{ height:1px;border:none;border-top:1px dashed #1E90FF;}
.hr1{ height:1px;border:none;border-top:1px solid #000;}
.hr2{ height:3px;border:none;border-top:3px double #6B8E23;}
.hr3{ height:5px;border:none;border-top:5px ridge #45D6D8;}
.hr4{ height:10px;border:none;border-top:10px groove #FF8C00;}

重读javascript高级程序设计

1.js中没有重载的概念，定义了两个同名函数后，第二个会将第一个覆盖
2.break跳出循环，continue跳出当前循环，代码如下：

var num = 0;
        for(var i = 1;i<10;i++){
            if( i%5 == 0){
                break;
            }
            num++
        }
        console.log(num);//4
        var num = 0;
        for(var i = 1;i<10;i++){
            if( i%5 == 0){
                continue;
            }
            num++
        }
        console.log(num);//8

3.\n换行；\t:制表符，转义字符后的内容计算长度时为一个。如\AAADF
4.把其他类型转成Number类型有三种为Number,parseInt,parseFloat
5.var floatNum = 3.125e7//3.125*10的七次方
6.defer = "defer"是让结构加载完再加载js
7.typeof(null)//object
8.如果变量是给定的引用数据类型，在判断其类型时，用instanceof,如array instanceof object;当变量为基本数据类型时，则不能用instanceof,所有引用类型的用instanceof判断时，结果都是object
9.js没有块级作用域
10.js垃圾回收机制为标记清除和引用计数，标记清除是将进入环境中的变量进行标记，并分配内存，根据实际情况动态清除；引用计数是，一个变量被定义并赋值时，计数为1，之后同一个值又被赋给了另外一个变量，该值计数加1，相反，包含这个值的变量如果被

简单排序

1.冒泡

`function sort(arr){
    for(var i = 0;i<arr.length-1;i++){
        for(var j = 0;j<arr.length-1-i;j++){
            if(arr[j]>arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    return arr;
}
console.log(sort(arr));

`
2.选择

function sort(arr){
    for(var i = 0;i<arr.length-1;i++){
        var min = arr[i];
        for(var j = i+1;j<arr.length;j++){
            if(arr[j]<arr[i]){
                var temp = arr[j];
                arr[j] = arr[i];
                arr[i] = temp;
            }
        }
    }
    return arr;
}
console.log(sort(arr));

html表单中的一些东东

先来个表单：

<form name = "form" action = "a.php" method = "post">
    <fieldset>
        <legend>健康信息</legend>
    <input type = "text" placeholder="username"><br/>
    <input type = "password" placeholder="password"><br/>
    <select>
        <option>11</option>
        <option>22</option>
        <option>33</option>
    </select>
    <br/>
    <input type = "radio" name = "sex" value = "male">male
    <input type = "radio" name = "sex" value = "female">female<br/>
    <input type = "checkbox" name = "bike" checked="checked">I have a bike
    <input type = "checkbox" name = "foot">I have a foot<br/>
    <textarea name="textarea">aaaaa</textarea><br/>
    <input type = "submit" value = "submit">
    <input type = "reset" value = "reset">
    <button value = "aaa">aaaa</button>
    </fieldset>
    </form>

自己的坑：
1.fieldset，legend不常用，导致久了忘记单词了，囧。
2.单选按钮中，name是要写一样的，如name = "sex"，不一样的话，会是类似复选框的效果，（好吧，我可以用这个功能去做复选框）
3.submit与button的区别：
（1）submit是带数据提交的，button则不是，相当于一个普通按钮
（2）如果写成<button></button>的形式，则不光是数据，还可以带图片等信息
4.在一个表单中写按钮的四种方法：

- <input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
- <input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
- <button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题。
- 其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。（很常用）

html5中的video

今天遇到一个问题，一个video标签

<video src="movie.ogg" width="320" height="240" controls="controls"
		autoplay = "autoplay">
			Your browser does not support the video tag.
</video>

可以出现视频的轮廓，但是不能播放视频。一时没相处来，查了下答案
你需要把你的视频转化为多种格式以适应不同的浏览器。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

sublime3

1.http插件参数的一些情况：

服务器的参数： "host": "hz177951.ftp.aliapp.com",
    "user": "hz177951",
    "password": "Elvmx_top",
    //"port": "22",

    "remote_path": "/htdocs/1604/",

artTemplate模板

今日项目中，引入了artTemplate模板，老大进行了一个封装，自己直接调用，一直出现问题，在中转的时候一直传不过去。困惑好久，原来是json格式化出现了问题，好吧，这里也可以出错，引以为戒。

```

{{value.commenterName}}
{{value.content}}

{{/each}} </script>

<script>
	$(function(){

        
	    $(".all_lacomment_detail").xkTemplate({
	        data:{
	            targetUrl:'cloudSor/test/comment_dynamic_data.txt'
	        },
	        templateId:'test1'
	    });
        
	});
</script>

微信开发三：语音功能

html中的代码：

 <button id="record">录音</button>
  <button id="stoprecord">停止录音</button>
  <button id="playrecord">播放录音</button>
  <button id="transrecord">语音识别</button>

wx.config中的代码（添加需要调用的API）：

      "startRecord",
      "stopRecord",
      "playVoice",
      "translateVoice"

wx.ready中的代码：

document.getElementById("record").onclick = function(){
                    wx.startRecord();
                }

                var voice = {
                    localId:''
                }//此处不可少，使用对象可以传递数据，另外一种方式是使用闭包

                document.getElementById("stoprecord").onclick = function(){
                wx.stopRecord({
                    success: function (res) {
                     voice.localId = res.localId;
                    }
                });
                }


                document.getElementById("playrecord").onclick = function(){
                    wx.playVoice({
                            localId: voice.localId // 需要播放的音频的本地ID，由stopRecord接口获得
                    });
                }

                document.getElementById("transrecord").onclick = function(){
                    wx.translateVoice({
                    localId: voice.localId, // 需要识别的音频的本地Id，由录音相关接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                    alert(res.translateResult); // 语音识别的结果
                    }
                    });
                }

同理，扫一扫的代码如下：

document.getElementById("scanQRCode").onclick = function(){
                    wx.scanQRCode({
                        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function (res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        }
                    });
                }

上面的代码都是前后端结合在一起开发，如果前后端分离也很好实现：
代码如下：
weixin.html：

var app = angular.module('wsscat', []);
        app.controller('indexCtrl', function($scope, $http, checkJsApi) {
                $scope.name = 'wsscat';
                $http.get('weixinfenli.php').success(function(data) {
                    console.log(data);
                    weixin(data);
                })

                function weixin(data) {
                    wx.config({
                        debug: true,
                        appId: data.appId,
                        timestamp: data.timestamp,
                        nonceStr: data.nonceStr,
                        signature: data.signature,
                        jsApiList: [
                            // 所有要调用的 API 都要加到这个列表中
                            'checkJsApi',
                            'chooseImage',
                            'uploadImage',
                            'downloadImage',
                            'previewImage',
                            'startRecord',
                            'stopRecord',
                            'playVoice',
                            'translateVoice',
                            'scanQRCode'
                        ]
                    });
})

weixinfenli.php代码如下：

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("wx0205a03191a29156", "34663184e14259cee5c02c22c8a86a97");
$signPackage = $jssdk->GetSignPackage();
echo json_deconde($signPackage);
?>

js与css的缓存问题

什么情况下，要禁止静态文件缓存：
1、经常可能要改动的 js, css.
比如一个js文件引用如下
<script src="test.js"></script>

后来进行了test.js文件的修改
在这种情况下如果以前用户浏览过此页面，那么他的浏览器自动缓存了 test.js
当他浏览新版本的时候，因为使用的是缓存js，这样将导致脚本出错。
解决方法探讨：
因为css,js 是通过<script src=....>这种方式加载的，所以，很难使用 asp 的那种服务器端禁止缓存的办法。也很难使用ajax的通过设置 http请求头的办法禁止使用缓存。
解决方法

随机数法

方法一：
document.write( " <script src='test.js?rnd= " + Math.random() + " '></s " + " cript> " )
方法二：

var js = document.createElement( " script " )
js.src = " test.js " + Math.random()
document.body.appendChild(js)

这样采用随机数的话， js文件将永远得不到缓存，每次都必须重新从服务器加载，即使没有任何更改。
大家如果经常上国外网站的话，可以看到他们通常采用这样的方式来解决：
<script src="test.js?ver=113"></script>
其中 ver=113 的 113就是版本号

这样真正做到了应该缓存的时候缓存静态文件，当版本有更新的时候从获取最新的版本，并更新缓存。
对于图像 <img src="test.jps?ver=版本号"> 来有效利用和更新缓存.

ionic2配置问题

1.nodejs.官网https://nodejs.org/en/
2.cnpm的安装 npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装innic(版本2) cnpm install -g ionic@beta(默认安装目前最新版)，如果想安装特定版本，如下代码
cnpm install -g [email protected]
4.设置全局npm从国内加载，
registry = http://registry.cnpmjs.org
5.建立ionic的项目
ionic start ionicdemo2 --v2

遇到的坑：1.提示版本过低，于是我重新去安装了nodejs.
2.提示cordova6.1有问题，于是换回了6.0，依然还是没有成功。
3.网速一直不太好，也可能是一个问题。

修改第三方插件的问题

今天项目中引入了一个类似淘宝星星评价的功能，原来用原生js写过一个，调用时出现了问题，不知道为什么，就掉了一个插件，为jquery.raty.js，链接为http://www.jq22.com/jquery-info6430 也有一些坑。
html结构如下：

<div style="width:500px; margin:100px auto;">
  <div class="demo">
    <div id="function-demo" class="target-demo"></div>
    <div id="function-hint" class="hint"></div>
  </div>
  <div class="demo">
    <div id="function-demo1" class="target-demo"></div>
    <div id="function-hint1" class="hint"></div>
  </div>
</div>

因为需要改变function-demo和function-hint，自己新加了一个class进入，但是被覆盖，于是找到了js文件，去修改里面代码，搜索关键词“function-demo”和“function-hint”并没有找到，但是在同类别中找到了一个cursor:pointer的css3属性，于是，搜索。找到对应位置，修改其中的width属性，值设为auto。于是就可以用了。

rambo-lei / daily Goto Github PK

daily's People

Watchers

daily's Issues

Recommend Projects

Recommend Topics

Recommend Org