1. 程式人生 > >零基礎開發一款微信小程式商城

零基礎開發一款微信小程式商城

一個朋友問我能不能幫忙做個商城?我一個完整網頁都寫不出的 Android 開發者,我該怎麼拒絕呢?好吧,看在小程式這麼火的形勢下,我還是答應了!找了個開源專案,差不多花了三天時間搞定。

本場 Chat 主要是講一個開源的微信小程式商城的安裝執行除錯及資料修改,包括前臺和後臺的開發。

  1. 通過 IDEA 安裝後臺程式碼執行。
  2. 安裝 MySQL,Navicat 管理工具進行資料庫管理操作。
  3. 安裝微信小程式開發工具,執行程式碼。

最後:在決定購買之前,希望您能看下上面內容,這篇文章不講前後端技術,只是一篇開源商城專案的除錯執行。效果可以在我同名公眾號上檢視,如果真對您有用,再決定訂購。

小程式真的太火了,我家四線小城市的朋友都知道了,當然,基於我是程式設計師,遂找我一塊開發微信小程式商城。

正如前面所說,我網頁這一塊是欠缺的,一個完整的網頁都沒寫過的我,你想讓我搞啥呢?造飛機?真以為是個程式設計師啥都會?

最終還是答應了,主要出於三個方面考慮:

  1. 別人在有需求的時候主動找到我,說明對我能力的信任,不想辜負別人的信任。
  2. 小程式確實是個引流的巨大入口,市場需求很大,可以嘗試學習下。
  3. 可以掙錢,下午茶有著落了。

正如前面所說,我是找了個開源專案,差不多花了三天時間搞定。一天時間看找開源專案,一天時間部署執行環境,看了半天 API 文件。差不多就是這麼個進度。

下面我們先來看下實現的效果,小程式效果如下:

enter image description here

後臺管理系統效果:

enter image description here

下面我們進入正文:

專案介紹

我找的開源專案是李鵬軍開源的微信小程式商城,前後端開源。專案地址:

platform-wechat-mall,感謝鵬哥的無私奉獻,讓我坐享其成。當然,他也開通了 QQ 技術交流群,大家可以進群一起討論。也和他微信聊過,感覺是很有想法很 nice 的人。

關於這個專案的技術選型,好吧,大家還是看圖吧,我也不知道幾個,瞭解下就好。

enter image description here

接下來我們主要是做一些軟體的安裝,如果各位有裝好的可以跳過對應的部分。

好了,不多說了,下面是具體的軟體安裝步驟:

下載 Tomcat

1.點選進入 tomcat 下載官網,下載 Tomcat,我這邊使用 Tomcat 8.0。

enter image description here

2.解壓 Tomcat 壓縮包到指定檔案,並執行 bin 目錄下的 startup.bat 檔案

enter image description here

enter image description here

這時候我們可以在瀏覽器輸入 http://localhost:8080/,執行如下介面即啟動成功:

enter image description here

下載安裝 MySQL

資料庫是後開開發必備,所以如果沒有安裝 MySQL 的朋友,就先花幾分鐘將 MySQL 安裝一下。

1.下載安裝 MySQL:官方下載地址

2.下載開啟安裝,一直下一步即可,需要注意下面兩個點,一是賬號名密碼,二是伺服器名。

enter image description here

enter image description here

3.到 MySQL 的安裝目錄下,進行 MySQL 服務的啟動

enter image description here

顯示服務啟動成功,表示你的 MySQL 已經安裝成功,接下里我們安裝視覺化管理工具。

下載安裝資料庫管理工具

資料庫管理工具有很多,我這裡用的 Navicat 來管理資料庫。如果你使用其他的亦可以,對專案無影響。具體可以參考:SQlite 資料庫檢視工具軟體集

Navicat 官方下載地址滑到底部,點選下載。這個只能試用 14 天。

安裝執行成功後,我們點選連線上面啟動成功的資料庫,輸入資料庫密碼。

enter image description here

enter image description here

最終在當前資料庫下面有個 platform-shop 的包。及執行成功。匯入資料庫也可以在下一步啟動後臺管理系統時再進行。這樣就能在當前下載的目錄下找到 platform.sql 檔案。否則可以到開源專案地址中去下載 platform.sql 檔案。

下載安裝 IntelliJ IDEA

很多開發的朋友應該電腦中都裝有 ItelliJ IDEA,如果你裝有 IDEA 可以直接跳過此步驟。

啟動後臺管理系統

1.將專案匯入到 IDEA 中,Check out from Version Control 選擇 git

enter image description here

2.輸入專案倉庫地址:https://gitee.com/fuyang_lipengjun/platform.git

enter image description here

3.配置 tomcat

a. 開啟 Edit Configurations,點 + 號,選中 Tomcat Server 選中 Local

enter image description here

enter image description here

b. 配置之前下載的 Tomcat,點選 Configure 配置 Tomcat。如果是最新版本請在 On"Update"action 後選項選擇 Update classes and resources,這樣每次修改 js、html、java 都不需要重啟。

enter image description here

enter image description here

c . 點 Fix 選擇 platform_framework:war exploded 把專案部署到 tomcatenter image description here

部署完成之後,我們點選執行按鈕,執行整個專案:

enter image description here

等待執行完成。我們就可以看到效果了:

enter image description here

到這裡,我們後臺管理的編譯執行就完成了,我們通過登入管理系統內部對商品進行釋出修改:

enter image description here

現在我們本地的資料庫已建立完成,現在我們可以開始建立前端介面對資料進行訪問了。接下來我們開始編譯執行小程式程式碼。

下載小程式編譯器

當然,如果沒有註冊微信小程式的朋友請在微信開發平臺註冊自己的微信小程式下載微信小程式開發工具,下載,填寫自己微信小程式 APP ID 及獲取 AppSecert。

enter image description here

enter image description here

enter image description here

下面我們將請求連結設定為 http://localhost:8080/api,獲取資料就是後臺管理器修改的資料。這時候我們開啟瀏覽器登陸 localhost:8080,進入綜合管理平臺,就可以修改自己想展示的資料了。

總結

其實對於後臺一竅不通的我暫時還不知道如何通過自己域名訪問,之前計劃是這篇文章打算將上線的一塊總結出來供大家一起學習,但是由於我的域名備案剛通過,時間有限。還需要學習更多後臺及伺服器方面的知識。下一步計劃準備學習下後臺開發,這段時間搞了個自己的部落格管理系統。當然,我也發了關於學習部落格管理系統的 Chat:零基礎建立自己的部落格網站,有興趣的朋友可以關注下。有興趣的朋友也可以在微信公眾號 aserbao 給我留言交流。

一場場看太麻煩?訂閱GitChat體驗卡,暢享300場chat文章!更有CSDN下載、CSDN學院等超划算會員權益!點選檢視