從0開始搭建微信小程式(前後端)的全過程

猿奮發表於2019-04-14
微信小程式後端

前言

有段時間比較閒就嘗試著做了一個微信小程式，一是為了鍛鍊自己獨立部署一個前後端全鏈路系統的能力，二是想做一個自己都想用的小程式出來。方向是讓使用者可以集中獲取優質的電影、音樂、書籍、遊戲等資訊的推薦，那什麼是優質的資訊呢？我這裡假設的是排行榜裡越靠前的資訊就越是優質的資訊，於是就做了一個這幾類資訊的排行榜小程式，當然排行的資訊不是我隨便瞎編的，資料來源主要是豆瓣以及其他一些排行網站，希望排行資料是權威和客觀的，能最大化的減少使用者獲取優質資源的成本。

下面講解的可能不會太詳細，畢竟想呈現的是一個全過程，弄一個非常詳細的圖文教程反而顯得有些冗長，有些詳細操作過程需要讀者自己去參照相關文件，有些文件連結也會給出。OK，準備好了嗎？一起開始這趟快樂的旅程吧。

準備工作

工欲善其事，必先利其器。要做的事明確了，那怎麼做呢？需要準備什麼呢？ 下面我將我涉及到的以等式的形式羅列出來：

  • 小程式賬號 + 微信開發者工具 + 前端程式碼 + 後端資料 = 微信小程式
  • 豆瓣公共API + 引數 = 實時的排行榜資料及詳情資料
  • PyCharm + Python + 爬蟲程式碼 = 爬取的排行榜資料
  • Idea + Java + SpringBoot = 後端介面定義
  • 騰訊雲伺服器 + Tomcat + 後端介面定義 = 可訪問的後端服務介面
  • 域名 + IP + SSL證照 + 備案 = 合法後端介面訪問路徑

前端

1. 註冊微信小程式賬號

進入：微信公眾平臺, 選擇小程式的賬號型別按照流程進行註冊。注意每個郵箱只能註冊一個賬號。

2. 下載開發工具

有了賬號後，我們就可以使用這個賬號進行開發了，開發用的IDE是騰訊出品的微信開發者工具，進入：小程式開發工具，下載對應的版本安裝即可。

3. 開始進入小程式前端開發

開啟剛下載好的微信開發者工具，掃碼登入、建立小程式專案。登入微信公眾號平臺，在開發->開發設定->開發者ID中找到你小程式的AppID並填入到專案設定裡。

從0開始搭建微信小程式(前後端)的全過程

接著開始真正具體頁面的開發了，開發過程參考開發文件：微信小程式接入指南

4. 前端開發過程

小程式前端開發其實就是在騰訊的開發工具裡，使用js語言，遵循騰訊小程式的開發文件規範進行程式碼編寫。開發過程中可以編譯、預覽、真機除錯等，可以使用各種外掛，可以呼叫一些公共的api或者自己定義的後端介面，也可以使用騰訊提供的雲函式。

呼叫的後端介面需要是https開頭的，並且需要在微信公眾平臺的開發->開發設定->伺服器域名裡配置好。

5. 打包上線

開發完成後就可以準備上線了，首先在開發者工具裡將寫好的程式碼上傳，點選上傳，定義版本號和註釋，再到微信公眾平臺的版本管理提交稽核，待稽核通過了就表示上線成功了，就可以在微信中搜尋到你的小程式進行訪問了。

從0開始搭建微信小程式(前後端)的全過程

小結

到這裡，前端的工作就算是完成了，其實一般如果不涉及複雜資料處理的話，後端不是必需的，直接所有簡單資料都存放在前端就行了。如果你的小程式是這樣的話，那本文到這裡就可以結束了。後面的你也不需要看了。如果你需要更靈活的互動，更復雜的邏輯，那後端介面則必不可少了。那更復雜的後端資料介面又是怎麼完成的呢，跟著我繼續往下走你就知道了。

後端

後端主要是提供給小程式資料介面，讓小程式各個頁面都能有排行榜資料展示，這裡我提供的是http介面，返回的Json格式的字串。使用的語言是Java，使用的框架是SpringBoot，將最終的java程式碼打包成war包部署在雲主機上的web伺服器Tomcat中，Tomcat就可以自動的將通過url過來的請求分發到我的程式程式碼的處理邏輯中，處理完請求拿到相應的資料則以Json字串的格式返回。

主要流程如下圖：

從0開始搭建微信小程式(前後端)的全過程

伺服器搭建

1. 購買雲伺服器

首先要存放後端程式程式碼，需要一臺機器，自己的電腦雖然也可以，但是自己的電腦可不能保證24小時都開機且讓外網能訪問到，所以需要購買一臺雲伺服器；其次，外網能訪問到意味著需要一個公網IP，購買的雲伺服器會配套一個對應的IP地址。
這裡我使用的是騰訊雲伺服器，進入官網購買：騰訊雲，選擇伺服器的配置，付款即可。

基於經費預算以及實際需要（其實還是因為捨不得花錢）的考慮，我這裡選擇的是比較低配的機器：

  • CPU：1 核
  • 記憶體：1 GB
  • 公網頻寬：1 Mbps
  • 作業系統：CentOS 7.5 64位
  • 系統盤：高效能雲硬碟，共 50 GB
  • 資料盤：高效能雲硬碟，共 50 GB

2. 購買域名

域名是用來對映到IP上，便於直接使用域名訪問其繫結IP所在的伺服器。雖然直接用IP和埠的形式也可以訪問到我們購買的雲伺服器，但是一來IP不好記，二來微信不允許使用IP加埠形式的url。所以只能“慷慨解囊”購買一個域名了。

域名可以在任意域名服務商購買，我為了方便也是直接在騰訊雲上買的，購買連結：域名註冊

從0開始搭建微信小程式(前後端)的全過程

3. 域名解析

買好了域名，那這個域名怎麼用呢，不和IP配套使用的域名是沒有任何意義的域名。這裡我們需要將這個域名或者其子域名繫結在我們需要對外提供服務的伺服器所對應的IP上，也就是我剛剛購買的雲伺服器的IP上。

在騰訊雲後臺的雲解析裡，點選你的域名新增記錄，一般主要是新增A記錄，也就是將域名繫結到IPv4地址上，可以新增多條，以主機記錄區分各級的域名，@表示直接使用二級域名xxx.com，其他的則表示使用三級或更多級的域名，掛在你自己二級域名以下的多級域名都歸你管。

從0開始搭建微信小程式(前後端)的全過程

4. 域名備案

為什麼要域名備案呢？這個，普天之下莫非王土，網際網路這塊一畝三分地自然也是屬於國家的，不能隨隨便便讓你接入服務。要想在這塊地開墾拓荒，不是不可以，只是需要向國家報備，接受監管。

整個小程式的搭建過程，域名備案花的時間是最長的，花了十幾二十天。進入備案頁面：備案管理開始備案，詳細的我就不多說了， 備案過程詳情參考：網站備案 主要流程包括下面幾個：
    (1) 辦理幕布拍照     (2) 驗證備案資訊     (3) 填寫主體資訊     (4) 填寫網站資訊     (5) 上傳材料     (6) 確認備案資訊，提交初審     (7) 通過稽核，完成備案

5. 購買SSL證照

為什麼需要SSL證照呢？因為配置了SSL證照後可以讓我們的url以https開頭，這是微信小程式中要求的域名訪問方式，以加密傳輸的方式更加安全。

說是購買，其實你可以選擇免費的證照“購買”，一樣可以達到目的，只是沒有付費的加密功能強，安全性自然弱了一等。不過這也阻攔不了我選擇免費的，畢竟窮字當頭。

進入購買頁面：SSL證照, 選擇你要購買的證照的配置，下單付錢即可，將證照下載下來，後續配置web伺服器用得著。

小結

經過了前面5個大步驟，這時我們的伺服器具備了使用https協議通過域名訪問的能力。接下來的工作就剩下開發我們的後端介面以及把後端程式程式碼部署到這臺伺服器上供小程式訪問。

後端程式開發

環境：

  • 開發語言：Java 8
  • 開發整合環境：IntelliJ IDEA Ultimate 2017
  • web框架：Springboot
  • 構建工具：Maven

安裝這些工具就不細講了，網上一大堆教程，而且要是不懂後端開發的，安裝了這一套環境也沒用，這裡姑且假設讀者也是懂一定的後端開發知識。

下面列出最主要的一部分Java程式碼來說明後端程式是怎麼提供的http介面：

@RestController
@RequestMapping(value = "/movie")
public class MovieListController extends MovieBaseController{
    private static final Logger log = org.slf4j.LoggerFactory.getLogger(MovieListController.class);

    /**
     * 豆瓣top250電影
     * test: http://localhost:8080/movie/top250?start=0&limit=10
     */
    @RequestMapping(value = "/top250")
    public CommonRespVo<List<ListCommonVo>> getMovieTop250() {
        try {
            HttpServletRequest request = this.getHttpServletRequest();
            String start = request.getParameter("start");
            String limit = request.getParameter("limit");
            String url = String.format("https://api.douban.com/v2/movie/top250?start=%s&count=%s",start,limit);
            JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url);
            List<ListCommonVo> listCommonVos = this.movieListDataTrans(jsonObject);

            if (CollectionUtils.isNotEmpty(listCommonVos)) {
                return new CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS);
            }
        } catch (Exception e) {
            log.error("獲取豆瓣top250電影資訊異常",e);
        }
        return new CommonRespVo(CommonRespVoCode.FAILED.code, "未獲取到資料");
    }
    
    /**
     * 華語top100電影
     * test: http://localhost:8080/movie/chinaTopMovie?start=0&limit=10
     */
    @RequestMapping(value = "/chinaTopMovie")
    public CommonRespVo<List<JSONObject>> getChinaTopMovie() {
        try {
            List<JSONObject> result = this.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData));
            if (CollectionUtils.isNotEmpty(result)) {
                return new CommonRespVo(result, CommonRespVoCode.SUCCESS);
            }
        } catch (Exception e) {
            log.error("獲取華語Top電影資訊異常",e);
        }
        return new CommonRespVo(CommonRespVoCode.FAILED.code, "未獲取到資料");
    }
    //省略後續程式碼
}
複製程式碼

上面這段程式碼，就是其中的兩個介面，一個是通過公共API獲取豆瓣top250電影資訊，一個是通過爬蟲資料獲取的華語top100電影資訊。可以看到SpringBoot使用RestController註解表明此類處理http請求，並在每個RequestMapping對應的方法上都返回json格式的資料。

RequestMapping註解的作用是為每個方法對映一個url。@RequestMapping註解可以作用在控制器類上，也可以作用在其下的某個方法上。當在類級別上新增@RequestMapping註解時，這個註解會應用到控制器的所有方法上。而方法上的@RequestMapping註解會對類級別上的@RequestMapping的宣告進行補充。這就是上面最終的url是類加方法上的路徑的原因，在本地測試的時候在瀏覽器裡通過url：http://localhost:8080/movie/chinaTopMovie?start=0&limit=10就可以獲取到返回的資料。

程式程式碼開發完成後，使用Maven構建專案並將程式碼打包成一個war包形式的檔案，在target目錄中可以找到該war包，後面會講到這個war包的用途。

資料來源

排行榜資料是要具有一定的權威性，客觀性的，所以當然不能我隨便拿一些資料排列一下就成的，我自己又沒有能力去統計這幾類資訊的相關排行，所以我就想到了拿來主義：從別人那裡拿已經具備一定權威的資料。豆瓣有一些公共開源的api可以拿到我想要的部分資料，另外一些資料在其他各大排行榜網站上都有，但是沒有現成的api把他們的資料提供給我，他們既然不給，那我只能自己去取了。

我使用Python寫了一些爬蟲軟體定期的爬取特定的排行榜網站上的資料，用這些資料更新我本地的靜態資料，這樣我的Java程式就可以拿到相對新的資料了。這裡其實我還可以做得更好，但為了快速的上線，我來不及使用資料庫落地這些爬取來的資料，這樣有個不好的結果就是，每次服務重啟的時候，有一段時間的資料不是最新的。這在我的可接受範圍內，後面有時間再去解決這個問題吧。

豆瓣的api示例：api.douban.com/v2/movie/to…，通過這個url可以批量分頁的拿到top電影榜的資料。

python爬蟲則使用的是urlopen，urllib.request.urlopen()函式是用於實現對目標url的訪問，返回url對應的網頁資料。再使用BeautifulSoup對網頁資料進行解析，主要是遍歷搜尋文件樹從而拿到自己想要的那部分資料。

部署後端程式

準備：

  • 雲服務主機： 騰訊雲伺服器
  • Web應用伺服器：Tomcat 8
  • JRE：Java 8
  • SSL證照：Tomcat對應的SSL證照
  • FTP傳輸工具：FileZilla

首先登入購買的那臺雲伺服器，部署前先安裝好環境，主要是安裝JRE和Tomcat，安裝好後還需要對Tomcat進行一番配置。

1. 安裝環境

  • 安裝JRE 點選下載Java執行時環境：Java SE Runtime Environment 8u201，下載後安裝。
  • 安裝Tomcat 需要提前安裝好Tomcat。進Tomcat官網下載對應版本的Tomcat壓縮包：Apache Tomcat，將下載好的壓縮包拷貝至指定的目錄並解壓，我這裡是拷貝到/usr/local。

2. 配置Tomcat

3. 部署應用

將我們之前用Maven打包好的war包拷貝到安裝Tomcat的webapps目錄下，如我這裡下圖的位置：

[root@VM_0_12_centos webapps]# pwd
/usr/local/tomcat8/webapps
[root@VM_0_12_centos webapps]# ls
docs  examples  host-manager  manager  ROOT  wxrank  wxrank.war
複製程式碼

這裡也就是上圖中wxrank.war檔案，然後去Tomcat的bin資料夾下執行startup.bat啟動tomcat，即可自動解壓war包，並部署。

小結

為了方便，上面有些檔案是在自己的電腦上下載好了，再通過FileZilla上傳到雲伺服器上，我自己電腦和雲伺服器之間的其他檔案傳輸也都是用的這個工具。

隨著Tomcat的配置以及部署成功，我們的後端介面就可以通過url訪問到了。

總結

雖然難度不大，但是整個過程確實還是挺繁瑣的，之前只是大致知道怎麼搭建，卻並沒有完整的實踐過。整個流程完成下來，心中對於軟體開發的全域性觀更加具體化了，這算是最大的收穫吧。

下面是小程式成品，掃一掃看一下吧：

從0開始搭建微信小程式(前後端)的全過程
還有很多資料沒準備好，後面有時間再優化優化。另外既然雲伺服器買都買了，怎麼著也得充分的利用下，所以又在上面搭了一個個人部落格，點下面我的部落格連結看一下效果吧：www.jackielee.cn

原文連結：隨猿記-從0開始搭建微信小程式(前後端)的全過程

相關文章