兩年前還籍籍無名的小程序，如今已經成爲移動互聯網的新風口。
最早小程序在微信平臺上成名，手握 10 億月活用戶的微信，很快成爲小程序創業者的掘金之地。巨頭的嗅覺敏銳，支付寶、百度隨即跟進，今日頭條也開始內測小程序，幾大平臺紛紛出手，讓小程序賽道更加擁擠，小程序生態多元化的背後，是巨頭新一輪跑馬圈地。
而小程序之所以這麼火，是因爲其自身的引流模式和盈利模式，畢竟既會技術、又知道如何將技術變現的開發人員到哪都是香餑餑。本文以四大巨頭都在關注的小程序電商爲例，手把手教你開發小程序版網上商城。
1. 開發小程序商城
本文將實現一款小程序版的網上商城，前端使用 JavaScript 開發小程序，後端使用 Node.js + Express + MySQL。首先用 SQL 腳本建立 MySQL 數據庫，數據庫名爲 orishop。MySQL 用戶名是 root，密碼是 12345678，也可以使用其他用戶名和密碼。
下面先看一下本項目的主界面，本項目分爲客戶端和服務端實現，客戶端涉及到輪詢圖、按鈕、圖片列表、產品展示、購物車等。
項目效果展示：
2. 輪序圖設計
輪序圖是在 App 首頁上部顯示的，用於展示商品信息，可以以一定時間自動切換商品信息。輪序圖需要使用 swiper 組件，每一個輪序圖 Item 需要使用 swiper-item 組件，通常每一個 Item 是一個圖片，可以直接在<swiper-item>中放置一個<image>標籤。輪序圖的佈局代碼如下。
3. 控制輪序圖
輪序圖的佈局代碼中使用了很多變量來控制輪序圖的顯示，例如，indicatorDots 用來控制是否顯示面板指示點，autoplay 用於控制是否自動切換圖像。interval 用於控制切換時間的間隔，duration 用於控制滑動動畫時長。這些變量都需要在 index.js 文件的 data 變量中設置，代碼如下：
在上面的代碼中 imgUrls 變量沒有設置值，如果想測試輪序圖，可以在小程序工程的根目錄創建一個 images 目錄，並且在該目錄中放置若干個圖像文件。爲了讓輪序圖水平充滿整個界面，需要在 index.wxss 文件中添加如下的樣式代碼。
4. 使用 Node.js + Express 連接 MySQL 數據庫
由於本項目需要使用服務端，所以在編寫客戶端的同時，還要編寫服務端的程序，這一部分會使用 Node.js + Express 連接 MySQL 數據庫，在連接 MySQL 數據庫之前，先要創建相關的表和視圖。
本項目使用 WebStorm 開發，創建一個名爲 service 的工程，接下來在 service 工程中創建 my_connect.js 文件，並輸入下面的代碼。
接下來測試連接數據庫的代碼是否正確，在 service 工程的 index.js 文件中添加如下代碼。
由於 Node.js 官方提供的模塊不支持操作 MySQL 數據庫，所以運行本例的代碼需要使用下面的命令行安裝 MySQL 模塊。然後在瀏覽器地址欄中輸入 http://localhost:3000，就會在 WebStorm 的控制檯看到輸出結果。
5. 從 MySQL 數據庫中獲取要顯示的輪詢圖信息
在這一部分仍然編寫服務端代碼，在小程序端需要顯示輪詢圖，輪序圖中的數據需要從 v_goods 視圖獲取，該視圖可以得到最熱，銷售最好的商品信息。接下來在 mysql_connect.js 文件中添加如下代碼。
接下來創建路由腳本文件 hnf.js，並添加下面的代碼：
接下來在 app.js 中使用下面的代碼註冊 hnf 路由。
6. 動態顯示輪詢圖
現在修改小程序端的代碼，在這一部分會在小程序端通過 wx.request 函數訪問上一部分創建的路由，並根據返回數據動態顯示輪序圖。在 index.js 文件的 onload() 函數中添加下面的代碼。
7. 實現導航按鈕佈局
在輪序圖下方是一排導航按鈕，效果如下圖所示：
導航按鈕的佈局代碼需要添加到小程序工程的 index.wxml 文件中。接下來在 app.wxss 文件中添加如下的樣式，其他佈局也會用這個樣式，所以將該樣式添加到全局的 app.wxss 文件中。
在 index.wxss 文件中添加樣式代碼，每一個按鈕佔整個寬度的 11%。導航按鈕也是動態顯示的，數據依賴於 navigationData 變量，可以在 index.js 文件的 data 中添加如下代碼來測試導航按鈕的佈局是否正確，記住，這只是用於測試的代碼，在後面的佈局會用動態的數據替換這些實驗數據。
8. 動態顯示導航按鈕
本節會在服務端從數據庫中獲取導航按鈕的數據，客戶端會根據這些數據動態顯示導航按鈕。
首先切換回 WebStorm，在mysql_connect.js文件中添加如下的方法，該方法用於獲取商品類型，也就是導航按鈕數據。有多少個商品類型，就顯示多少個導航按鈕。
在服務端創建一個 type.js 路由文件，在 app.js 文件中添加代碼註冊路由。切換到小程序端，在 index.js 文件的 onLoad 方法中添加下面的代碼。
9. 顯示最熱、最新和暢銷商品
在小程序首頁下方通過列表顯示了最新、最熱和暢銷商品，與輪詢圖顯示的商品類似，此處只是爲了演示列表的使用。
10. 顯示商品詳細信息
本節顯示了顯示商品詳細信息的佈局，首先在小程序端創建 shopinfo.wxml 佈局文件，並輸入下面的代碼。
接下來在 shopinfo.wxss 文件中輸入代碼，最終顯示的效果如下圖所示。
總結
以上的小程序商城開發項目案例來源李寧的達人課《小程序與雲開發實戰 36 講》。本文中沒有展現完整的項目源代碼，可以到作者的課程中下載使用；最後，要想開發牛逼的小程序還需要有系統的課程，這樣學起來一定會更加輕鬆