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

時間  2019-11-07
標籤 開始 搭建 微信 程序 後端 全過程 简体版
原文   原文鏈接

前言

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

下面講解的可能不會太詳細，畢竟想呈現的是一個全過程，弄一個很是詳細的圖文教程反而顯得有些冗長，有些詳細操做過程須要讀者本身去參照相關文檔，有些文檔連接也會給出。OK，準備好了嗎？一塊兒開始這趟快樂的旅程吧。前端

準備工做

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

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

前端

1. 註冊微信小程序帳號

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

2. 下載開發工具

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

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

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

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

4. 前端開發過程

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

調用的後端接口須要是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地址上，能夠添加多條，以主機記錄區分各級的域名，@表示直接使用二級域名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

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開始搭建微信小程序(先後端)的全過程

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程