從0開始搭建微信小程序(前后端)的全過程
- 閱讀量:
- 0
- 發(fā)表時間:
- 2022-06-22 01:32:06
前言 有段時間比較閑就嘗試著做了一個微信小程序,一是為了鍛煉自己獨立部署一個前后端全鏈路系統(tǒng)的能力,二是想做一個自己都想用的小程序出來。方向是讓用戶可以集中獲取優(yōu)質(zhì)的電影、音樂、書籍、游戲等信息的推薦,那什么是優(yōu)質(zhì)的信息呢?我這里假設(shè)的是排行榜里越靠前的信息就越是優(yōu)質(zhì)的信息,于是就做了一個這幾類信息的排行榜小程序,當然排行的信息不是我隨便瞎編的,數(shù)據(jù)來源主要是豆瓣以及其他一些排行網(wǎng)站,希望排行數(shù)據(jù)是權(quán)威和客觀的,能最大化的減少用戶獲取優(yōu)質(zhì)資源的成本。 下面講解的可能不會太詳細,畢竟想呈現(xiàn)的是一個全過程,弄一個非常詳細的圖文教程反而顯得有些冗長,有些詳細操作過程需要讀者自己去參照相關(guān)文檔,有些文檔鏈接也會給出。OK,準備好了嗎?一起開始這趟快樂的旅程吧。 準備工作 工欲善其事,必先利其器。要做的事明確了,那怎么做呢?需要準備什么呢? 下面我將我涉及到的以等式的形式羅列出來:
前端 1. 注冊微信小程序賬號 進入:微信公眾平臺, 選擇小程序的賬號類型按照流程進行注冊。注意每個郵箱只能注冊一個賬號。 2. 下載開發(fā)工具 有了賬號后,我們就可以使用這個賬號進行開發(fā)了,開發(fā)用的IDE是騰訊出品的微信開發(fā)者工具,進入:小程序開發(fā)工具,下載對應的版本安裝即可。 3. 開始進入小程序前端開發(fā) 打開剛下載好的微信開發(fā)者工具,掃碼登錄、創(chuàng)建小程序項目。登錄微信公眾號平臺,在開發(fā)->開發(fā)設(shè)置->開發(fā)者ID中找到你小程序的AppID并填入到項目設(shè)置里。
接著開始真正具體頁面的開發(fā)了,開發(fā)過程參考開發(fā)文檔:微信小程序接入指南 4. 前端開發(fā)過程 小程序前端開發(fā)其實就是在騰訊的開發(fā)工具里,使用js語言,遵循騰訊小程序的開發(fā)文檔規(guī)范進行代碼編寫。開發(fā)過程中可以編譯、預覽、真機調(diào)試等,可以使用各種插件,可以調(diào)用一些公共的api或者自己定義的后端接口,也可以使用騰訊提供的云函數(shù)。 調(diào)用的后端接口需要是https開頭的,并且需要在微信公眾平臺的開發(fā)->開發(fā)設(shè)置->服務器域名里配置好。 5. 打包上線 開發(fā)完成后就可以準備上線了,首先在開發(fā)者工具里將寫好的代碼上傳,點擊上傳,定義版本號和注釋,再到微信公眾平臺的版本管理提交審核,待審核通過了就表示上線成功了,就可以在微信中搜索到你的小程序進行訪問了。
小結(jié) 到這里,前端的工作就算是完成了,其實一般如果不涉及復雜數(shù)據(jù)處理的話,后端不是必需的,直接所有簡單數(shù)據(jù)都存放在前端就行了。如果你的小程序是這樣的話,那本文到這里就可以結(jié)束了。后面的你也不需要看了。如果你需要更靈活的交互,更復雜的邏輯,那后端接口則必不可少了。那更復雜的后端數(shù)據(jù)接口又是怎么完成的呢,跟著我繼續(xù)往下走你就知道了。 后端 后端主要是提供給小程序數(shù)據(jù)接口,讓小程序各個頁面都能有排行榜數(shù)據(jù)展示,這里我提供的是http接口,返回的Json格式的字符串。使用的語言是Java,使用的框架是SpringBoot,將最終的java代碼打包成war包部署在云主機上的web服務器Tomcat中,Tomcat就可以自動的將通過url過來的請求分發(fā)到我的程序代碼的處理邏輯中,處理完請求拿到相應的數(shù)據(jù)則以Json字符串的格式返回。 主要流程如下圖:
服務器搭建 1. 購買云服務器 首先要存放后端程序代碼,需要一臺機器,自己的電腦雖然也可以,但是自己的電腦可不能保證24小時都開機且讓外網(wǎng)能訪問到,所以需要購買一臺云服務器;其次,外網(wǎng)能訪問到意味著需要一個公網(wǎng)IP,購買的云服務器會配套一個對應的IP地址。這里我使用的是騰訊云服務器,進入官網(wǎng)購買:騰訊云,選擇服務器的配置,付款即可。 基于經(jīng)費預算以及實際需要(其實還是因為舍不得花錢)的考慮,我這里選擇的是比較低配的機器:
2. 購買域名 域名是用來映射到IP上,便于直接使用域名訪問其綁定IP所在的服務器。雖然直接用IP和端口的形式也可以訪問到我們購買的云服務器,但是一來IP不好記,二來微信不允許使用IP加端口形式的url。所以只能“慷慨解囊”購買一個域名了。 域名可以在任意域名服務商購買,我為了方便也是直接在騰訊云上買的,購買鏈接:域名注冊
3. 域名解析 買好了域名,那這個域名怎么用呢,不和IP配套使用的域名是沒有任何意義的域名。這里我們需要將這個域名或者其子域名綁定在我們需要對外提供服務的服務器所對應的IP上,也就是我剛剛購買的云服務器的IP上。 在騰訊云后臺的云解析里,點擊你的域名添加記錄,一般主要是添加A記錄,也就是將域名綁定到IPv4地址上,可以添加多條,以主機記錄區(qū)分各級的域名,@表示直接使用二級域名,其他的則表示使用三級或更多級的域名,掛在你自己二級域名以下的多級域名都歸你管。
4. 域名備案 為什么要域名備案呢?這個,普天之下莫非王土,互聯(lián)網(wǎng)這塊一畝三分地自然也是屬于國家的,不能隨隨便便讓你接入服務。要想在這塊地開墾拓荒,不是不可以,只是需要向國家報備,接受監(jiān)管。 整個小程序的搭建過程,域名備案花的時間是最長的,花了十幾二十天。進入備案頁面:備案管理開始備案,詳細的我就不多說了, 備案過程詳情參考:網(wǎng)站備案 主要流程包括下面幾個: (1) 辦理幕布拍照 (2) 驗證備案信息 (3) 填寫主體信息 (4) 填寫網(wǎng)站信息 (5) 上傳材料 (6) 確認備案信息,提交初審 (7) 通過審核,完成備案 5. 購買SSL證書 為什么需要SSL證書呢?因為配置了SSL證書后可以讓我們的url以https開頭,這是微信小程序中要求的域名訪問方式,以加密傳輸?shù)姆绞礁影踩?說是購買,其實你可以選擇免費的證書“購買”,一樣可以達到目的,只是沒有付費的加密功能強,安全性自然弱了一等。不過這也阻攔不了我選擇免費的,畢竟窮字當頭。 進入購買頁面:SSL證書, 選擇你要購買的證書的配置,下單付錢即可,將證書下載下來,后續(xù)配置web服務器用得著。 小結(jié) 經(jīng)過了前面5個大步驟,這時我們的服務器具備了使用https協(xié)議通過域名訪問的能力。接下來的工作就剩下開發(fā)我們的后端接口以及把后端程序代碼部署到這臺服務器上供小程序訪問。 后端程序開發(fā) 環(huán)境:
安裝這些工具就不細講了,網(wǎng)上一大堆教程,而且要是不懂后端開發(fā)的,安裝了這一套環(huán)境也沒用,這里姑且假設(shè)讀者也是懂一定的后端開發(fā)知識。 下面列出最主要的一部分Java代碼來說明后端程序是怎么提供的http接口:
上面這段代碼,就是其中的兩個接口,一個是通過公共API獲取豆瓣top250電影信息,一個是通過爬蟲數(shù)據(jù)獲取的華語top100電影信息??梢钥吹絊pringBoot使用RestController注解表明此類處理http請求,并在每個RequestMapping對應的方法上都返回json格式的數(shù)據(jù)。 RequestMapping注解的作用是為每個方法映射一個url。@RequestMapping注解可以作用在控制器類上,也可以作用在其下的某個方法上。當在類級別上添加@RequestMapping注解時,這個注解會應用到控制器的所有方法上。而方法上的@RequestMapping注解會對類級別上的@RequestMapping的聲明進行補充。這就是上面最終的url是類加方法上的路徑的原因,在本地測試的時候在瀏覽器里通過url:就可以獲取到返回的數(shù)據(jù)。 程序代碼開發(fā)完成后,使用Maven構(gòu)建項目并將代碼打包成一個war包形式的文件,在target目錄中可以找到該war包,后面會講到這個war包的用途。 數(shù)據(jù)來源 排行榜數(shù)據(jù)是要具有一定的權(quán)威性,客觀性的,所以當然不能我隨便拿一些數(shù)據(jù)排列一下就成的,我自己又沒有能力去統(tǒng)計這幾類信息的相關(guān)排行,所以我就想到了拿來主義:從別人那里拿已經(jīng)具備一定權(quán)威的數(shù)據(jù)。豆瓣有一些公共開源的api可以拿到我想要的部分數(shù)據(jù),另外一些數(shù)據(jù)在其他各大排行榜網(wǎng)站上都有,但是沒有現(xiàn)成的api把他們的數(shù)據(jù)提供給我,他們既然不給,那我只能自己去取了。 我使用Python寫了一些爬蟲軟件定期的爬取特定的排行榜網(wǎng)站上的數(shù)據(jù),用這些數(shù)據(jù)更新我本地的靜態(tài)數(shù)據(jù),這樣我的Java程序就可以拿到相對新的數(shù)據(jù)了。這里其實我還可以做得更好,但為了快速的上線,我來不及使用數(shù)據(jù)庫落地這些爬取來的數(shù)據(jù),這樣有個不好的結(jié)果就是,每次服務重啟的時候,有一段時間的數(shù)據(jù)不是最新的。這在我的可接受范圍內(nèi),后面有時間再去解決這個問題吧。 豆瓣的api示例:…,通過這個url可以批量分頁的拿到top電影榜的數(shù)據(jù)。 python爬蟲則使用的是.urlopen()函數(shù)是用于實現(xiàn)對目標url的訪問,返回url對應的網(wǎng)頁數(shù)據(jù)。再使用BeautifulSoup對網(wǎng)頁數(shù)據(jù)進行解析,主要是遍歷搜索文檔樹從而拿到自己想要的那部分數(shù)據(jù)。 部署后端程序 準備:
首先登錄購買的那臺云服務器,部署前先安裝好環(huán)境,主要是安裝JRE和Tomcat,安裝好后還需要對Tomcat進行一番配置。 1. 安裝環(huán)境
2. 配置Tomcat
3. 部署應用 將我們之前用Maven打包好的war包拷貝到安裝Tomcat的webapps目錄下,如我這里下圖的位置:
<文件,然后去啟動tomcat,即可自動解壓war包,并部署。 小結(jié) 為了方便,上面有些文件是在自己的電腦上下載好了,再通過FileZilla上傳到云服務器上,我自己電腦和云服務器之間的其他文件傳輸也都是用的這個工具。 隨著Tomcat的配置以及部署成功,我們的后端接口就可以通過url訪問到了。 總結(jié) 雖然難度不大,但是整個過程確實還是挺繁瑣的,之前只是大致知道怎么搭建,卻并沒有完整的實踐過。整個流程完成下來,心中對于軟件開發(fā)的全局觀更加具體化了,這算是最大的收獲吧。熱門文章
熱門文章