文章目錄

• 一、小程序的簡(jiǎn)介
• 二、小程序的技術(shù)發(fā)展
• 三、小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別

一、小程序的簡(jiǎn)介

小程序是一種全新的連接用戶(hù)與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。
按照我的理解，微信小程序就是手機(jī)軟件的mini型，可以不用占用手機(jī)的過(guò)多內(nèi)存，也可以不用下載不常用但偶爾需要用的軟件，它是一種不用下載安裝就可以使用的應(yīng)用，只需要掃一掃二維碼就可以用了，給用戶(hù)提供了非常大的便利。

二、小程序的技術(shù)發(fā)展

微信實(shí)際上是一個(gè)混合的APP，客戶(hù)端里嵌入WebView。
WebView可以對(duì)url請(qǐng)求、頁(yè)面加載、渲染、頁(yè)面交互進(jìn)行強(qiáng)大的處理，可單獨(dú)使用，也可聯(lián)合其工具類(lèi)一起使用，就是將url網(wǎng)絡(luò)請(qǐng)求返回的結(jié)果展示在里面。

就比如說(shuō)，你自己寫(xiě)了一個(gè)APP，你想要用它訪問(wèn)網(wǎng)絡(luò)，這里假設(shè)你要訪問(wèn)夸克瀏覽器，你不想要用你手機(jī)自帶的瀏覽器訪問(wèn)，想要自己在APP內(nèi)部直接訪問(wèn)，這個(gè)時(shí)候你就可以用上WebView了。

那小程序和以上我說(shuō)的這些有什么關(guān)系呢，當(dāng)微信中的 WebView 逐漸成為移動(dòng) Web 的一個(gè)重要入口時(shí)，微信就有相關(guān)的JS API了。

【
從小程序的定位來(lái)看，微信的核心價(jià)值是連接一切：訂閱號(hào)定位連接人與資訊，為微信用戶(hù)提供優(yōu)質(zhì)和豐富的內(nèi)容；服務(wù)號(hào)連接人與服務(wù)，建立企業(yè)和普通用戶(hù)溝通的橋梁，將企業(yè)的產(chǎn)品和服務(wù)更好地傳達(dá)至用戶(hù)，但服務(wù)號(hào)由于受限于開(kāi)發(fā)權(quán)限與服務(wù)頻次，無(wú)法提供更多的服務(wù)；小程序的誕生則彌補(bǔ)了訂閱號(hào)和服務(wù)號(hào)的不足，連接了人和應(yīng)用，企業(yè)能夠?yàn)橛脩?hù)提供更復(fù)雜、更個(gè)性化的服務(wù)體驗(yàn)。

從小程序的本質(zhì)來(lái)看，小程序與早前百度提出的輕應(yīng)用大體相似，都是以類(lèi)似 Web App的形式而存在的，提供無(wú)須下載、即搜即用的直達(dá)服務(wù)，通過(guò)開(kāi)放更多應(yīng)用程序接口（Application Programming Interface，APl）及微信入口，為用戶(hù)提供更多服務(wù)。但是小程序又不同于Web App，因?yàn)槎叩?mark>開(kāi)發(fā)邏輯與開(kāi)發(fā)語(yǔ)言完全不一樣。
】
以下是一個(gè)調(diào)用微信原生組件瀏覽圖片的JS API，相比于額外引入一個(gè)JS圖片預(yù)覽組件庫(kù)，這種調(diào)用方式顯得非常簡(jiǎn)潔和高效

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有圖片的URL列表，數(shù)組格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

2015年初，微信發(fā)布了一整套網(wǎng)頁(yè)開(kāi)發(fā)工具包，稱(chēng)之為 JS-SDK，開(kāi)放了拍攝、錄音等幾十個(gè)API。讓所有web開(kāi)發(fā)者都可以使用到微信的原生能力，去完成一些之前做不到或者難以做到的事情。

同樣是調(diào)用原生的瀏覽圖片，調(diào)用方式如下：

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有圖片的URL列表，數(shù)組格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

以上代碼使用 JS-SDK 調(diào)用圖片預(yù)覽組件
?JS-SDK是對(duì)之前的 WeixinJSBridge 的一個(gè)包裝，以及新能力的釋放，并且由對(duì)內(nèi)開(kāi)放轉(zhuǎn)為了對(duì)所有開(kāi)發(fā)者開(kāi)放，從數(shù)據(jù)監(jiān)控來(lái)看，絕大部分在微信內(nèi)傳播的移動(dòng)網(wǎng)頁(yè)都使用到了相關(guān)的接口。

?JS-SDK 解決了移動(dòng)網(wǎng)頁(yè)能力不足的問(wèn)題，通過(guò)暴露微信的接口使得 Web 開(kāi)發(fā)者能夠擁有更多的能力，然而在更多的能力之外，JS-SDK 的模式并沒(méi)有解決使用移動(dòng)網(wǎng)頁(yè)遇到的體驗(yàn)不良的問(wèn)題。用戶(hù)在訪問(wèn)網(wǎng)頁(yè)的時(shí)候，在瀏覽器開(kāi)始顯示之前都會(huì)有一個(gè)白屏的過(guò)程，在移動(dòng)端，受限于設(shè)備性能和網(wǎng)絡(luò)速度，白屏?xí)用黠@。我們團(tuán)隊(duì)把很多技術(shù)精力放置在如何幫助平臺(tái)上的Web開(kāi)發(fā)者解決這個(gè)問(wèn)題。因此我們?cè)O(shè)計(jì)了一個(gè) JS-SDK 的增強(qiáng)版本，其中有一個(gè)重要的功能，稱(chēng)之為微信 Web 資源離線(xiàn)存儲(chǔ)。

下面是關(guān)于微信Web資源離線(xiàn)存儲(chǔ)的相關(guān)介紹，這段文字來(lái)自于內(nèi)部的文檔，暫未對(duì)外部開(kāi)放

微信 Web 資源離線(xiàn)存儲(chǔ)是面向 Web 開(kāi)發(fā)者提供的基于微信內(nèi)的 Web 加速方案。
通過(guò)使用微信離線(xiàn)存儲(chǔ)，Web 開(kāi)發(fā)者可借助微信提供的資源存儲(chǔ)能力，直接從微信本地加載 Web 資源而不需要再?gòu)姆?wù)端拉取，從而減少網(wǎng)頁(yè)加載時(shí)間，為微信用戶(hù)提供更優(yōu)質(zhì)的網(wǎng)頁(yè)瀏覽體驗(yàn)。每個(gè)公眾號(hào)下所有 Web App 累計(jì)最多可緩存 5M 的資源。

?這個(gè)設(shè)計(jì)有點(diǎn)類(lèi)似 HTML5 的 Application Cache，但在設(shè)計(jì)上規(guī)避了一些 Application Cache的不足

小插曲：
【
Application Cache 可以很簡(jiǎn)單讓我們的WebApp具有離線(xiàn)的能力。它支持的瀏覽器：IE10+，FireFox，Chrome，Safari，Opera

Application Cache的優(yōu)點(diǎn)：

1.離線(xiàn)瀏覽 – 用戶(hù)可以再離線(xiàn)時(shí)使用Application
2.速度 – 由于緩存了資源，所以加載很快
3.減少服務(wù)端數(shù)據(jù)加載 – 瀏覽器只需要從服務(wù)器加載更新過(guò)的數(shù)據(jù)

缺點(diǎn)：

1.Manifest文件有變化時(shí)才更新（manifest是一種軟件，屬于AndroidManifest.xml文件，在簡(jiǎn)單的Android系統(tǒng)的應(yīng)用中提出了重要的信息，它可以運(yùn)行任何應(yīng)用程序的代碼）
2.一次必須更新Manifest中的所有文件，下次才生效

】

?在內(nèi)部測(cè)試中，我們發(fā)現(xiàn)離線(xiàn)存儲(chǔ)能夠解決一些問(wèn)題，但對(duì)于一些復(fù)雜的頁(yè)面依然會(huì)有白屏問(wèn)題，例如頁(yè)面加載了大量的 CSS 或者是 JavaScript 文件。?除了白屏，影響 Web 體驗(yàn)的問(wèn)題還有缺少操作的反饋，主要表現(xiàn)在兩個(gè)方面：頁(yè)面切換的生硬和點(diǎn)擊的遲滯感。

?微信面臨的問(wèn)題是如何設(shè)計(jì)一個(gè)比較好的系統(tǒng)，使得所有開(kāi)發(fā)者在微信中都能獲得比較好的體驗(yàn)。這個(gè)問(wèn)題是之前的 JS-SDK 所處理不了的，需要一個(gè)全新的系統(tǒng)來(lái)完成

三、小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別

小程序的主要開(kāi)發(fā)語(yǔ)言是 JavaScript，小程序的開(kāi)發(fā)同普通的網(wǎng)頁(yè)開(kāi)發(fā)相比有很大的相似性。對(duì)于前端開(kāi)發(fā)者而言，從網(wǎng)頁(yè)開(kāi)發(fā)遷移到小程序的開(kāi)發(fā)成本并不高，但是二者還是有些許區(qū)別的。

小程序的三大運(yùn)行環(huán)境：

?網(wǎng)頁(yè)開(kāi)發(fā)者在開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可。小程序的開(kāi)發(fā)則有所不同，需要經(jīng)過(guò)申請(qǐng)小程序帳號(hào)、安裝小程序開(kāi)發(fā)者工具、配置項(xiàng)目等等過(guò)程方可完成