本篇文章已授權(quán)微信公眾號 guolin_blog （郭霖）獨(dú)家發(fā)布
博客地址：flutterall.com
可能有些奇怪，為什么開頭一張圖片？留心的同學(xué)也許發(fā)現(xiàn)了，作詞革骨、作曲、編曲析恋，全部都是一個人良哲。有人說，別想賺李榮浩一分錢助隧。玩笑罷了。
先奉上我的小程序
-
捷徑大全
捷徑大全 識圖君
這篇博客講了什么?
很多開發(fā)者巍实，都寫過客戶端。但是又有多少同時寫過線上運(yùn)行的后臺棚潦？又有多少人真正去了解過后臺令漂？去了解過SSL丸边？去申請過證書？很多時候妹窖，大多停留在Demo的程度罷了纬朝。至少嘱吗，我在學(xué)習(xí)寫微信小程序之前滔驾，沒有去真正寫過線上運(yùn)營的后臺哆致。這篇博客，就是來告訴你如何去從零打造你的跨客服端運(yùn)行的微信小程序耻蛇，同時打通你的后臺能力胞此。以小程序?yàn)閯恿κ＃チ私庖婚T新的，Android以外的一門新的知識刁赦。小程序全流程以及連同后臺甚脉，成功上線牺氨。不依賴任何三方后臺。 如果你想了解小程序酝豪、了解后臺的入門知識精堕，想入門全棧歹篓，以及前端與后端如何打通，這篇博客不二之選背捌。
涉及知識點(diǎn)概論
小程序注冊與申請
小程序入門
小程序強(qiáng)制性的HTTPS申請與配置
域名申請與配置
后臺服務(wù)器申請與配置
后臺框架選擇
后臺數(shù)據(jù)庫選擇
more...
小程序
注冊與申請
這塊相關(guān)知識毡庆，官方的申請指南還是比較友好的么抗。我們可以申請個人小程序亚铁，一步步來就好了徘溢。 注冊傳送門
入門
說實(shí)話然爆，我個人不是特別喜歡官方的文檔，我更青睞于三方的文檔奴烙。為什么這么說缸沃？ 好久沒有寫過H5相關(guān)東東了修械，對CSS肯污、JavaScript啥的吨枉，忘得差不多了貌亭。不過感謝小程序圃庭、感謝自己失晴，又讓我拾起來了這些知識涂屁。 這里我推薦的是：W3Cschool拆又，這里能夠快速搜索到相關(guān)API，相關(guān)知識點(diǎn)栈源。
除此之外凉翻，如果你對CSS不是特別了解，這里還有很多的CSS相關(guān)的知識胞谭。
我特別喜歡他的搜索功能男杈，搜索的還是比較快伶棒，比較準(zhǔn)確的肤无。比如，很多CSS不會的在這里直接就可以搜索到滿意的答案竞漾。這不是廣告业岁，是資源笔时，是我這段空余時間學(xué)習(xí)的總結(jié)允耿。就跟當(dāng)年學(xué)習(xí)Web時，老師也推薦過給我W3Cschool一樣提澎。
我對小程序的感覺概論
頁面基本構(gòu)成
wxml和wxss構(gòu)成了絢麗的頁面
js驅(qū)動UI變更渲染
json保存一些配置
可以看到各個文件各司其職盼忌，分工明確谦纱【啵可以這么說，小程序本質(zhì)是一個MVVM框架祠乃，是基于數(shù)據(jù)驅(qū)動的亮瓷，就跟React和Vue差不多降瞳。
生命周期
小程序跟我們的Android相同的是也有生命周期挣饥，類似的頁面加載（onLoad）扔枫、 準(zhǔn)備（onReady）茧吊、顯示（onShow）八毯、隱藏（onHidden）...话速，學(xué)過Android的對這些還是比較好理解的芯侥。
UI
一些原生UI柱查，如：text唉工、image淋硝、button 啥的，都有的竿报。稍微有點(diǎn)耐心烈菌，學(xué)習(xí)起來還是比較快的芽世。布局這塊怎么說呢捂襟，了解過CSS欢峰、H5的應(yīng)該知道的纽帖，他的布局是寫在CSS中的懊直，也就是WXSS中的室囊。多寫寫、多看看盼铁，百度饶火、Google走起來肤寝，還是可以的抖僵。我就是這么過來的額耍群。
數(shù)據(jù)渲染
小程序中世吨，數(shù)據(jù)渲染更多類似于下面這樣：
- wxml
<text>{{nickName}}</text>
- js
this.setData({
nickName:'非常6+1'
})
這樣就完成了數(shù)據(jù)的渲染耘婚，其他的啥的沐祷，也是類似的套路赖临。so easy ！
路由
Android里面打開新頁面startActivity嗅榕，數(shù)據(jù)攜帶可以使用intent以及其他凌那。 小程序里帽蝶，使用wx.navigateTo('/pages/main/main?params=666') 打開新頁面励稳， 獲取數(shù)據(jù)使用onLoad: function(options)生命周期的options.params就可獲取傳遞的值驹尼。就是這么簡單。
網(wǎng)絡(luò)請求
小程序發(fā)起網(wǎng)絡(luò)請求鹅巍，給我們提供了十分簡潔的API骆捧，只需要使用：
wx.request({
url:'www.baidu.com',
success:function(res){
console.log(res.data)
}
})
就可以發(fā)送一個GET請求了敛苇。不過為了安全枫攀，小程序支持的域名必須要使用HTTPS協(xié)議来涨。這也就意味著蹦掐，我們要申請SSL證書僵闯。一步一步來鳖粟。
其他
了解了這些簡單的概論知識向图，后面再看文檔就簡單了許多了榄攀。期待你完成你的第一個小程序航攒。
小程序這塊差不多了后漠畜，就搞起域名吧憔狞，這是個大頭。
域名
小程序如果要與后臺進(jìn)行HTTP數(shù)據(jù)傳輸必須配置：購買域名
我是在萬網(wǎng)上購買的域名域名解析
官網(wǎng)的域名解析還是比較友好的命迈，一步步來是沒問題的躺翻。阿里域名解析
SSL證書
要知道SSL證書是要錢的公你，看看：喜出望外有木有净捅，趁著免費(fèi)趕緊買幾個蛔六，我買了10幾個~~ 下一步就是給域名添加上SSL證書了国章。 阿里云SSL證書控制臺
到這里氓拼，你的HTTPS打造完成桃漾，不過要等一會拟逮，因?yàn)镾SL生效敦迄，以及同步到微信支持確認(rèn)是HTTPS需要一段時間罚屋。我那個時候等了半天脾猛。
備案
這里是重點(diǎn)猛拴，在微信上配置的HTTPS域名需要網(wǎng)上備案的愉昆。不過阿里給了我們備案的方式跛溉，至于如何，在阿里的控制臺上可以找到糙箍。這里不再贅述了。一定要備案Ｅ灯弧Ｊ毡肌坪哄！
服務(wù)端
申請與部署ECS云服務(wù)器
選擇服務(wù)端框架并開發(fā)
申請ECS云服務(wù)器
一家親翩肌，我這里仍然選擇阿里的ECS云服務(wù)器念祭。我當(dāng)時買的是學(xué)生套餐粱坤，大概RMB140/年站玄，現(xiàn)在應(yīng)該也有適當(dāng)?shù)膬?yōu)惠株旷，也可以去看看其他家的灾常。 購買的時候選擇系統(tǒng)鏡像的時候钞瀑，推薦使用CentOS雕什，系統(tǒng)版本的話贷岸，我這里選擇的7.3這里附上鴻洋和郭霖之前的關(guān)于購買云服務(wù)器的指南躏救。我這里購買部署完畢后螟蒸，并沒有立即安裝Tomcat盒使，后面會說明為什么沒有安裝。不過七嫌， Xfpt 和 Xshell 還是要安裝的少办，以后肯定會用到的。 ##服務(wù)端框架 服務(wù)端框架诵原，推薦使用 SpringBoot ,只要你會Java英妓，了解注解一些簡單知識，拿過來就可使用了蔓纠。一個簡單的GET請求，下面幾行代碼就可以搞定了：
@Controller
@EnableAutoConfiguration
public class SampleController {
@RequestMapping("/")
@ResponseBody
String home() {
return "Hello World!";
}
}
Spring Boot的一些優(yōu)點(diǎn)
劃重點(diǎn)惹资， 內(nèi)嵌Tomcat贺纲。這也是我剛才說，為什么不用安裝Tomcat的原因之一褪测。
-
使用Spring Boot你只需要Just Run image
Spring Boot從根本上感覺就是融合了許多的庫猴誊，這樣我們就可以快速開發(fā)部署我們的項目。而且支持Maven依賴侮措，自由化定制你所需要的懈叹。作為Android開發(fā)者，對Maven應(yīng)該很了解吧分扎。
-
可獨(dú)立運(yùn)行的Spring項目澄成，基于Spring Boot的項目，只需要
java -jar xx.jar類畏吓，就可以直接運(yùn)行墨状。 比如：image你只需執(zhí)行
java -jar myserver.jar，你的項目就可以跑起來了，然后...image就是這么簡單。
IDE ： 使用IntelliJ IDEA达布，Android Studio就是基于這個復(fù)制過來的，所有這么友好的開發(fā)工具镐确，毫無抵抗力包吝。
Sring Boot JPA 引用別文 ：JPA顧名思義就是Java Persistence API的意思，是JDK 5.0注解或XML描述對象－關(guān)系表的映射關(guān)系源葫，并將運(yùn)行期的實(shí)體對象持久化到數(shù)據(jù)庫中诗越。說白了就是原生支持?jǐn)?shù)據(jù)庫，對于MySQL數(shù)據(jù)庫支持的非常好息堂。
Spring Boot 配置到服務(wù)器
這個不用配置嚷狞，你只需要將編譯好的jar包使用 Xftp 工具扔到你的云服務(wù)上，然后使用 Xshell 執(zhí)行java -jar xxx.jar命令后储矩，這個項目就在運(yùn)行了感耙。這個時候怎么發(fā)請求呢？簡單持隧，將上面的localhost換成你的ECS云服務(wù)器的公網(wǎng)地址（例如：115.239.210.27/hello）即可。
對HTTP協(xié)議了解的孩子逃片，這個應(yīng)該不難理解屡拨。可以看看這篇短小精悍文章，了解下HTTP協(xié)議褥实。呀狼。
打通域名與IP地址
為什么要打通？因?yàn)槲⑿判〕绦虻木W(wǎng)絡(luò)配置是不支持直接填I(lǐng)P地址的损离。所有我們需要進(jìn)行域名解析哥艇。假設(shè)我們購買的域名是：www.baidu.com，我們的服務(wù)器公網(wǎng)地址是115.239.210.27僻澎，那么如何完成域名到公網(wǎng)地址的映射關(guān)系貌踏？也就是域名解析DNS。這里提供萬網(wǎng)域名解析圖文視頻指南窟勃∽嫒椋可以說很貼心了。 這一步完成后秉氧，我們原來是使用115.239.210.27/hello訪問眷昆，現(xiàn)在就可以使用http://www.baidu.com/hello訪問了。還不能使用https訪問汁咏。
配置HTTPS
微信小程序的域名必須是HTTPS協(xié)議
在最前面我是在阿里購買的免費(fèi)的SSL證書亚斋，這里就是使用到的地方。在這里配置好攘滩，部署到云服務(wù)上后帅刊，就可以使用https://www.baidu.com/hello訪問了。
到這里轰驳，服務(wù)端的框架選擇以及配置大都講完了厚掷。下面我們來說下數(shù)據(jù)庫弟灼。
Spring Boot JPA (MySQL數(shù)據(jù)庫)
在Spring Boot中使用數(shù)據(jù)庫，真的是太簡單了冒黑。如果你了解使用過 GreenDAO田绑，就更容易上手了。
- 添加MySQL數(shù)據(jù)庫驅(qū)動依賴包
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
-
配置 Spring Boot image
-
使用 跟GreenADO一樣抡爹，沒有任何的SQL語句掩驱。 大概下面這樣，就創(chuàng)建了一個string_config表： image
這里有個Sping Boot JPA入門冬竟，或許是你需要的欧穴。
安裝MySql
CentOS 7 安裝MySQL 注意，在阿里云的CentOS中泵殴，你需要關(guān)閉防火墻涮帘。否則可能導(dǎo)致外部無法訪問連接到你的遠(yuǎn)程數(shù)據(jù)庫。
- 推薦使用 Navicat Premium 管理MySQL笑诅。 image
界面簡單易操作调缨，不過需要激活。不過這里有....自己看吧吆你。你懂的~~軟件安裝指南弦叶。
推薦
Sring Boot 在云服務(wù)器上可以配置為開機(jī)啟動，防止意外情況妇多。
一定要先安裝調(diào)試好MYSQL伤哺，否則在IDE與MYSQL溝通連接的時候，會出錯者祖，拋出數(shù)據(jù)庫連接異常等等問題立莉。
可以先使用Navicat 調(diào)試好db后再連接數(shù)據(jù)庫
- 寫小程序的時候，多嘗試咸包，舉一反三桃序。多看看Github上面的Demo。
到這里烂瘫，我們介紹了小程序 媒熊、 SSL 、域名坟比、Spring Boot芦鳍、MySql等等。真的不敢想象葛账，我竟然把這些都聊了一遍~~
共勉
嘗試Android以外的程序開發(fā)模式及語言柠衅，會讓自己有新的感悟。就比如：JS的弱類型語言籍琳，配合xml等等菲宴，使得自己的視野更加開闊了贷祈。
微信小程序讓我由衷感受到了跨平臺的力量，牛皮喝峦，但是也有不足势誊。這兩天，又看了看Flutter谣蠢，感覺又有活了粟耻。
以前對于服務(wù)端大都處在Demo的階段，這段時間的學(xué)習(xí)與實(shí)踐眉踱，效果還是比較明顯的挤忙。所以，我認(rèn)為谈喳，Demo是起點(diǎn)册烈，實(shí)戰(zhàn)才是提升自己的利器。
PS：我的Server一直在后臺運(yùn)行著婿禽，當(dāng)然茄厘，小程序一直可以使用。還有谈宛，我這邊服務(wù)端是基于Spring Boot的，所以也跟后端的哥們聊著學(xué)習(xí)的胎署。
打通了任督二脈（前后端）后吆录，有時候看事情的感覺與角度都不同了。當(dāng)然琼牧，一山更比一山高恢筝，還有更多的實(shí)用知識等待著你我探索。
空余時間不能讓自己閑著巨坊。
