整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
5怎么植入第三方音視頻？
H5怎么設(shè)置文件加密下載？
如何“盜取”別人的H5素材？
以下和H5相關(guān)的隱秘技能，是我回顧這半年多在iH5.cn做H5的經(jīng)驗，總結(jié)出8個不容易被人發(fā)覺，在微信H5上卻十分實用的技巧。
·
【1】植入音頻
制作一個包含很多音視頻的H5，上傳素材很耗時間，文件的大小也有限制，但這種問題通過外鏈就可以解決。
什么外鏈？必須是音視頻的資源地址，也就是下載地址才行。因為HTML5能對音視頻提供原生支持，MP3、MP4格式文件一般能在國內(nèi)瀏覽器直接播放。
怎么獲取這個鏈接？以蝦米音樂為例，感謝有高人破解了它加密的音樂資源地址！方法如下：http://link.hhtjim.com/xiami/1769962750.mp3（把左邊這串標(biāo)識歌曲的數(shù)字換成蝦米對應(yīng)歌曲的ID，就得到這首歌的資源位置）。
那歌曲ID在哪里看？點進歌曲名進入內(nèi)容頁，比如上面的《因為愛情》，在地址頁中song/后面那串?dāng)?shù)字1769962750就是ID。
【2】植入視頻
使用“網(wǎng)頁”功能，可以在H5中嵌入第三方頁面。如下，在H5中加入一個“網(wǎng)頁”，資源位置寫網(wǎng)頁地址即可（比如這里是m.baidu.com）。
這和視頻有半毛錢關(guān)系？別激動，因為國內(nèi)視頻利潤空間比音樂大得多，騰訊優(yōu)酷等網(wǎng)站為防止下載，各種防范手段無所不用其極，“視頻”功能播不了非資源類型的視頻。還好嵌入地址是有的！要不然微信公眾號什么的怎么推送視頻？
如下，把這個地址作為網(wǎng)頁的資源位置，問題就解決了。
http://player.youku.com/player.php/sid/XMTU0OTY0MTE4NA/v.swf（替換XMTU0OTY0MTE4NA為所需視頻ID即可）
https://v.qq.com/iframe/preview.html?vid=l0187ggnc7d（替換l0187ggnc7d為所需視頻ID即可）
上面是優(yōu)酷和騰訊的視頻嵌入地址，因為都采用了HTML5網(wǎng)頁的響應(yīng)式設(shè)計，能自適應(yīng)屏幕，所以調(diào)整網(wǎng)頁長寬也作用于視頻。
【3】植入地圖導(dǎo)航
地圖導(dǎo)航的植入也不復(fù)雜，比如百度地圖的話，先打開百度地圖移動版網(wǎng)頁：http://map.baidu.com/mobile/webapp，搜索你的目標(biāo)地點。
這里用的是“南方傳媒大廈”，點擊右上角的“地圖”，生成一個詳情頁。復(fù)制這個頁面的鏈接，設(shè)為網(wǎng)頁的資源位置就OK了，效果如下：
【4】一鍵下載文件
既然說到外鏈就是下載鏈接，前面能植入第三方音頻，也能直接下載這首歌。如下，設(shè)置一個事件，在手機中輕觸按鈕就能下載音頻。
使用“文件”功能，可以上傳所有格式的文件，只是為避免服務(wù)器過載，文件大小有一定限制。
有時只想上傳個簡單的PDF，但百度云、金山網(wǎng)盤等玩意兒老要登錄煩得很！如果文件不大，可以利用iH5上傳文件生成的資源地址，產(chǎn)生一個能點擊下載的鏈接（根據(jù)多次實踐，我可以偷偷告訴你原始地址是file.ih5.cn+資源位置）。
【5】設(shè)置加密下載
當(dāng)然，百度云這些網(wǎng)盤還有一個好處是能規(guī)定密碼。可不要小看H5，HTML5有一個優(yōu)勢是能在瀏覽器驗證表單信息，給文件加個密還不簡單！
如上，只需要加一個輸入框，設(shè)置輸入的值是你規(guī)定的密碼，匹配成功時下載文件就行。
【6】鎖位置、加書簽
H5在不同設(shè)備的自適應(yīng)一直是個麻煩，但如果只是為避免某個按鈕超出屏幕，可以加一個橫幅，勾選“固定位置”來鎖定它。
如上，在頁面加一個橫幅，設(shè)置底部對齊（bottom），縱向偏移-150，就能保證橫幅和它包含的按鈕一直保持在頁腳往上150個像素的位置——即便在電腦上縮放頁面比例也能保持。
這樣一來，滾動頁面時按鈕位置也不受影響！還能做在頁面頂端放個透明按鈕，設(shè)置點擊橫幅時，就對“舞臺”做“跳至對象”的動作，跳到透明按鈕——相當(dāng)于把透明按鈕當(dāng)做書簽，跳到對應(yīng)書簽的位置。
【7】監(jiān)測頁面打開率
H5頁面的打開情況，原理上其實和實時投票差不了多少，只是觸發(fā)的事件變成了頁面顯示與否，編輯效果如下：
為了方便理解，我設(shè)計了如下邏輯圖進行表達：
（1）用數(shù)據(jù)庫整形變量保存頁面1的打開次數(shù)（或顯示次數(shù)）；
（2）頁面1每顯示一次，上面的變量就加1；
（3）頁面2放計數(shù)器，綁定整形變量，來顯示次數(shù)的大小；
（4）舞臺放時間軸，用來控制打開次數(shù)的刷新，每隔三秒更新一次變量。
【8】臨摹作品的捷徑
最后一個技巧是壓軸的。當(dāng)你看到特別好玩的H5要臨摹怎么辦？怎么在桌面模擬移動頁面布局？可以使用開發(fā)者工具（Chrome瀏覽器快捷鍵Ctrl+Shift+I）。
比如騰訊TGideas的《移動頁面用戶行為報告》，打開開發(fā)者工具后激活右側(cè)代碼上方的設(shè)備標(biāo)識（Toggle device mode，切換設(shè)備模式）。
回到左側(cè)頁面上方，選擇合適的設(shè)備（比如iPhone 6S），再刷新頁面就可以模擬移動端效果了。
最后點擊菜單中的“Source”（源），就可以在目錄下翻找圖片等緩存出來的原始素材。從素材既可以看出H5的設(shè)計框架，又可以保存素材作為臨摹備用。
·
看到這里，會不會發(fā)現(xiàn)自己錯過了很多實用技能？技術(shù)改變世界，彎路請少走！
Builder是一款深度集成Eelipse的IDE編輯器，但其主要集中在Web前端的開發(fā)，不能進行Java等后臺開發(fā)。HBuilder提供了對JavaScrijpt、jQuery、HTML5+、MUI等語法的提示功能，同時包含很多快捷鍵，讓前端開發(fā)更加便捷。
訪問HBuilder官方網(wǎng)站(http://www.dcloud.io),下載最新版的HBuilder,如下圖所示。
在圖上圖中單擊“下載”按鈕，會出現(xiàn)下載提示框，如下所示。
在圖片中可以看到HBuilder的當(dāng)前版本、歷史版本以及各平臺的不同版本，讀者在下載時根據(jù)自己的設(shè)備選擇適合的版本即可。
HBuilder下載完成，解壓到指定的路徑后，雙擊啟動文件HBuilder.exe,會出現(xiàn)一個啟動頁面，完成用戶注冊并登錄后，便可開始使用HBuilder。HBuilder開發(fā)界面如圖所示。
在上圖中，左側(cè)項目管理器中會出現(xiàn)一個名稱為HelloHBuilder的示例項目，右側(cè)會出現(xiàn)一個HBuilder入門的窗口，該窗口中顯示的內(nèi)容是HBuilder官方的使用教程，提供了HBuilder的詳細使用方法。
下面以新建項目、新建文件以及運行文件為例簡單講解HBuilder的使用。
首先，在C盤下創(chuàng)建jQuery目錄用于保存項目文件。然后選擇“文件”一“新建”→“Web項目”命令，打開“創(chuàng)建Web項目”對話框，如下所示。
在上圖中，填寫項目名稱(如chapter01ln,選擇項目的保存位置(如C：\jQuery)，單擊“完成”按鈕創(chuàng)建Web項目。
最后，編寫項目中默認的文件index.html,利用HBuilder提供的工具完成文件的運行，頁面效果如下。
在上圖中，單擊方框內(nèi)的圖標(biāo)，即可在瀏覽器運行此文件，頁面效果如下所示。
HBuilder中有很多快捷鍵，開發(fā)者使用這些快捷鍵，可以更加高效地工作。HBuilder常用快捷鍵如表所示。
HBuilder 常用快捷鍵
「油猴腳本」是一段腳本代碼，通過它可以讓瀏覽器實現(xiàn)各種各樣的擴展功能，和瀏覽器擴展的作用類似。相當(dāng)于給瀏覽器開了個掛，可以說是瀏覽器的輔助神器了！
Tampermonkey 是一款瀏覽器腳本管理插件，常見瀏覽器如 Chrome、Firefox、Safari 等都支持。
結(jié)合腳本網(wǎng)站 Greasyfork，能夠方便的實現(xiàn)腳本旳一鍵安裝、自動更新、快速啟用等便捷功能。
打開 http://tampermonkey.net 官網(wǎng)，安裝對應(yīng)版本的插件。
安裝好后自動啟用，擴展區(qū)域會出現(xiàn)相應(yīng)擴展圖標(biāo)。
注：Chrome 可以通過網(wǎng)站 http://crx4chrome.com 來下載擴展程序 crx 文件，手動將 crx 文件拖動至擴展頁面安裝即可。
打開 https://greasyfork.org/zh-CN ，搜索需要的腳本，輸入大致名稱或用途即可。
小編這里安裝的腳本地址：
https://greasyfork.org/zh-CN/scripts/418355
腳本安裝完成后，只會在有效的網(wǎng)站上自動啟用，而不在 “啟用 URL” 站點列表里的網(wǎng)站則不啟用。因此不必擔(dān)心腳本安裝過多會影響效率。
在瀏覽器擴展欄可以快捷查看和管理腳本。點擊圖標(biāo)查看詳情、開關(guān)腳本。
以小編安裝的淘寶輔助腳本為例只會在天貓?zhí)詫毦W(wǎng)站運行
可以在下面兩個網(wǎng)站上查找、安裝腳本：
greasyfork.org ：支持中文，可以按照腳本的安裝量、評分等進行過濾排序，有詳細的腳本介紹信息。推薦！
openuserjs.org ：主要為英文資源，無中文界面。
https://greasyfork.org/zh-CN/scripts/14178
繞過百度、搜狗、谷歌等搜索結(jié)果的重定向，直接訪問原始網(wǎng)址，加快響應(yīng)速度； 自動攔截域名；去除百度廣告；自定義樣式；網(wǎng)址前添加圖標(biāo)顯示。
2. 淘寶天貓查隱藏券+歷史價格
https://greasyfork.org/zh-CN/scripts/418355
也就是小編剛剛演示的，這里不就單獨說明了
3. 搜索引擎快捷跳轉(zhuǎn)
https://greasyfork.org/zh-CN/scripts/27752
快速方便地在多個搜索引擎中跳轉(zhuǎn)搜索。
4. 視頻站啟用html5播放器
https://greasyfork.org/zh-CN/scripts/30545
視頻網(wǎng)站自動啟用 Html5 播放器；萬能網(wǎng)頁全屏；添加播放控制快捷鍵。
常用快捷鍵：
更多腳本等你探索...
為了方便以后重新配置油猴腳本時，能夠快速安裝還原常用腳本，我們可以把腳本備份下來。
進入 管理面板 -> 實用工具 -> 壓縮包選項，可以進行腳本的導(dǎo)出和導(dǎo)入操作。也可以選擇備份到云盤等。
油猴腳本是個很強大的瀏覽器輔助工具，而且相比于瀏覽器擴展，腳本更加輕便，占用資源極小，卻可以實現(xiàn)豐富的功能。
在使用上和擴展沒有明顯區(qū)別，極大地提高了我們的瀏覽和操作體驗，十分方便。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
