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

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

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

準備工作

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

小程序賬號 + 微信開發者工具 + 前端代碼 + 後端數據 = 微信小程序
豆瓣公共API + 參數 = 實時的排行榜數據及詳情數據
PyCharm + Python + 爬蟲代碼 = 爬取的排行榜數據
Idea + Java + SpringBoot = 後端接口定義
騰訊雲服務器 + Tomcat + 後端接口定義 = 可訪問的後端服務接口
域名 + IP + SSL證書 + 備案 = 合法後端接口訪問路徑

前端

1. 註冊微信小程序賬號

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

2. 下載開發工具

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

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

打開剛下載好的微信開發者工具，掃碼登錄、創建小程序項目。登錄微信公衆號平臺，在開發->開發設置->開發者ID中找到你小程序的AppID並填入到項目設置裏。

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

4. 前端開發過程

小程序前端開發其實就是在騰訊的開發工具裏，使用js語言，遵循騰訊小程序的開發文檔規範進行代碼編寫。開發過程中可以編譯、預覽、真機調試等，可以使用各種插件，可以調用一些公共的api或者自己定義的後端接口，也可以使用騰訊提供的雲函數。

調用的後端接口需要是https開頭的，並且需要在微信公衆平臺的開發->開發設置->服務器域名裏配置好。

5. 打包上線

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

小結

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

後端

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

主要流程如下圖：

服務器搭建

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。所以只能“慷慨解囊”購買一個域名了。

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

3. 域名解析

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

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

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

配置Tomcat的環境變量，配置過程參考： Apache Tomcat User Guide
把我們之前購買並下載好的SSL證書配置在Tomcat中，具體配置過程參考:Tomcat 證書部署，或者參考官網文檔： SSL/TLS Configuration HOW-TO

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訪問到了。

還有很多數據沒準備好，後面有時間再優化優化。另外既然雲服務器買都買了，怎麼着也得充分的利用下，所以又在上面搭了一個個人博客，點下面我的博客鏈接看一下效果吧：www.jackielee.cn

作者：猿奮

原文：從0開始搭建微信小程序(前後端)的全過程 - 掘金

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

準備工作

前端

1. 註冊微信小程序賬號

2. 下載開發工具

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

4. 前端開發過程

5. 打包上線

小結

後端

服務器搭建

1. 購買雲服務器

2. 購買域名

3. 域名解析

4. 域名備案

5. 購買SSL證書

小結

後端程序開發

環境：

數據來源

部署後端程序

準備：

1. 安裝環境

2. 配置Tomcat

3. 部署應用

小結

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

Python 將PowerPoint (PPT/PPTX) 轉爲HTML

SQL優化-20231016

小程序識別身份證，銀行卡，營業執照，駕照

小程序多平臺同構方案分析-kbone 與 remax

小程序的雙線程模型

小程序模塊曝光埋點方法

小程序 input 數據雙向綁定

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結