⑴ 小白入門 webApp開發中如何進行相冊/拍照
點擊用戶頭像後，彈出actionSheet，選著從相冊或是拍照；選著圖片後就調用上傳方法，上傳圖片；在上傳之前先壓縮了一下圖片。
使用流程
彈出actionSheet
/
*點擊頭像觸發*/
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "從手機相冊選擇"
}];
plus.nativeUI.actionSheet({
title: "修改用戶頭像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按鈕點擊事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg();/*打開相冊*/
break;
default:
break;
}
})
}
}, false);
拍照上傳
//拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
uploadHead(s); /*上傳圖片*/
}, function(e) {
console.log("讀取拍照文件錯誤：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.png"
})
}
從相冊選圖上傳
//本地相冊選擇
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.To(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上傳圖片*/
//變更大圖預覽的src
//目前僅有一張圖片，暫時如此處理，後續需要通過標准組件實現
},
function(e) {
console.log(' image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.To(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHead(path); /*上傳圖片*/
},
function(e) {
console.log(' image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("讀取拍照文件錯誤：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
圖片上傳和壓縮
//上傳頭像圖片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
mainImage.src = imgPath;
mainImage.style.width = "60px";
mainImage.style.height = "60px";
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/*在這里調用上傳介面*/// mui.ajax("圖片上傳介面", {// data: {// // },// dataType: 'json',// type: 'post',// timeout: 10000,// success: function(data) {// console.log('上傳成功');// },// error: function(xhr, type, errorThrown) {// mui.toast('網路異常，請稍後再試！');// }// });
}
}
//將圖片壓縮轉成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > 100) {
height = Math.round(height *= 100 / width);
width = 100;
}
} else {
if (height > 100) {
width = Math.round(width *= 100 / height);
height = 100;
}
}
canvas.width = width; /*設置新的圖片的寬度*/
canvas.height = height; /*設置新的圖片的長度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*繪圖*/
var dataURL = canvas.toDataURL("image/png", 0.8);
return dataURL.replace("data:image/png;base64,", "");
}
總結
在使用中，我們可以發現，使用流程是非常清晰的；某種程度來說比原生iOS的使用還要簡單一些。
⑵ web前端怎樣入門
先說一下自學前端如何入門吧。
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：Node.js全棧開發(1周)
內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
⑶ 簡單粗暴，詳細得不要不要的 JavaWeb快速入門
1. 實驗環境准備
（假設你已經裝好了jdk，如果不會安裝jdk，請參考這篇文章）
1.1 安裝一個eclipse或者MyEclipse（本文以eclipse為例），其實所謂的安裝就是網上去下載一個eclipse，然後解壓一下就好了。
1.2安裝tomcat，網上下載一個，然後解壓一下。我這次使用的tomcat容器配的是8080埠。
1.3 將tomcat配置到eclipse中。具體步驟為：Window -- Preferences -- Server -- Runtime Environment -- Add 將tomcat解壓後的路徑配置上去就行了。
本文假設讀者已經對tomcat，eclipse有一定的了解。
2. 新建web項目
首先，一言不合就打開eclipse
Paste_Image.png
我們新建一個項目，File -- new -- Dynamic Web Project。
項目名稱是web，點擊Next
Paste_Image.png
Paste_Image.png
build\classes是默認的編譯目錄，還是點擊Next
Paste_Image.png
好的，最後點擊Finish，一個web項目就建立好了。
目錄結構
Paste_Image.png
2.啥叫JavaWeb項目，它能幹嘛？
JavaWeb項目就是一個應用程序，你不要以為它有多麼神秘。你每天打開的QQ就一個應用程序，你在手機上打開的微信，網路地圖等等，這些都是應用程序。
不同的是，QQ是一個本地客戶端程序，它需要你在自己的電腦上安裝一個客戶端，然後你打開QQ，可以登錄，聊天。
QQ肯定也分客戶端和服務端，我們電腦上裝的就是客戶端，你要知道的一點是，我們發送消息，發送到哪裡去了呢？
沒錯，肯定是發送到QQ的伺服器上了，那裡保存著我們的所有數據。
想想也不可能在本地，因為我們在電腦上發送的消息，在手機QQ上不是也能看到嗎？這就說明，肯定是上傳到它的伺服器然後保存下來了。
而Web項目是什麼呢？
它也是一個應用程序，只不過它的客戶端是運行在瀏覽器上的。
我們打開瀏覽器，訪問一個地址，比如 http://www.jianshu.com/
這個就是我們的訪問路徑，我們通過這個URL向簡書的伺服器提交請求，然後伺服器進行處理，給你回應。
接下來，我們就看到出來一個網頁。
我們在這個網頁上可以寫文章，點贊，收藏，等等。
我們的每一步操作，其實都和伺服器做了一個交互。
比如一個登錄功能，當我們滑鼠點擊那個登錄按鈕，瀏覽器就向伺服器提交了一個請求，伺服器進行處理，然後操作資料庫。最終，它會得出一個結果，就是說，到底能不能讓你登錄，總會有個說法。
如果你密碼寫錯了，它可能就會得出一個用戶名或密碼錯誤的結論。然後，這個信息會從伺服器返回到前台，前台就是瀏覽器。
所謂的前台就是你的瀏覽器，沒什麼神秘的。
前台接受到後台傳過來的信息後，進行一些處理，然後給你個提示，比如，告訴你用戶名或密碼錯誤。
這就是一個完整的交互過程。
現在隨著網速越來越好，瀏覽器的性能越來越強大，我想web肯定是未來的大趨勢。畢竟，誰都不希望在電腦上安裝一大堆客戶端吧。
只用一個瀏覽器多好。
有了web，我只需要有一個瀏覽器，然後就能通過互聯網獲取我想要的資源了。這樣不是很美妙嗎？
近幾年H5非常流行，尤其是移動端，因為手機瀏覽器基本上都支持css3。一樣的道理，我們肯定也不希望在手機上安裝一大堆應用，卡都卡死了，如果能直接訪問一個網頁，就能獲得我想要的服務就好了。
而且現在WIFI也普遍了，如果以後流量能沒有限制，那麼APP的熱度很可能會逐漸被web取代。
當然，現在是不太可能的，畢竟訪問網頁要流量啊，而我在手機上安裝了APP，就好像電腦的QQ一樣，大部分資源文件就在我本地，我不需要每次都去聯網下載。比如圖片，app就沒事，因為就在本地，可是如果用web，我每次訪問那個網頁，就需要把圖片重新下載一遍。這樣不是很浪費流量嗎？
3. 手工搭建web項目
現在，為了說明伺服器和web項目的概念，我們先不用eclipse，來手工搭建一個web項目。
伺服器，正常情況下就是一台配置高一點的電腦，除非是那種大型的專用伺服器。
一般來說，所謂的伺服器，就是電腦。
比如我現在有一台電腦，給他裝了一個linux系統或者windos系統，然後我說，好了，從今以後，這就是伺服器了。現在伺服器一般都是用linux系統的。
那麼tomcat又是什麼？
tomcat其實也是一個應用程序，你網上下載的tomcat往往是一個壓縮包，然後我們解壓以後就相當於安裝好了。
可以這么理解：
伺服器就是一台電腦，而tomcat是一個容器，專門存放web項目的容器。
以下我都將tomcat稱為tomcat容器。
我們看到在tomcat容器根目錄下，有一個webapps文件夾
裡面是這樣的：
Paste_Image.png
好的，現在我要發布一個項目了，我只需要把一個已經做好的web項目往裡面一丟就行了。
除了webapps，我們還發現一個bin目錄。一般來說，可執行的文件都放在bin目錄下。
Paste_Image.png
打開bin，找到一個startup.bat文件。這就是啟動tomcat的東西，雙擊它，tomcat就被啟動了。
然後，瀏覽器可以訪問tomcat裡面的項目。
現在我們來手工搭建一個web項目，首先，在webapps目錄下新建一個文件夾，是的，就是文件夾，不管你項目是什麼，肯定還是放在文件夾裡面的。
Paste_Image.png
項目名稱就叫做webapp。
打開webapp，根據web項目的規范，我們需要有一個WEB-INF文件夾。
Paste_Image.png
然後，在WEB-INF文件夾裡面，必須要有一個web.xml文件。
xml文件，就是一個描述性的文件，我現在的觀點如下：
XML = JavaBean = Json = HashMap
它無非就是描述一些東西，保存一些數據而已。
好的，我們在裡面新建一個web.xml。這個文件非常重要，正因為它的存在，tomcat容器才會知道這個文件夾裡面竟然是一個web項目。
否則，tomcat容器是不知道這個web項目的，它只會將myapp文件夾看做是一個文件夾而已。
Paste_Image.png
我們用記事本打開web.xml，將以下代碼拷貝進去。
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>web</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
<?xml version="1.0" encoding="UTF-8"?>表示這是一個1.0版本的XML文件，編碼為UTF-8。
<web-app></web-app>就是這個XML文件的一個根節點，就是告訴你，我這個xml文件裡面，有一個東西叫做web-app。
XML的一個作用就是配置文件，web.xml本身就是一個配置文件。在web項目中，我們應用xml最多的也就是配置一些參數。
配置參數，就是給屬性賦值嘛，沒什麼神秘的。
包括我們學習JavaSE，歸根到底，一直在做的一件事就是new對象，然後調用方法，調用方法的目的一方面是做一些事情，另一方面不還是給屬性賦值嘛。
你可以把web.xml看做是一個java類，類名叫做 webApp。它裡面有兩個屬性，分別是display-name和welcome-file-list。
display-name是發布名稱，也就是項目的名字。
welcome-file-list 是歡迎頁面，就是說，當你在瀏覽器直接訪問這個myapp項目，默認跳轉的頁面。
想像一下，應該會變得非常好理解。
⑷ WebApp如何入門，需要用到哪些技術
前端HTML+CSS沒啥好說的，
js框架方面不推薦jQuery和jQuerymobile，一個jQuery就差不多80k 還讓不讓2G用戶活了（沒錯我就是） 推薦zepto 體積很小也很實用，如果你更在意性能並且只需要很小一部分DOM操作的話，不妨試試sprintjs..
別的感覺沒啥了 無非就是一個針對手機端的design和responsive的頁面 然後就是壓縮壓縮 優化 優化 這兩點比搞頁面費勁的多
至於後端語言……會啥用啥吧 沒啥區別
⑸ web初學者都需要了解學習些什麼
web前端初學者剛開始肯定要知道web前端是用來做什麼的，後期的發展，薪資這些都要了解。一個重中之重就是確認自己是否真的能學下去，下面我給你具體介紹一下：
web前端開發的的功能主要是用來製作網頁，將文字、圖片、動畫等元素放到頁面上，讓網頁的內容更加豐富和生動，讓用戶能有更好的瀏覽體驗。那麼這些都是通過什麼來實現的呢?主要是通過html5、css3、JavaScript來做到的，html是寫頁面上的內容，css是用來為html頁面提供布局和格式，例如大小，顏色等，JavaScript是行為。我們開始學習的階段是html+css，入門是非常簡單的，想要學習了解web前端的小夥伴都可以通過相關書籍和一些免費的課程學習，會給自己很大的成就感和自信心，這個階段一般學習要兩周的時間左右，如果是想要更深入的理解，可能會需要更多的時間。之後要學習的web前端知識點會相對第一階段難一點兒，JavaScript的學習和能夠熟練的 Touch、jQuery、Zepto，
掌握Vue基礎語法和指令; 掌握Vue計算屬性和監聽的使用方法; 掌握Vue組件的定義和基本使用，以及常見瀏覽器的兼容，講這些東西學會，一般所需要的時間至少要兩三個月的時間了，將這些知識掌握，也可以間接的說明web前端已經入門了，可以通過這些來去找到一份工作。但這肯定不是學習的終點，之後其它的web前端知識我們也可以一邊工作一邊進行學習。
如果你是沒有基礎的話，建議你先自學打打基礎，後邊還是報班學習效率會更高，學習會更系統，也會學到現在企業運用比較多的技術，積累更多的實戰經驗，找工作才更容易
⑹ web前端怎麼入門學習
入門標准很簡單
就一條：達到能參與 Web 前端實際項目的開發水平。請注意，是實際項目，這就需要了解如今的實際項目開發都用了哪些技術棧。HTML/CSS/JavaScript 這三大基礎技術棧肯定是需要掌握的，但要能參與實際項目開發，肯定還要掌握其他一些主流的框架體系。
幾年前，jQuery + Bootstrap可以說是一統江湖，是前端領域的絕對霸主。而這幾年，隨著Angular、React、Vue等框架的興起，變成了百家爭鳴的局面。這幾年，Web 前端的技術發展真是太快了，相應地，技術棧也就變得非常多，除了最基本的HTML/CSS/JavaScript，以及Vue/React/Angular等這些 JavaScript 框架和各自的生態體系，還有 CSS 預處理器Sass/Less/Stylus，還有TypeScript，還有grunt/webpack/gulp等各種打包構建工具，還有其他一大堆技術棧。
這么多技術棧，我們不可能全都掌握，就算是資深的前端工程師，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些則熟悉 Vue，很少有人對三種框架生態體系都非常了解。因此，我們入門也沒必要每種框架都學習，只要挑選一種就夠了。而且，作為全棧，我們學習一門技術更重要的是要學習技術背後的編程思想、設計思想、架構思想等。而不管是 Angular、React 還是 Vuew，其背後的核心設計思想都是組件化的設計，因此只要掌握一種框架，我們也就能學習到前端技術的核心思想了。
那麼，我們應該學哪種框架體系呢？我的建議是從 Vue 開始，因為 Vue 的學習成本是最低的，入門簡單，而且這兩年 Vue 可以說是出現了爆發式的增長，已經直逼 React。React 的主要學習成本在於要掌握 JSX 語法，而且文檔還大多都是英文。Vue 因為是國人開發和維護的，自然對國內的開發者更友好。Angular 則是個大而全的框架，顯得太重，學習成本自然最高。至於 jQuery + Bootstrap 這套，已經過時了，建議沒必要去學習了，畢竟我們的時間很寶貴，還有一大堆更有價值的東西等著我們去學。
因此，我們要入門 Web 前端開發的話，除了要學習 HTML/CSS/JavaScript 三大基礎技術棧，還要了解 Vue 體系。而 Vue 體系，除了 Vue 框架本身，還包括其他技術棧。
下方是學習前端開發的學習路線：
⑺ web前端零基礎該怎麼去學習
web前端作為互聯網相關的重要崗位，許多互聯網大廠（如阿里騰訊等）在招聘時會作出要求。學好web前端對於將來掌握前端後端開發、成為全棧架構師的學習很有幫助。
想學習web前端需要掌握的內容也是不少的，對於自學的同學來說會有一些難度，不推薦自學能力差的人。我們在學習的時候需要分階段進行，做到有計劃的學習與訓練，具體的學習順序如下：
web前端學習順序：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
想要系統學習，你可以考察對比一下開設有IT專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，建議實地考察對比一下。
祝你學有所成，望採納。
⑻ WebAPP入門先學什麼
WebApp是針對NativeApp而產生的，Webapp最直接明了的定義就是一個針對Iphone、Android優化後的移動網站，它使用的技術無非就是HTML或HTML5、CSS3、JavaScript，服務端技術JAVA、PHP、ASP等。慕課網自學。
⑼ 學習Web前端 如何快速的從入門到精通
前端開發可以自學，也可以選擇口碑好、信譽佳的機構學。
互聯網的發展帶動了多種行業的發展，Web前端在互聯網行業也發揮著越來越重要的作用。Web前端開發不僅在形式、內容和功能上也有了極大的豐富，而且對前端開發人員的要求越來越高。
web全棧工程師5.0課程學習內容包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。
祝你學有所成，望採納。
⑽ WebAPP怎麼入門
WebApp是一種新出現的基於WEB形式的類應用程序，運行在高端的移動終端設備上，其應用范圍會越來越廣。
都知道在高端智能手機系統中有兩種應用程序：一種是基於本地（操作系統）運行的APP；一種是基於高端機的瀏覽器運行的WebApp。