如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
全局组件和局部组件
* 1.先定义组件 Vue.component('组件名', { 组件模板对象 })
* 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小写
* 例如: 组件-->mtText 使用时--> <my-text></my-text>
* 2.配置组件的模板 注意: 组件的模板内容有且只有一个根元素
* 3.在视图层里调用 ,用双标签
* 4.组件是一个独立的作用域, 也可以看成一个特殊的vue实例, 可以有data, methods,computed等等
* 注意: 组件的data是函数, 函数中需要返回一个对象作为组件的data
全局组件案例
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局组件
Vue.component('myComponent',{
//1.组件的内容/模板
template: '<div><div>头部组件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
data(){
return {
msg:'hello,组件'
}
},
methods:{
fn(){
console.log(this.msg);
}
}
})
let vm = new Vue({
el:"#app",
data:{
},
methods:{
},
})
</script>
</body>
局部组件案例
<body>
<div id="app">
<my-component></my-component>
<my-test></my-test>
</div>
<template id="box1">
<h1>haha</h1>
</template>
<template id="box2">
<div>
<ul>
<li v-for="item in arr">
{{ item }}
</li>
</ul>
</div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
},
methods:{
},
//局部子组件
components:{
// 组件名: {配置项}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
}
},
"myTest":{
template:"#box2",
data(){
return {
arr:[1,2,3,4]
}
}
}
}
})
</script>
</body>
组件切换：法一
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登录组件</h1>"
})
Vue.component("register",{
template:"<h1>注册组件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: false
},
methods:{
},
})
</script>
</body>
组件切换：法二
<style>
.red{
color:red;
}
.v-enter{
opacity:0;
transform: translateX(150px);
}
.v-leave-to{
opacity:0;
transform: translateX(-150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s;
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登录</a>
<a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注册</a>
<!-- vue提供了一个标签 component标签(理解为一个占位符), 用来展示对应名称的组件 :is属性设置指定的组件名 -->
<transition>
<component :is="flag"></component>
</transition>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登录组件</h1>"
})
Vue.component("register",{
template:"<h1>注册组件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: "login"
},
methods:{
},
})
</script>
</body>
父组件向子组件传值
<body>
<div id="app">
<my-component :fromfather="father"></my-component>
</div>
<template id="box1">
<h1 @click="change">
{{ fromfather }}
子组件的数据
</h1>
</template>
<template id="grandSon">
<h1>孙子组件的数据</h1>
</template>
<!--1.子组件不能访问父组件的数据
2. 解决办法: ①在引用子组件时, 通过属性绑定 v-bind方法, 把需要传递给子组件的数据以绑定的形式传过来
② 在子组件配置项里添加 props: ['传递过来的数据']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
father:'啊~~这是父组件的数据'
},
methods:{
},
//局部子组件
components:{
// 组件名: {配置项}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
},
//在子组件配置项里添加 props: ['传递过来的数据']
//注意: 组件中所有的props中的数据, 都是通过父组件传递给子组件的, props中的数据是只读, 无法修改
props:['fromfather'],
methods:{
change(){
// this.fromfather = "被修改了"
}
},
//局部子子组件
components:{
'grandSon':{
template:'#grandSon'
}
}
}
}
})
</script>
</body>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一般知道，js脚步语言的执行环境是单线程的，就是它会等一个任务完成，才会进行第二个任务，然后一直向下进行，这样的执行环境简单，但是处理不了复杂的运用，当一个请求需要非常旧的时间的时候，下一个流程就会被搁浅，如果长时间得不到反馈，进程就这样的奔溃了。
为了解决这个硬性需求，Javascript语言提出了二种语言模式： 同步（Synchronous）和 异步 （Asynchronous）。
回调函数
订阅和发布模式
Promise
generator
async/await
通过把一个函数(callback)作为参数传入另一个函数，当满足一定条件的时候，就执行callback函数。
用法：
通过回调函数的方式处理异步，是在异步早期的情况，其中jquery中的很多都是通过callback来实现回调的。但是这种模式代码编写比较耦合，不利于代码维护。
发布订阅模式
pub/sub模式是js设计模式中的一种，本身是借鉴于java的模式，但是在处理异步处理的时候非常有作用。通过一个信息中心EventCenter 来处理的监听(on)和触发(triggle)。
通过pub/sub模式，我们可以在信息中心清楚的看到有多少信号来源，方便的集中管理，更加方便于模块化的管理，但是如果整个项目都使用pub/sub模式的话，流程就变得不太清晰了，数据的得到和数据的处理分开，对于后期的维护也是一个很大的问题。
Promise构造函数成为承诺，它分为三种状态resolve, reject, pending ,一旦状态从pending改为其它2个状态之后，就不能修改了，就一个承诺一样。
Promise接收2个参数resolve , reject，分别表示成功后执行和失败后执行，可以通过实例的then()方法传递对于的函数。
这里看了之后，你可能会说，这个和异步处理有什么联系吗？你思考一下，当一个异步操作后，我们可以不去管它什么时候结束，什么时候出错，就像一个人承诺了，我只需要按照他的承诺去当这个事情已经被处理好了，是不是方便很多，下面直接上手一个例子。
我完全不用担心它里面怎么实现了，反正它已经承诺了会给我结果，我只需要通过then()方法去接受，我需要得到的值就可以了。
单个值
一个promsie实例
一个thenable对象
Promise.resolve(value).then((value) => {})
如果一个请求的结果是下一个请求的参数，如果我们使用原始的请求方法，就是出现一个像右的箭头的回调地狱。
一层层嵌套，非常的恐怖，不利于维护。那么通过prmise怎么处理回调地狱呢？
上面处理回调地狱是不是看着方便很多，代码也简单命令，依赖性也很强，后面我们会继续通过async/await继续简化。
Promise.all(arr) 接受一个promise实例的数组，可以并发多个请求给服务器，但是并不能保证接受到的先后顺序，这个取决于服务器的处理速度。
处理多个请求并发，并且需要保证返回数据的顺序（运用场景比较少）
上面一个方法并不会保证请求返回的结果，按照你发送的顺序返回，如果我想把完整的响应的结果按照我
希望的顺序返回给我，那应该怎么办呢？
这样，会等待每一个请求完成后，并把得到的数据push到totalData中，就可以按照顺序得到我们想要的值了。当然使用async/await会更加的方便。之后我们会讲解。
generator是一个构造器，generator函数执行并不会执行函数体内部部分，而是返回一个构造器对象，通过构造器对象的next()方法调用函数主体，并且每当遇到yield都会暂停执行，并返回一个对象。
注意yield本身是不会反悔内容的，只是给构造器对象返回了内容，如果想yield表达式也返回内容，可以通过给下一个next()传递参数。
通过next()传递参数，我们可以做到值向内部传递，对于后面的异步处理很有帮助。
generator异步运用
利用构造器的暂停和继续的功能，我们可以很好的处理异步请求，得到数据后再进行其他内容。主要是运用yield表达式返回一个promise对象的原理。
这样我们就得到了接口请求的数据，相比于之前的promise函数的书写是不是要简单很多。和同步是一样的操作。
如果我们想内部对得到的数据进行进一步的处理呢？
简单的co模块处理generator多个函数请求
从上面我的调用方法就可以看出，利用Promise + generator的异步处理不断地通过then()方法处理数据。有没有一个方式是我可以直接运行一个函数，然后就可以得到我想要的值。 例如：
网上已经封装了很多的方法，例如常见的run库，co函数就是来处理这样的处理方式。但是当我们发送多个请求的时候，可能你会这样写：
这样写是会发送请求，但是并不是并发多个请求，而是等第一个请求p1之后，再进行第二个请求p2，在性能优化方面是不利的，也不符合我们的要求，怎么做到2个请求是独立的，并且我们还可以通过得到2个请求的结果后，进行其他请求。或许我们可以这样：
这样写是不是和我们之前写的Promise.all()很像？所以还可以改成这样的：
async/await异步处理
ES7出现了async/await进行异步的处理，使得异步操作就像同步代码一样简单，方便了使用，由于async/await内部封装了generator的 处理，所有就很少有人用generator来处理异步了，但是在异步的推动中generator起到了很大的作用。
await： 后面接受一个promise实例
**async: 返回一个promise对象 **
一个简单的异步请求
上面的例子是不是和generator中的异步请求很像？可以像同步一样的编写代码，但是相比generator，await后面加上promise后直接返回相应的数据，不像yield还需要从外部传入。
处理多个请求并发的情况（不需要管服务器的返回顺序）
用async/await处理多个请求并发，由于await后面需要添加Promise实例，是不是脑袋里面一下子就想到了一个Promise.all()
你可能会很好奇，为什么不需要像generator那样通过额外的函数来调用，因为async已经帮你想好了，内部已经调用了，是不是很爽？
处理多个请求并发，并且需要保证返回数据的顺序（运用场景比较少）
如果数据中没有相互的联系，但是又想一个个发送，可以这样
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
首先就是要把视频加载出来，然后使用canvas.getContext(‘2d’).drawImage(videoElement, 0, 0, canvas.width, canvas.height);获取到当前视频时间的截图，需要不同时间的video视频图，设置video的currentTime（单位秒），然后videoElement这个对象信息会实时更新。
如果是视频是在阿里云OSS上就更方便了，poster=“http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_6000,m_fast”
如果是要获取上传本地视频预览图，可采用下面的方法，但有兼容性问题，目前测试移动端安卓机只有Chrome浏览器支持，微信和QQ浏览器都无法响应本地视频的canplay事件。
<div contenteditable="true" id="in-box" style="width:1000px;margin: 20px auto;"></div>
<div style="width:1000px;margin: 20px auto;">
<input type="file" name="" accept="video/*" id="upload-ipt">
<div class="review" id="out-box"></div>
</div>
function getVideoImage() {
var obj_file = document.getElementById("upload-ipt");
var file = obj_file.files[0];
var blob = new Blob([file]), // 文件转化成二进制文件
url = URL.createObjectURL(blob); //转化成url
if (file && /video/g.test(file.type)) {
var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
//后面加一个空格div是为了解决在富文本中按Backspace时删除无反应的问题
$('#in-box').html($video);
var videoElement = $("video")[0];
videoElement.addEventListener("canplay", function (_event) {
var canvas = document.createElement("canvas");
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
console.log(videoElement.videoWidth)
canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
$("#out-box").html(img);
URL.revokeObjectURL(this.src); // 释放createObjectURL创建的对象
console.log("loadedmetadata")
});
}else{
alert("请上传一个视频文件！");
obj_file.value = ""
}
};
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript数组操作</title>
<script type="application/javascript" src="lib/jquery.min.js"></script>
</head>
<body>
<h2>javascript操作数组</h2>
<input type="button" value="js数组" "jsArrays();">
<br>
<input type="button" value="json数组1" "jsonArrays();">
</body>
<script type="application/javascript">
//数组操作
function jsArrays() {
//创建一个javascript数组
var a=new Array();
a.push('a');
a.push('b');
a.push('c');
//往数组添加三个元素
alert(a);
//利用indexof可以指出该元素在数组中所在位置
alert('a index of a'+a.indexOf('a'));
//利用jquery对数组进行便利
$(a).each(function (index,row) {
alert('index is '+index);
alert('row is '+row);
})
}
//json数组操作
function jsonArrays() {
//首先也是创建一个json数组
var a=new Array();
a.push({a:1});
a.push({a:2});
a.push({a:3});
//同样的往数组添加三个元素
//alert出的结果是[{object,object},{object,object},{object,object}]
alert('a is '+a);
//利用JSON的方法将json数组转换为字符串这时候alert的就是json字符串了
alert(JSON.stringify(a));
//直接获取json数组第一个元素的值，此时知道json的key是a
alert(a[0].a);
//遍历json数组第一个元素的key，这时候可以alert出的结果是a，同样的可以得出对应的value
for(var key in a[1]){
alert('key is '+key);
alert('value is '+a[0][key]);
}
//用jquery对json数组进行遍历
$(a).each(function (index,row) {
for(var key in row){
alert('each key is '+key);
alert('each value is '+row[key]);
}
})
}
</script>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
一、Weinre 说明
Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等。
使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一种远程调试工具:
1.它可以将远程的页面经过代理在PC上调试页面元素、样式，JS。
2.可以监听页面内部的Ajax请求等。
3.可以监听页面加载成功时候的Console控制台输出
官网首页：http://people.apache.org/~pmuellr/weinre/docs/latest/
Weinre的原理
三个端的含义：客户端(client)：本地的WebInspector，远程调试客户端。服务端(agent)：本地的HTTPServer，为目标页面与客户端建立通信。目标页面(target)：被调试的页面，页面已嵌入weinre的远程js。
调试过程：
客户端将指令(请求DOM、执行js)post到代理服务端，目标页面定时(大概5s)从服务端get指令，然后将结果post回服务端，最终客户端定时从服务端get结果。
PS：由于Weinre的客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。
二、Weinre安装和使用
1.weinre是基于NodeJs，因此首先要安装NodeJs，然后使用npm命令安装weinre
npm -g install weinre
2.运行，启动weinre服务器，默认端口8080
node.exe node_modules\weinre\weinre --boundHost -all-
node.exe node_modules\weinre\weinre --boundHost 192.168.1.125
在windows下，系统防火墙可能会弹出是否允许其访问网络的提示，点击充许即可。
3.从浏览器访问,http://localhost:8080,或者，http://192.168.1.125:8080，显示如下表示启动服务器监视成功
三、Weinre需要监听调试的Web页面配置处理
1.在所有页面引入js文件
2.特别说明，当前js文件的域名需要指定为本机的IP地址，因为在手机模拟器中无法访问电脑‘localhost’
更多：
cordova-plugin-whitelist 协议白名单配置整理
VS Code插件安装位置
Visual Studio Code插件之Atom One Dark Syntax Theme
相关参考文章：
http://blog.csdn.net/freshlover/article/details/42640253
http://www.cnblogs.com/diva/p/3995674.html
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这是一个 app从获取获取数据 用于显示的经典实践项目，数据来源于 豆瓣官方公开的api接口：https://developers.douban.com/wiki/?title=movie_v2
先上图：
项目使用了如下第三方library：
下拉刷新：Android-PullToRefresh
网络数据加载：android-async-http
图片加载：universal-image-loader
后面的博客，会把项目的制作流程发出来
豆瓣API实践项目-前言-0（可下载源码）: http://blog.csdn.net/mario_faker/article/details/79618210
豆瓣API实践项目-数据api接口-1：http://blog.csdn.net/mario_faker/article/details/79618235
豆瓣API实践项目-搭建项目基本框架-2：http://blog.csdn.net/mario_faker/article/details/79618245
豆瓣API实践项目-导入第三方library-3：http://blog.csdn.net/mario_faker/article/details/79618261
豆瓣API实践项目-单页细讲4: http://blog.csdn.net/mario_faker/article/details/79618272
豆瓣API实践项目-apk打包:http://blog.csdn.net/mario_faker/article/details/79618291
项目源代码下载地址：
http://download.csdn.net/download/mario_faker/10253201
或github：https://github.com/MarioFaker/DBMovie
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
5.0以后，materialDesign风格，出现了立体这种概念，高光，阴影，也就是Z轴，凸显层次；同时，裁剪view也变得方便简单了很多。
1，先说说阴影的实现。
方案1：在xml中设置
xml中设置有两个方式，android:elevation="2dp"
android:translationZ="2dp"这两句代码是可以同时并存的，而且是叠加的效果；当然只使用其中一个属性进行z轴的阴影设置也是OK的。
方案2：在代码中设置
（下面说这个实现方式，其实就是轮廓的实现）
设置阴影，有一个需要注意的地方：
①：view的大小要比它的父布局小，才会有阴影效果，如果相同大小，是看不到阴影效果的；
②：给图片设置阴影的时候，如果这种图片的background属性是shape，那直接通过xml设置阴影是OK的，但是，如果是一张png或者其他格式的图片，直接通过xml设置android:elevation="2dp"
android:translationZ="2dp"阴影是看不到效果的，得通过其他代码设置才行。。。**
2，view的轮廓，轮廓其实也是阴影
默认情况下，所有的view都是矩形的，虽然可以给view设置背景圆形的图片，即可以在界面显示出圆形的内容，但是view的大小实际上依然是矩形，并且设置的图片实际上也是矩形的，只是圆形以外的区域是透明色。
如果根据view大小来生成对应的阴影，就会出现很奇怪的效果，（一个看起来圆形的view展示出的确实一个矩形的阴影）我了解决这个问题，view增加了一个新的描述来指明内容显示的形状，这就是 轮廓
轮廓的实现
①通过shape设置的背景，view会自动根据shape的形状进行轮廓判定，
②通过color设置的背景，view默认其轮廓和view的大小一样。
③但是通过图片进行背景设置，view则无法获知轮廓的形状，这个时候就需要手动进行指定了。
1
2
3
一：在xml中可以通过android：outlineProvider来指定轮廓的判定方式：
1，none即使设置了Z属性，也不会显示阴影
2，background会按照背景来设置阴影形状
3，bounds会按照view的大小来描绘阴影
**对于①和②这种情况，也是可以通过设置`android：outlineProvider`
来改变阴影的形状以及轮廓外观的。**
对于③这种背景是一张png或者其他格式的图片的情况，
`android：outlineProvider=“background”`
是没有效果的，属性设置成`android：outlineProvider=bounds`
虽然也是有效果的，但是阴影轮廓是一个方形的轮廓，
并不是我们想要的效果了。
不设置`android：outlineProvider`属性就更没有效果了。
1
2
3
4
5
6
7
8
9
10
对于这种使用了png图片作为背景的view加阴影轮廓的时候情况解决办法也非常简单，解决办法就是：
就通过Java代码设置，也就是说，一个圆形的png图（我们知道，看起来是圆形的，
但是它其实还是方形的图片，只是圆形之外的区域是透明不可见的），
通过Java代码设置轮廓，就会显示出圆形的阴影轮廓了。
1
2
3
具体实现，继续看：
二：在代码中，课通过setOutlineProvider来指定一个view的轮廓。
对于③这种情况在代码中设置轮廓才会有效果。
TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//x，y轴表示位置，后两个参数表示长，宽
outline.setOval(0,0,textView.getWidth(),textView.getHeight());
}
};
textView.setOutlineProvider(viewOutlineProvider);
1
2
3
4
5
6
7
8
9
强调：
如果采用圆形图片作为背景，即使在xml布局中指定android：outlineProvider=“background”，也不会显示阴影，设置为android：outlineProvider=bounds，虽然也有效果，但是效果很差，所以一般都是通过代码来指定轮廓显示。
1，一个shape圆形作为背景，设置阴影，设置android：outlineProvider的4种属性的效果：
2，一个圆形png作为背景，设置阴影，设置android：outlineProvider的4种属性的效果：
3，一个png作为背景，设置阴影，通过代码设置的效果：
3，view的裁剪
裁剪，默认的ImageView是矩形的，很多时候，需要的是圆角的ImageView或者圆形的ImageView，这就需要裁剪view了。
实现，裁剪圆形：
final TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//设置圆形oval
outline.setOval(0,0,textView.getWidth(),textView.getHeight());
}
};
//设置裁剪
textView.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10
11
实现，裁剪圆角矩形：
final TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//设置圆角矩形
outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
}
};
textView.setOutlineProvider(viewOutlineProvider);
//设置裁剪
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、简介
TabLayout提供了一个水平布局用于展示tabs，继承自HorizontalScrollView。一般与Viewpager结合使用实现页面和标签联动的效果，是时下APP中非常常用的一个控件
二、基本用法
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
jQuery对Ajax操作进行了封装，常用的方法包括 $.get(),$.post(),$.ajax()。
分别对其进行介绍
$.get()
$.get()方法使用GET方式来进行异步请求。
$.get()结构
$.get(url,[. data][. callback][. type])
1
$.get()方法参数解释
参数名称 类型 说明
url String 请求的HTML页的url地址
data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求的url中
callback(可选) Function 载入成功时回调函数（只有当Response的返回状态是success才调用该方法）自动将请求结果和状态传递给该方法
type(可选) String 服务器端返回内容的格式，包括xml、html、script、json、text和_default
示例
json数据：data.json(后面的$.post()和$.ajax()方法都用这个数据)
{
"name":"龙猫",
"hobby":"睡觉",
"friend":"加菲猫"
}
jq_get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="$.get方法" id="jQget">
<div id="content"></div>
</body>
</html>
<!-- 导入jquery.js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jQget').on('click',function(){
/*
参数1:url
参数2:发送的数据 支持 直接写js对象的方式
参数3:回调函数
参数4:从服务端获取的 数据类型 可以不写
注意
如果type 为json
并且服务端返回的就是 json格式字符串
jq内部 会帮助我们自动转化
在回调函数中 获取的 实参 就是转化完成的 js对象 直接使用即可
参数的 顺序 是更换的
但是 如果 把data 放到后面 会出现 无法传递数据的问题,
所以 不要擅自更换 严格按照 jq文档中的 顺序 进行使用
*/
$.get('jq_get.php',{name:"jack",age:18},function(data){
console.log(data);
$('#content').html('name:'+data.name+'<br>'+'hobby:'+data.hobby+'<br>'+'friend:'+data.friend);
},'json');
});
});
</script>
jq_get.php (后面的$.post()和$.ajax()方法都用这个页面的内容，只是在html请求时分别对应的php页面)
<?php
header('content-type:text/html;charset=utf-8');
echo file_get_contents('datas/data.json');
?>
结果展示：
$.post()方法
它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别：
GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送个Web服务器，当然，在Ajax中，这种区别对用户是不可见的。
GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制，但是可以在服务端进行限制）。
GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。（但是也是不安全的，所以密码之类的还是要加密的）
GET方式和POST方式传递的数据在服务器的获取方式也不相同。在PHP中，GET方式数据可以用$_GET[]获取，而POST可以用$_POST[]获取、两种方式都可以用$_REQUEST[]来获取。
其实这完全是对这篇文章中post()和get()方法不同的总结啊！(点击查看)
$.post()演示
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jQpost').on('click',function(){
// 跟$.get用法及其类似
/*
参数1:url
参数2:发送的数据 支持 直接写js对象的方式
参数3:回调函数
参数4:从服务端获取的 数据类型 可以不写,如果写为json jq内部 会帮我们进行一个 JSON.parse()的转化
*/
$.post('jq_post.php',{name:"kong",age:18},function(data){
console.log(data);
},'json');
});
});
</script>
$.ajax()
$.ajax()方法是jQuery最底层的Ajax实现
其结构为
$.ajax(options)
1
该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的，只写几个常用的参数，如下：
参数名称 类型 说明
url String 请求的HTML页的url地址
type String 请求方式，默认GET。注意其他的HTTP请求方法，例如PUT和DELETE也可以使用，但仅部分浏览器支持
data Object或String 发送到服务器的数据，如果已经不是字符串，将自动转换为字符串格式。
dataType String 服务器端返回内容的格式，包括xml、html、script、json、jsonp 、jQuery
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象的唯一参数。
success Function 请求成功后嗲用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等等。
this//调用本次Ajax请求时传递的options参数
}
error Function 请求失败时被调用的函数，该函数有3个参数，即
XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
Ajax事件函数如下。
function(XMLHttpRequest,textStatus,errorThrown){//通常情况下textStatus和errorThown只有其中一个包含信息
this;//调用本次Ajax请求时传递的options参数
}
示例
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jqAjax').on('click',function(){
/*
常见参数:
url:请求的地址
success:请求成功的回调函数
type:不写是get 可以指定 get,post
dataType:数据的类型
data:发数据 可以写js对象
beforeSend:发送之前调用的匿名函数
可以return false 阻止该次请求
验证用户的数据 是否填了
error:请求失败以后 会调用
*/
$.ajax({
url:'jq_ajax.php',
success:function(data){
console.log(data);
$('#box').append(data.name+'<br>'+data.hobby);
},
type:'post',
dataType:'json',
data:{"name":"张信哲","skill":"情歌王子"},
beforeSend:function(){
console.log('发送之前调用');
},
error:function(){
console.log('请求失败了');
}
});
});
});
</script>
---------------------
作者：diligentkong
来源：CSDN
原文：https://blog.csdn.net/diligentkong/article/details/72851443
版权声明：本文为博主原创文章，转载请附上博文链接！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
之前研究了定位，想用百度地图，但是用百度地图的
JavaScript API里面的浏览器定位根本不行，要用插件，很多人说本身带的这个cordova-plugin-geolocation插件因为网络问题，只有ios可以用，然后找到了专门针对安卓的cordova-qdc-baidu-location插件，但是这个插件不知道是不是我使用的问题，得到的数据可以弹出来，但是数据并不像这个插件所说的数据格式是
{
latitude : 纬度,
lontitude: 经度, ... }
这样的，而是字符串，不是json字符串，弄了半天还是取不到里面的关于经纬度的值，然后发现了现在的这个定位插件cordova-plugin-baidumaplocation这个插件返回的数据格式是json的，可以直接获取。
因为网络配代理的原因，一直添加不上插件，今天才发现用cordova-plugin-baidumaplocation插件定位其实挺简单的。
1.申请AK值。
地址：http://lbsyun.baidu.com/
需要申请两个或者三个（配置ios），一个是js的，一个是android的（三个的话还有一个ios的，但是这边直接只写安卓的，其实ios是一样的）
注：包名要一致
2.添加插件.
命令：
cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="<API_KEY_ANDROID>" --variable IOS_KEY="<API_KEY_IOS>"
注意：是没有<>这种尖括号的。
到此为止准备工作基本上晚了，开始代码部分：
1.引入百度地图：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLsK9qUii8uBZlkPAQUozAf9mR5xNVZF"></script>
这个引入是为了转化经纬度为地址和显示地图。
2.在html页面上写两个 标签：
<button class="button" ng-click="getarea()">点击我获取地址百度</button> <div id='allmap' style=""></div>
div标签是为了放地图的。
3.js部分：
$scope.getarea=function(){ //myaddr(116.324499,39.899216); // 进行定位 baidumap_location.getCurrentPosition(function (result) { var latitude=result.latitude; var lontitude=result.lontitude;
myaddr(lontitude,latitude);
}, function (error) { });
} //根据定位得到的经纬度对地址进行解析 function myaddr(lontitude,latitude){ //alert("我的地址是："+lontitude+","+latitude); // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(lontitude, latitude);//34.7534880000,113.6313490000 map.centerAndZoom(point, 12); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 //把地址在地图上标出来 var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){ var addrmsg=rs.address; //var addComp = rs.addressComponents; //详细的分省市县街道的信息 //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); var opts = {
width : 200, // 信息窗口宽度 height: 50, // 信息窗口高度 } var infoWindow = new BMap.InfoWindow("地址:"+addrmsg, opts); //创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口 });
}
4.css部分：其实可以不要的，这是因为地图中的地址显示的窗口看起来有点问题，虽然改了依旧不好看，但是功能实现了。
.BMap_pop{ top: 70px !important; } .BMap_bubble_content{ width: 95% !important; } .BMap_center{ top: 26px !important; }
注：现在得到的地址是省市县街道地址，想得到诸如：北京市朝阳区XX大厦附近这样的地址的话还没有研究，等研究出来了再补上。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com