維基百科推出iOS原生應(yīng)用，可實(shí)現(xiàn)應(yīng)用內(nèi)編輯

基百科是全球最大的在線百科全書，擁有眾多擁篤。這樣一個(gè)知識(shí)利器目前在桌面端和移動(dòng)端均有入口。但是，其移動(dòng)端應(yīng)用一直使用的是 HTML5 封裝，也就是說，目前 iOS 和 Android 上的維基百科并不是原生的。

直到一個(gè)多月前，維基百科率先在Google Play上推出了其原生應(yīng)用，并且支持應(yīng)用內(nèi)編輯。現(xiàn)在，iOS 平臺(tái)也迎來了屬于它的原生維基百科應(yīng)用。維基百科 for iOS 放棄了之前所采用的開源框架 PhoneGap，而改用 Objective C 寫成。

一起通過幾組對(duì)比圖來看看維基百科的這款新 app 都做出了哪些改進(jìn)：

一直處在頁(yè)面最上方的搜索欄被移除，頁(yè)面更清爽簡(jiǎn)潔

加入了導(dǎo)航界面，搜索內(nèi)容可以細(xì)化到具體的門類

提供分享功能、收藏功能（用于離線閱讀）

最重要的功能改進(jìn)——在應(yīng)用內(nèi)直接編輯。之前的版本需轉(zhuǎn)入 web 頁(yè)面才能編輯。
用戶甚至無需登錄便可編輯內(nèi)容，只需要點(diǎn)擊頁(yè)面上的小鉛筆就可以完成。

在功能設(shè)計(jì)上也有人性化的改進(jìn)，比如，通過左上角的”W“按鈕可以訪問“收藏頁(yè)面”、“近期閱讀“等常用功能。

[本文參考以下來源：thenextweb.com]

者：Darrell Etherington

根據(jù)Bernstein Research公司分析師Toni Sacconaghi Jr的觀點(diǎn)，在HTML5的影響下，2015年蘋果營(yíng)業(yè)利潤(rùn)增長(zhǎng)可能會(huì)遭受30%的損失。Forrester Research公司也曾指出，HTML5的出現(xiàn)還將影響蘋果通過原生應(yīng)用中收獲的利潤(rùn)。但從以下兩個(gè)原因可以看出，業(yè)內(nèi)人士不應(yīng)該低估iOS原生應(yīng)用的長(zhǎng)遠(yuǎn)吸引力：

1.原生應(yīng)用能夠突破其局限性

人們之所以認(rèn)為HTML5將取代iPad和iPhone設(shè)備中的原生應(yīng)用是因?yàn)樗木W(wǎng)絡(luò)技術(shù)正在趕超iOS軟件的功能。雖然這是事實(shí)，但是HTML5永遠(yuǎn)也不可能與原生應(yīng)用相提并論，應(yīng)為蘋果始終掌握著主要控制權(quán)，它可以決定哪些第三方應(yīng)用軟件可以在iOS設(shè)備上運(yùn)行。iOS每一次重大更新都能給開發(fā)者帶來新的API，而每一代新的硬件也都提供了新的網(wǎng)絡(luò)連接選項(xiàng)，收音機(jī)以及其它硬件功能。舉個(gè)例子來說，iOS 5便推出了1500款新型API，包括iCloud Storage，Newsstand以及Twitter。

只有蘋果能夠決定它的軟件可以做什么或不能做什么，以及何種硬件可以與之兼容；但是因?yàn)镠TML5是基于所有瀏覽器而設(shè)置的，所以要求更多的技術(shù)妥協(xié)。同時(shí)，HTML5如果要使用iOS硬件的所用功能也擁有許多局限因素，盡管蘋果已經(jīng)采取了一些改善措施，例如允許Safari使用更多的本地設(shè)備內(nèi)存以及地理定位服務(wù)。雖然如此看來好像是HTML5正在迎頭趕上本機(jī)應(yīng)用，但是事實(shí)上它卻永遠(yuǎn)不可能超越它們，因?yàn)樘O果的移動(dòng)技術(shù)還在不斷進(jìn)化，并且通過iOS SDK給原生應(yīng)用開發(fā)者提供更多的API選擇。

2.原生應(yīng)用才剛超越移動(dòng)網(wǎng)頁(yè)

在智能手機(jī)和平板電腦設(shè)備中，手機(jī)應(yīng)用剛剛才開始趕超移動(dòng)網(wǎng)頁(yè)，其人氣正處于高漲階段。應(yīng)用商店的出現(xiàn)更是助長(zhǎng)了這種趨勢(shì)，目前尚無跡象表明這種趨勢(shì)會(huì)放緩或者扭轉(zhuǎn)，雖然Vudu（注：一種新型電視節(jié)目服務(wù)），亞馬遜以及《金融時(shí)報(bào)》等公司最近都繞開蘋果App Store，創(chuàng)建了HTML5網(wǎng)頁(yè)應(yīng)用。

顯然，很多公司寧愿選擇HTML5而不是蘋果的原生應(yīng)用是因?yàn)椋诰W(wǎng)頁(yè)的產(chǎn)品讓他們繞過蘋果這個(gè)中間商，避開蘋果營(yíng)收抽成，直接獲取更大的利潤(rùn)，并且能夠針對(duì)多個(gè)平臺(tái)一次性開發(fā)產(chǎn)品。但是從用戶體驗(yàn)的角度來看，絕大多數(shù)用戶可能并不會(huì)支持應(yīng)用大規(guī)模向HTML5領(lǐng)域遷移。雖然市場(chǎng)上將會(huì)有越來越多HTML5產(chǎn)品，但是原生應(yīng)用的光芒也不會(huì)輕易被掩蓋，因?yàn)樗蟹€(wěn)定的離線訪問，特定的界面，可自由訪問特定硬件和軟件等功能。

我認(rèn)為在今后幾年里，蘋果將繼續(xù)從原生應(yīng)用中賺取更多利潤(rùn)，HTML5無法對(duì)此造成嚴(yán)重影響。

注：原文發(fā)表于2011年9月13日，所涉事件和數(shù)據(jù)均以當(dāng)時(shí)為準(zhǔn)。

備做一個(gè)網(wǎng)頁(yè)版聊天界面，表情啊、圖片啊、上傳文件啊都應(yīng)該要有，視頻就算了，語(yǔ)音還是要的。

本文記錄的是在網(wǎng)頁(yè)上用GitHub上的Recorder進(jìn)行在線錄音和上傳到服務(wù)器，前幾天升了一下級(jí)，以后有時(shí)間再專門寫一篇記錄。

錄音代碼

本示例代碼支持PC、Android、IOS(僅Safari)中使用，如果用RecordApp可增加對(duì)IOS(微信瀏覽器、小程序)的支持。

看萬(wàn)遍代碼不如行動(dòng)一遍，新建一個(gè)html文件，把下面三段代碼復(fù)制到文件內(nèi)，雙擊瀏覽器打開就能進(jìn)行測(cè)試。

<!-- 先加載js錄音庫(kù)，注意：你應(yīng)該把js clone到本地使用 --><meta charset="utf-8" />
<script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>
<input type="button" onclick="startRec()" value="開始錄音">
<hr>
<input type="button" onclick="playRec()" value="結(jié)束并播放">
<input type="button" onclick="uploadRec()" value="結(jié)束并上傳">
<script>
var rec;
function startRec(){
 rec=Recorder();//使用默認(rèn)配置，mp3格式
 
 //打開麥克風(fēng)授權(quán)獲得相關(guān)資源
 rec.open(function(){
 //開始錄音
 rec.start();
 },function(msg,isUserNotAllow){
 //用戶拒絕了權(quán)限或?yàn)g覽器不支持
 alert((isUserNotAllow?"用戶拒絕了權(quán)限，":"")+"無法錄音:"+msg);
 });
};
</script>

上傳服務(wù)器代碼

<script>
function uploadRec(){
 //停止錄音，得到了錄音文件blob二進(jìn)制對(duì)象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 /*
 blob文件對(duì)象，可以用FileReader讀取出內(nèi)容
 ，或者用FormData上傳，本例直接上傳二進(jìn)制文件
 ，對(duì)于普通application/x-www-form-urlencoded表單上傳
 ，請(qǐng)參考github里面的例子
 */
 var form=new FormData();
 form.append("upfile",blob,"recorder.mp3"); //和普通form表單并無二致，后端接收到upfile參數(shù)的文件，文件名為recorder.mp3
 
 //直接用ajax上傳
 var xhr=new XMLHttpRequest();
 xhr.open("POST","http://baidu.com/修改成你的上傳地址");//這個(gè)假地址在控制臺(tái)network中能看到請(qǐng)求數(shù)據(jù)和格式，請(qǐng)求結(jié)果無關(guān)緊要
 xhr.onreadystatechange=function(){
 if(xhr.readyState==4){
 alert(xhr.status==200?"上傳成功":"測(cè)試請(qǐng)先打開瀏覽器控制臺(tái)，然后重新錄音，在network選項(xiàng)卡里面就能看到上傳請(qǐng)求數(shù)據(jù)和格式了");
 }
 }
 xhr.send(form);
 },function(msg){
 alert("錄音失敗:"+msg);
 });
};</script>

立即播放代碼

<script>
function playRec(){
 //停止錄音，得到了錄音文件blob二進(jìn)制對(duì)象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 var audio=document.createElement("audio");
 audio.controls=true;
 document.body.appendChild(audio);
 
 //非常簡(jiǎn)單的就能拿到blob音頻url
 audio.src=URL.createObjectURL(blob);
 audio.play();
 },function(msg){
 alert("錄音失敗:"+msg);
 });
};</script>

Recorder

GitHub地址：https://github.com/xiangyuecn/Recorder

在線測(cè)試: https://xiangyuecn.github.io/Recorder/

Recorder用于html5錄音，為一個(gè)純粹的js庫(kù)，支持大部分已實(shí)現(xiàn)getUserMedia的移動(dòng)端、PC端瀏覽器，包括騰訊Android X5內(nèi)核(QQ、微信)。

錄音默認(rèn)輸出mp3格式，另外可選wav格式（此格式錄音文件超大）；有限支持ogg、webm、amr格式；支持任意格式擴(kuò)展（前提有相應(yīng)編碼器）。

小巧：如果對(duì)錄音文件大小沒有特別要求，可以僅僅使用錄音核心+wav編碼器，源碼不足300行，壓縮后的recorder.wav.min.js不足4kb。mp3使用lamejs編碼，壓縮后的recorder.mp3.min.js開啟gzip后54kb。

由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他瀏覽器均不支持H5錄音，因此額外針對(duì)IOS對(duì)Recorder進(jìn)行了進(jìn)一步的兼容封裝，升級(jí)成了RecordApp，用于支持微信（含瀏覽器、小程序web-view），另外RecordApp對(duì)Hybrid App也提供了更加優(yōu)秀的支持。

由于RecordApp需要微信公眾(訂閱)號(hào)提供JsSDK錄音支持，所以開發(fā)難度會(huì)大些，但支持的環(huán)境更多。Recorder拿來就能用，具體使用哪個(gè)請(qǐng)參考下表：

最后

如果這個(gè)庫(kù)有幫助到您，請(qǐng) Star 一下。

原文作者：高堅(jiān)果兄弟

原文地址：https://www.cnblogs.com/xiangyuecn/p/10772227.html

在線咨詢

上一篇：利用QQ音樂網(wǎng)頁(yè)版下載音樂，就是不用客戶端
下一篇：純 CSS 打造網(wǎng)頁(yè)版「大白」

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。