整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
TML5最近一次集中爆發(fā)是在微信推出小程序的時(shí)候。然而很多人還是不太了解HTML5可以干什么，下面HTML5培訓(xùn)專(zhuān)家來(lái)為大家介紹一下。
1、制作時(shí)尚的表單
表單是Web設(shè)計(jì)的重要組成部分，常見(jiàn)的有注冊(cè)表單、聯(lián)系表單以及反饋表單，表單設(shè)計(jì)應(yīng)該在不影響用戶(hù)體驗(yàn)和可用性的前提下盡量美觀，以吸引用戶(hù)填寫(xiě)內(nèi)容。也為大家在編程的工作中提供了很多的便利。
2、構(gòu)建實(shí)用的HTML5框架
框架幫助我們更快速、更容易實(shí)現(xiàn)功能，讓你集中精力于更重要的方面，而不會(huì)浪費(fèi)時(shí)間做重復(fù)的任務(wù)。他可以幫我們實(shí)現(xiàn)想要的功能，讓你更加的重點(diǎn)。也可以讓用戶(hù)更直觀的找到重點(diǎn)、發(fā)現(xiàn)重點(diǎn)。
3、開(kāi)發(fā)豐富多彩的游戲
盡管HTML5標(biāo)準(zhǔn)還在不斷完善過(guò)程中，一些游戲開(kāi)發(fā)者已經(jīng)使用HTML5開(kāi)發(fā)出了非常有趣的戲。
4、以更直觀的方式讓數(shù)據(jù)可視化呈現(xiàn)
有的時(shí)候，你需要在網(wǎng)站中以更直觀的可視化方式呈現(xiàn)大量的數(shù)據(jù)或者信息，這個(gè)時(shí)候就需要圖表解決方法幫助你實(shí)現(xiàn)。
5、HTML5的未來(lái)-驚艷的HTML5示例和實(shí)驗(yàn)
HTML5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，盡管HTML5的實(shí)現(xiàn)還有很長(zhǎng)的路要走，但HTML5正在改變Web。
渥瑞達(dá)培訓(xùn)機(jī)構(gòu)提供良好的教學(xué)學(xué)員，良好的師資以及行業(yè)資源使得渥瑞達(dá)培訓(xùn)機(jī)構(gòu)的教學(xué)永遠(yuǎn)都是跟隨行業(yè)進(jìn)步的步伐。說(shuō)了這么多，其實(shí)就是想讓你更加了解HTML5開(kāi)發(fā)。如此優(yōu)秀的資源和別人望眼欲穿的實(shí)習(xí)機(jī)會(huì)，再不行動(dòng)就要被后來(lái)居上的技術(shù)人員拍死在沙灘上了。
面我們介紹四款比較常用的前端開(kāi)發(fā)工具，具體哪一款最好用，因人而異，大家可以根據(jù)自己的情況，選擇一款個(gè)人認(rèn)為最好用的web前端開(kāi)發(fā)工具。
Sublime Text憑借其漂亮的用戶(hù)界面和極其強(qiáng)大的功能，被譽(yù)為“神級(jí)”代碼開(kāi)發(fā)工具。
Sublime Text 支持多種編程語(yǔ)言的語(yǔ)法高亮，擁有優(yōu)秀的代碼自動(dòng)完成功能。此外，它還擁有代碼片段(Snippet)的功能，可以將常用的代碼片段保存起來(lái)，在需要時(shí)隨時(shí)調(diào)用。Sublime Text 支持 VIM 模式，可以使用VIM模式下的多數(shù)命令。
Sublime Text 還具有良好的擴(kuò)展能力和完全開(kāi)放的用戶(hù)自定義配置與神奇實(shí)用的編輯狀態(tài)恢復(fù)功能，支持強(qiáng)大的多行選擇和多行編輯。
該編輯器在界面上比較有特色的是支持多種布局和代碼縮略圖。利用右側(cè)的文件縮略圖滑動(dòng)條，可以方便地觀察當(dāng)前窗口在文件的哪個(gè)位置。
如果你已經(jīng)有一定的前端基礎(chǔ)，我相信Sublime Text更加適合你。Sublime Text可以讓你快速地進(jìn)行開(kāi)發(fā)，強(qiáng)力推薦!
Microsoft Visual Studio，簡(jiǎn)稱(chēng)VS，是微軟公司的開(kāi)發(fā)工具包系列產(chǎn)品，是目前最流行的Windows平臺(tái)應(yīng)用程序的集成開(kāi)發(fā)環(huán)境(IDE)。所謂的集成開(kāi)發(fā)環(huán)境，就是指用于提供程序開(kāi)發(fā)環(huán)境的應(yīng)用程序，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶(hù)界面工具。這么復(fù)雜，誰(shuí)看得懂呀?哎，簡(jiǎn)單來(lái)說(shuō)，Visual Studio是一個(gè)具有很多用途的開(kāi)發(fā)工具，它可以用來(lái)開(kāi)發(fā)功能很強(qiáng)大的網(wǎng)站。這下懂了嗎?
Visual Studio是筆者推薦的三款開(kāi)發(fā)工具中功能最強(qiáng)大的，但是使用起來(lái)也相對(duì)復(fù)雜。不過(guò)用習(xí)慣了之后，開(kāi)發(fā)效率還是非常高的。Visual Studio不僅可以開(kāi)發(fā)靜態(tài)網(wǎng)頁(yè)，還非常有利于開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)。在開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)方面，可以說(shuō)Visual Studio比Dreamweaver更勝一籌。前面我們說(shuō)過(guò)，靜態(tài)網(wǎng)頁(yè)一般是沒(méi)有交互性的，用戶(hù)能做的也僅僅是瀏覽網(wǎng)頁(yè)。而在動(dòng)態(tài)網(wǎng)頁(yè)中，作為用戶(hù)，我們可以參與評(píng)論交流、上傳文件，以及使用與服務(wù)器交互。
WebStorm 是jetbrains公司旗下一款JavaScript 開(kāi)發(fā)工具。已經(jīng)被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。相比Dreamweaver很不智能的智能提示來(lái)看，WebStorm對(duì)html特別是HTML5和JS的智能提示簡(jiǎn)直堪稱(chēng)大神，很值得去使用。不過(guò)WebStorm不像Dreamweaver一樣支持拖拽或者插入代碼的方式來(lái)做HTML，如果你是初級(jí)入門(mén)者，需要拉表格完成布局的話(huà)，WebStorm完全不合適你的使用。WebStorm只適合手寫(xiě)代碼的前端開(kāi)發(fā)者使用。
相比VS 2010這樣的工具來(lái)說(shuō)，WebStorm足夠的輕量級(jí)，下載只有幾十M，安裝快速方便，對(duì)機(jī)器性能要求低，占有足夠少的內(nèi)存，而且支持跨平臺(tái)的使用，非常方便。而且對(duì)js的提示也足夠的先進(jìn)。還帶js調(diào)試功能。
Dreamweaver，簡(jiǎn)稱(chēng)DW，是Adobe公司的一款非常優(yōu)秀的網(wǎng)頁(yè)開(kāi)發(fā)工具，并且深受廣大用戶(hù)(特別是初學(xué)者)的喜愛(ài)。現(xiàn)在最新的版本是Dreamweaver CC。
對(duì)于初學(xué)者來(lái)說(shuō)，Dreamweaver是最理想的開(kāi)發(fā)工具，是廣大前端入門(mén)者的首選。但是要強(qiáng)調(diào)一下，如果選擇了Dreamweaver作為開(kāi)發(fā)工具，我們一定不要使用Dreamweaver那種傳統(tǒng)的、使用操作界面的方式來(lái)開(kāi)發(fā)網(wǎng)頁(yè)。這種開(kāi)發(fā)方式已經(jīng)被摒棄很久了。筆者當(dāng)初剛剛接觸前端開(kāi)發(fā)的時(shí)候，也是深受其害。當(dāng)時(shí)跟著一個(gè)視頻學(xué)，第一步點(diǎn)擊哪里，第二步點(diǎn)擊哪里……點(diǎn)點(diǎn)點(diǎn)，全部是用鼠標(biāo)來(lái)點(diǎn)，點(diǎn)到我頭都暈了。
大家不要覺(jué)得Dreamweaver用鼠標(biāo)操作的方式來(lái)制作網(wǎng)頁(yè)既簡(jiǎn)單又方便。學(xué)了一段時(shí)間你會(huì)發(fā)現(xiàn)，你學(xué)到的根本不是知識(shí)，而只是開(kāi)發(fā)網(wǎng)頁(yè)時(shí)你應(yīng)該點(diǎn)哪里!還有，當(dāng)你用Dreamweaver鼠標(biāo)操作的方式來(lái)制作網(wǎng)頁(yè)時(shí)，你會(huì)發(fā)現(xiàn)弊端何其多!特別是冗余的代碼，一堆一堆的，讓開(kāi)發(fā)出來(lái)的網(wǎng)站難以在后期進(jìn)行維護(hù)。
當(dāng)然，Dreamweaver還是挺不錯(cuò)的一個(gè)開(kāi)發(fā)工具，我并非反對(duì)大家使用Dreamweaver，而是反對(duì)大家使用Dreamweaver界面操作的方式來(lái)制作網(wǎng)頁(yè)。對(duì)于剛剛接觸前端開(kāi)發(fā)的新手來(lái)說(shuō)，可以使用Dreamweaver作為開(kāi)發(fā)工具，不過(guò)本人強(qiáng)烈建議你一定要用代碼去寫(xiě)網(wǎng)頁(yè)，別用鼠標(biāo)點(diǎn)擊的方式進(jìn)行。還有，我可以很清楚地告訴你，現(xiàn)在大部分網(wǎng)站都不用鼠標(biāo)操作實(shí)現(xiàn)的，而是靠編寫(xiě)代碼。哪怕人家用Dreamweaver開(kāi)發(fā)，都不會(huì)單純采用鼠標(biāo)點(diǎn)擊的方式。
不過(guò)話(huà)說(shuō)回來(lái)，Dreamweaver依然是初學(xué)者的首選開(kāi)發(fā)工具，簡(jiǎn)單方便。但是我們一定不要使用“點(diǎn)點(diǎn)點(diǎn)”方式來(lái)開(kāi)發(fā)網(wǎng)頁(yè)，切記。
改造一個(gè)項(xiàng)目上 Google Play 與 App Store 時(shí)候，選擇了 H5+，就是數(shù)字天堂、UniAPP、HBuilder 那家的技術(shù)方案。
這里總結(jié)下原因分享給大家做個(gè)參考，同時(shí)把相關(guān)的坑也跟大家說(shuō)下，希望可以在某個(gè)時(shí)候幫到各位。
選擇這個(gè)方案原因后來(lái)想想其實(shí)很簡(jiǎn)單，就是這個(gè)應(yīng)用是先有了 H5 版本，即移動(dòng)端瀏覽器版本，然后想要復(fù)刻到 APP 端，在應(yīng)用市場(chǎng)售賣(mài)。
請(qǐng)注意，“先有 H5 版本”，然后想要轉(zhuǎn)成APP，不是從零開(kāi)始哦。
其實(shí)參考的技術(shù)方案有很多，比如 React Native（Taro），Vue（UniAPP），甚至是 ionic、NativeScript 都簡(jiǎn)單試過(guò)，當(dāng)然還有類(lèi)似的 Cordova。
其實(shí)像 React Native（Taro）、Vue（UniAPP）以及 NativeScript 被砍掉其實(shí)很簡(jiǎn)單，背景就決定除非完全重構(gòu)，否則這幾個(gè)方案就是浪費(fèi)生命，幾乎等于重寫(xiě)一遍。這么說(shuō)的原因有二：
1、H5 版本有的情況下，不論是 DOM 寫(xiě)法，還是虛擬 DOM 的組件，都是不通用的，比如你無(wú)法把 div 直接當(dāng)做 view 來(lái)用，同時(shí)也不能將 button 當(dāng)做 button 用……
2、H5 的 API 與移動(dòng)端不通用，比如 video 的 API，在 H5 與移動(dòng)端根本就是兩個(gè)東西。
然后就是 ionic 與 Cordova 的排除原因，很簡(jiǎn)單：文檔與環(huán)境。
1、ionic 與 Cordova 的文檔在國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境下不好找，出問(wèn)題很難搞，尤其大概率我這個(gè)玩意兒要寫(xiě)插件……我都寫(xiě)插件了，那干脆上 OC 和 Java 算了。
2、再就是環(huán)境，沒(méi)錯(cuò)，這倆都需要 XCode 與 Android Studio 在你的設(shè)備上。雖說(shuō)我是都有，但是我的目的很單純，就是把 H5 套殼啊，費(fèi)那么大勁干嘛？一點(diǎn)都不環(huán)保。
剩下我還知道且用過(guò)的就是 html5plus 與 apicloud 了，后者已經(jīng)賣(mài)身就算了，只剩下 html5plus。
其實(shí)吧，這個(gè)“土土”的，還是意外的好用的。
這玩意兒怎么用就不介紹了，基本有手就能用。
下載——?jiǎng)?chuàng)建5+項(xiàng)目——把 H5 代碼整進(jìn)去——運(yùn)行即可。
這里著重說(shuō)說(shuō)遇到的坑。
對(duì)了，先看下原來(lái)的 H5 效果，避免不知道是干嘛的。
簡(jiǎn)單來(lái)說(shuō)，就是通過(guò)瀏覽器（或 APP 內(nèi)置瀏覽器）加載 3D 模型，同時(shí)調(diào)用攝像頭的圖像，將 3D 模型與攝像頭的拍攝一起繪制出一張圖片，用來(lái)演示用。比如做工程的工程模型，在現(xiàn)場(chǎng)比劃比劃就可以大概看出來(lái)效果，不需要把場(chǎng)景也建模了。嗯，大概就這么個(gè)東西。
H5 端的技術(shù)就是 three.js + video + 攝像頭，比較簡(jiǎn)單，安卓瀏覽器兼容性良好，蘋(píng)果腎8沒(méi)問(wèn)題，其他劉海設(shè)備沒(méi)測(cè)（后面打包成 APP 發(fā)現(xiàn)有點(diǎn)問(wèn)題）。
好了，可以說(shuō)問(wèn)題了：
1、瀏覽器可以直接從 a 標(biāo)簽下載圖片，APP 不行，需要解決授權(quán)問(wèn)題。
2、蘋(píng)果設(shè)備默認(rèn)的 video 層級(jí)問(wèn)題。
3、iOS 設(shè)備在 APP 內(nèi) video 自動(dòng)播放權(quán)限問(wèn)題。
4、iOS 設(shè)備加載本地路徑文件問(wèn)題。
上面幾個(gè)是比較坑的，就是那種想不到卻發(fā)生的……
問(wèn)題1，這個(gè)需要把原本 a 標(biāo)簽下載的 base64 內(nèi)容，通過(guò)原生的 bitmap 進(jìn)行轉(zhuǎn)換，最終再將 bitmap 存到相冊(cè)。
問(wèn)題2，先說(shuō)問(wèn)題是啥樣的，就是 iOS 會(huì)把 video 全屏，且層級(jí)賊高，與上面圖完全不同，就只能看到一個(gè)帶有“直播”字樣的 video。解決方案很簡(jiǎn)單，給 video 標(biāo)簽添加“webkit-playsinline playsinline”屬性，即可要求同層渲染。
問(wèn)題3，這個(gè)就是老生常談的問(wèn)題了，屬于想不到，但是遇到有會(huì)“果然如此”的問(wèn)題。沒(méi)啥好辦法，不用原生化處理，就只能產(chǎn)品層面變更，所以給加上了“播放”與“停止”的按鈕……
問(wèn)題4，這個(gè)最粗暴，直接把本地地址全部換成遠(yuǎn)程 URL 就好了，因?yàn)楸緛?lái)就是讓用戶(hù)自己傳遠(yuǎn)程 URL 的，之前是想要本地演示加載快，所以用了本地地址。
還有就是一些具體的代碼怎么寫(xiě)，比如如何獲取 Android 與 iOS 的權(quán)限狀態(tài)與申請(qǐng)權(quán)限，這種百度搜下就有了。
請(qǐng)注意，還真得用百度……“土土”的，國(guó)內(nèi)還得是百度。
其實(shí)現(xiàn)在用 H5 開(kāi)發(fā)一些東西還是很簡(jiǎn)單，畢竟很多功能 H5 基本都能實(shí)現(xiàn)了（不考慮兼容性的話(huà)），可以看下這個(gè)網(wǎng)站，我比較喜歡去，可以定期學(xué)習(xí)新東西，強(qiáng)烈推薦收藏：What Web Can Do Today
別的沒(méi)了，歡迎大家溝通方案，我是被坑的挺難受的，尤其是 iOS……
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
