如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
全局組件和局部組件
* 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn