開源商城小程式原始碼（小程式商城完整版原始碼）附搭建部署教程
隨著商城小程式的出現，許多網站能夠用簡單、高效的小程式商城原始碼(如音訊、視訊、地理位置等)取代JavaScript外掛和程式碼。商城小程式標籤使開發人員的工作更容易，同時提高了頁面載入時間和站點效能。特別是小程式商城網路儲存，因為它允許使用者的瀏覽器在不使用伺服器的情況下儲存使用者資料。
原始碼及演示：xcxyms.top
商城小程式原始碼主要使用PHP等伺服器端語言來儲存使用者資料並將其從一個頁面傳遞到另一個頁面。使用JavaScript後端框架，如Node.js，我們可以達到同樣的目標。然而，在本教程中，我們將逐步向您展示如何使用HTML5和一些小JavaScript程式碼構建一個購物車。本教程中技術的其他用途還包括在網站和原生移動應用上儲存使用者首選項、使用者最喜歡的內容、願望列表和使用者設定(如名稱和密碼)，而無需使用資料庫。
許多高流量小程商城序依賴複雜的技術，如伺服器叢集、DNS負載平衡器、客戶端和伺服器端快取、分散式資料庫和微服務來優化效能和可用性。實際上，動態網站的主要挑戰是從資料庫中獲取資料，並使用伺服器端語言(如PHP)來處理它們。但是，遠端資料庫儲存應該只用於必要的網站內容，如文章和使用者憑證。類似於cookie，使用者首選項等功能可以儲存在使用者的瀏覽器中。同樣,當您構建一個本地移動應用程式,您可以使用商城小程式 web儲存與本地資料庫來提高應用程式的速度。因此,作為前端開發人員,我們需要探索的方式我們可以利用小程式商城原始碼儲存的力量在我們的應用程式在開發的早期階段。
我曾經是一個開發大型社交網站的團隊的一員，我們大量使用小程式網路儲存。例如，當用戶登入時，我們將雜湊後的使用者ID儲存在小程式會話中，並使用它在受保護的頁面上對使用者進行身份驗證。我們還使用這個功能來儲存所有新的推送通知——比如新的聊天訊息、網站訊息和新的提要——並將它們從一個頁面傳遞到另一個頁面。當一個社交網站獲得高流量時，完全依賴伺服器來進行負載平衡可能不起作用，所以你必須識別使用者的瀏覽器可以處理的任務和資料，而不是你的伺服器。
專案背景 #
購物車允許網站訪問者檢視產品頁面並將商品新增到購物車中。訪問者可以檢視他們所有的條目並更新他們的購物車(例如新增或刪除條目)。為了實現這一點，網站需要儲存訪問者的資料，並將它們從一個頁面傳遞到另一個頁面，直到訪問者進入結帳頁面並進行購買。儲存資料可以通過伺服器端語言或客戶端語言來完成。使用伺服器端語言，伺服器承擔資料儲存的重量，而使用客戶端語言，訪問者的計算機(桌面、平板電腦或智慧手機)儲存和處理資料。每種方法都有其優缺點。在本教程中，我們將重點介紹一種簡單的基於HTML5和JavaScript的客戶端方法。
注:為了能夠遵循本教程，HTML5, CSS和JavaScript的基本知識是必需的。
商城小程式儲存概述 #
商城小程式web儲存允許web應用程式在瀏覽器本地儲存能夠在瀏覽器會話中存活的值，就像cookie一樣。不像cookies需要在每次HTTP請求時傳送，web儲存資料從來不會傳輸到伺服器;因此，web儲存在web效能上優於cookie。此外，cookie允許每個域只儲存4kb的資料，而web儲存每個域至少允許5mb的資料。商城小程式儲存就像一個簡單的陣列，將鍵對映到值，它們有兩種型別:
●會話儲存將資料儲存在一個瀏覽器會話中，直到瀏覽器或瀏覽器選項卡關閉時資料才可用。從同一視窗開啟的彈出視窗可以看到會話儲存，同樣可以在同一視窗內的iframes。但是，來自同一來源(URL)的多個視窗不能看到彼此的會話儲存。
●本地儲存將資料儲存在瀏覽器中，沒有過期時間。這些資料對具有相同來源(域)的所有視窗都可用，甚至在瀏覽器或瀏覽器選項卡重新開啟或關閉時也是如此。
目前所有主要的web瀏覽器都支援這兩種儲存型別。請記住，不能將儲存資料從一個瀏覽器傳遞到另一個瀏覽器，即使兩個瀏覽器都在訪問相同的域。
建立一個基本的購物車 #
為了構建購物車，我們首先建立一個小程式頁面，其中包含一個簡單的購物車來顯示商品，以及一個簡單的表單來新增或編輯購物車。然後，我們新增HTML web儲存到它，然後是JavaScript編碼。儘管我們使用的是HTML5本地儲存標記，但所有步驟都與HTML5會話儲存相同，可以應用於HTML5會話儲存標記。最後，我們將為那些對使用jQuery感興趣的人介紹一些jQuery程式碼，作為JavaScript程式碼的替代。
新增商城小程式原始碼本地儲存到購物車 #
我們的HTML頁面是一個基本的頁面，頭部有外部JavaScript和CSS引用的標記。 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>
下面是出現在頁面主體中的HTML內容:
<form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save" onclick="SaveItem()"> <input type="button" value="Update" onclick="ModifyItem()"> <input type="button" value="Delete" onclick="RemoveItem()"> </fieldset> <div id="items_table"> <h2>Shopping List</h2> <table id="list"></table> <label><input type="button" value="Clear" onclick="ClearAll()"> * Delete all items</label> </div> </form>將JavaScript新增到購物車 #
我們將在onload()事件中建立並呼叫JavaScript函式doShowAll()，以檢查瀏覽器支援，並動態建立顯示儲存名值對的表。 $( window ).load(function() { doShowAll(); }); 或者，你也可以使用JavaScript的onload事件，把它新增到JavaScript程式碼中: window.load = doShowAll (); $( window ).load(function() { doShowAll(); });
在doShowAll()中，如果CheckBrowser()函式首先計算瀏覽器支援，那麼它將在頁面載入期間動態建立購物列表表。可以在JavaScript迴圈中迭代儲存在本地儲存中的鍵-值對的鍵(屬性名)，如下所示。該方法根據儲存值動態填充表，以顯示儲存在本地儲存中的鍵值對。 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }
注意:您或您的框架將擁有建立新DOM節點和處理事件的首選方法。為了保持清晰和重點，我們的示例使用了. innerhtml和內聯事件處理程式，儘管我們通常在生產程式碼中避免使用這些處理程式。 // Dynamically populate the table with shopping list items. /Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }
總結 #
在本教程中，我們學習瞭如何使用HTML5 web儲存和JavaScript一步一步地構建商城小程式原始碼。我們已經瞭解瞭如何使用jQuery來替代JavaScript。我們還討論了用於處理購物車中的陣列和物件的stringify和parse等JSON函式。您可以在本教程的基礎上新增更多特性，比如在JavaScript多維陣列中儲存資料的同時新增產品類別和子類別。此外，您可以用jQuery替換整個JavaScript程式碼。