預(yù)覽最終效果https://github.com/FFGF/XCDHBook/blob/master/static/XCDHBook.gif順便推薦一個(gè)視頻轉(zhuǎn)gif的好工具h(yuǎn)ttps://ezgif.com/
如果你不想自己搭建服務(wù)器，可以直接用微信提供的即可，跳過(guò)本篇即可，查看基于mpvue的微信小程序全棧保姆式教程二即可

之前寫過(guò)一兩個(gè)vue的項(xiàng)目，用vue寫前端感覺(jué)很方便簡(jiǎn)潔，比之前html+jQuery+css的方式要舒服的不行，我個(gè)人感覺(jué)是顛覆了前端的寫作方式。我一直對(duì)移動(dòng)端感興趣，但是學(xué)習(xí)Android或者iOS成本太高，而微信小程序是個(gè)很好的切入方式，并且隨著美團(tuán)開(kāi)源mpvue框架，如果你熟悉vue幾乎沒(méi)有學(xué)習(xí)成本，通過(guò)mpvue就可以上手微信小程序，但是微信小程序的上線、發(fā)布又有自己的一些特點(diǎn)，畢竟是微信的東西，你肯定不能隨便發(fā)布，需要審核等其他東西。學(xué)習(xí)一個(gè)東西最快的方式就是直接用這個(gè)東西開(kāi)發(fā)一個(gè)作品出來(lái)，在寫代碼的過(guò)程中就會(huì)慢慢熟悉，會(huì)出現(xiàn)單詞拼錯(cuò)、會(huì)出現(xiàn)奇怪的bug，然后就去百度，google，查閱官方文檔，等把代碼寫完也就熟悉了。所以不要覺(jué)得自己這不會(huì)，那不會(huì)，上去就是干！！！
本文主要是基于全網(wǎng)首發(fā)mpvue課程：小程序全棧開(kāi)發(fā)這個(gè)視頻看了兩遍，第一遍是二倍速看一遍，第二遍是二倍速跟著敲代碼。慕課網(wǎng)實(shí)戰(zhàn)視頻是我見(jiàn)過(guò)最好的教學(xué)視頻，干貨足足，我之前買過(guò)三個(gè)實(shí)戰(zhàn)視頻，如果有錢的建議去慕課官網(wǎng)購(gòu)買視頻，沒(méi)錢的就b站看吧。既然是保姆式全棧教程，就必須的詳細(xì)，購(gòu)買服務(wù)器、域名、ssl證書(shū)、域名備案、代碼編寫、微信小程序工具使用、上線部署必須都得有。說(shuō)了這么多廢話，下面開(kāi)始吧，

購(gòu)買云服務(wù)器

微信小程序的生產(chǎn)環(huán)境可以直接使用騰訊提供的一套環(huán)境，域名11rmb一年，服務(wù)器49一個(gè)月。里面有配置好的nodejs，mysql，ssl證書(shū)等。但是有點(diǎn)貴對(duì)于學(xué)生來(lái)說(shuō)，所以我們會(huì)直接搭建后臺(tái)，服務(wù)器10rmb一個(gè)月，域名4rmb一年。

購(gòu)買騰訊云主機(jī)

https://cloud.tencent.com/act/campus點(diǎn)擊購(gòu)買騰訊云學(xué)生主機(jī)，一個(gè)月十塊錢，建議購(gòu)買三個(gè)月以上，這是個(gè)坑，一開(kāi)始我購(gòu)買了一個(gè)月，備案的使用一直提示沒(méi)有可用資源，搞了一天才知道云主機(jī)必須得三個(gè)月以上并且是包年包月的。選擇ubuntu16.04的系統(tǒng)，購(gòu)買完畢后登錄騰訊云服務(wù)器控制臺(tái)https://console.cloud.tencent.com/cvm/index

登錄騰訊云主機(jī)

購(gòu)買后會(huì)收到站內(nèi)信和注冊(cè)時(shí)的郵箱也會(huì)收到一封郵件，上面有初始密碼，可以進(jìn)行密碼重置，直接輸入即可。

還要開(kāi)通安全組才可以通過(guò)xshell遠(yuǎn)程登錄，點(diǎn)擊安全組按照提示進(jìn)行添加，主要是開(kāi)通22、80等常用端口。可以隨便把3306端口開(kāi)通，為MySQL數(shù)據(jù)庫(kù)的遠(yuǎn)程連接做好準(zhǔn)備。

然后進(jìn)圖云主機(jī)進(jìn)行安全組的綁定，把剛剛新建的安全組綁定到這臺(tái)服務(wù)器即可。

通過(guò)xshell登錄，在1輸入你云服務(wù)器的公網(wǎng)ip，2輸入22即可。然后打開(kāi)剛剛新建的會(huì)話，進(jìn)行連接，有個(gè)坑，在輸入用戶名時(shí)一定要輸入ubuntu，因?yàn)轵v訊云服務(wù)器ubuntu系統(tǒng)默認(rèn)用戶名是ubuntu，密碼就是剛剛設(shè)定的密碼。進(jìn)入后不是超級(jí)管理員用戶，操作起來(lái)不是很方便，接下來(lái)創(chuàng)建root權(quán)限，并遠(yuǎn)程登錄。

輸入su passwd root回車，然后輸入你的root密碼即可，然后輸入su root回車，然后輸入剛剛設(shè)置的密碼即可進(jìn)以root權(quán)限進(jìn)入系統(tǒng)。但是這個(gè)時(shí)候還不能通過(guò)xshell以root權(quán)限直接登錄服務(wù)器，需要設(shè)置一下。
vim /etc/ssh/sshd_config 回車進(jìn)入編輯頁(yè)然后按 i進(jìn)入編輯模式找到PermitRootLogin without-password去掉注釋符號(hào)#,然后修改without-password為yes，如下圖所示，然后按Esc退出編輯模式，依次按下:wq!保存退出，然后輸入reboot重啟或者在騰訊云服務(wù)器后臺(tái)進(jìn)行重啟都可以。然后再新建一個(gè)xshell配置，連接時(shí)輸入用戶名root即可。

域名購(gòu)買

前天通過(guò)騰訊域名新購(gòu)活動(dòng)購(gòu)買的塊錢一年的.xyz域名，剛剛找不到了大家就花11塊錢購(gòu)買吧https://buy.cloud.tencent.com/domain?domain=qwrq&tlds=.xyz，按照提示填寫完畢，購(gòu)買狗會(huì)收到郵件提醒，盡快通過(guò)實(shí)名認(rèn)證，以防被收回。

域名解析

就是別輸入域名可以到你的服務(wù)器上面，點(diǎn)擊解析、立即設(shè)置、輸入公網(wǎng)ip即可

ssl證書(shū)

https://console.qcloud.com/ssl按照提示即可，等待審核

網(wǎng)站備案

https://console.qcloud.com/beian/authcode 生成備案授權(quán)碼，https://console.qcloud.com/beian按照提示進(jìn)行備案即可。比較麻煩又是拍照，又是打印的，如果你就是寫寫玩玩小程序這部可以跳過(guò)，如果你的小程序有后臺(tái)，并且想自己搭建后臺(tái)，這一步必須做，因?yàn)椴粋浒傅脑?#xff0c;沒(méi)法提交小程序?qū)徍恕?/p>

云服務(wù)器環(huán)境配置

安裝nodejs環(huán)境，安裝nginx做反向代理，安裝mysql數(shù)據(jù)庫(kù)

安裝nodejs環(huán)境

參考Ubuntu16.04安裝最新版nodejs
通過(guò)xshell以root賬戶登錄服務(wù)器

apt-get install nodejs apt install nodejs-legacy apt install npm

更新淘寶鏡像源

npm config set registry https://registry.npm.taobao.org npm config list

安裝全局n管理器(用于管理nodejs版本)

npm install n -g

安裝最新穩(wěn)定版nodejs

n stable node -v

最好版本是9.11以上，因?yàn)槲掖罱ǖ臅r(shí)候就是9.11.2。

安裝nginx服務(wù)器

apt-get install nginx

查看nginx版本

nginx -v

配置ssl

如果騰訊云服務(wù)器審核比較慢，咱們自己生成即可
創(chuàng)建文件夾 /data/release/nginx

cd /data mkdir -p release/nginx cd release/nginx

然后在/data/release/nginx下進(jìn)行下面的操作
參考自己制作ssl證書(shū)：自己簽發(fā)免費(fèi)ssl證書(shū)，為nginx生成自簽名ssl證書(shū)

openssl genrsa -des3 -out ssl.key 1024

上面會(huì)要求輸入密碼，自己輸入一個(gè)好記的密碼即可

mv ssl.key xxx.key openssl rsa -in xxx.key -out ssl.key rm xxx.key openssl req -new -key ssl.key -out ssl.csr openssl x509 -req -days 365 -in ssl.csr -signkey ssl.key -out ssl.crt

最后如下

然后進(jìn)行nginx的配置 參考微信小程序開(kāi)發(fā)環(huán)境（阿里云服務(wù)搭建+可運(yùn)行的demo）
可以通過(guò)WinSCP連接服務(wù)器，因?yàn)橐幰恍┡渲?#xff0c;如果對(duì)vim不是很熟悉的話，WinSCP是個(gè)很好的工具首先通過(guò)xshell在/etc/nginx/conf.d創(chuàng)建weapp.conf

cd /etc/nginx/conf.d touch weapp.conf

WinSCP新建會(huì)話和xshell類似，進(jìn)入到/etc/nginx/conf.d文件夾下，右鍵編輯，內(nèi)部編輯器打開(kāi)即可

upstream app_weapp {server localhost:5757;keepalive 8; }server {listen 80;server_name xcdhfgf.xyz;rewrite ^(.*)$ https://$server_name$1 permanent; }server {listen 443;server_name xcdhfgf.xyz;ssl on;ssl_certificate /data/release/nginx/ssl.crt;ssl_certificate_key /data/release/nginx/ssl.key;location / {proxy_pass http://app_weapp;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;} }

把里面域名xcdhfgf.xyz換成你自己的即可，然后保存退出。
輸入nginx -t 如下即代表成功

root@VM-0-2-ubuntu:/# nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful

然后輸入http://你的域名/weapp/demo，跳轉(zhuǎn)到https并顯示 502 Bad Gateway，則表示配置成功。

安裝mysql

安裝mysql

apt-get install mariadb-client-core-10.0

安裝mysql客戶端

apt install mysql-client-core-5.7

進(jìn)入mysql

mysql -u root

然后創(chuàng)建用戶，并可以遠(yuǎn)程登錄

mysql> grant all on *.* to root@'%' identified by '你的密碼' with grant option; >flush privileges;

修改mysql配置使得可以遠(yuǎn)程訪問(wèn)

vim /etc/mysql/mysql.conf.d/mysqld.cnf

注釋掉bind-address = 127.0.0.1

然后下載Navicat Premium 破解方https://blog.csdn.net/qq_21205435/article/details/78902052 連接遠(yuǎn)程數(shù)據(jù)庫(kù)。新建MySQL連接

在上圖1填寫你的公網(wǎng)ip，2輸入之前設(shè)置的密碼，點(diǎn)擊3查看是否可以連接，然后點(diǎn)擊確定即可。如下圖所示說(shuō)明已經(jīng)連接成功了。其中cAuth是微信小程序的數(shù)據(jù)庫(kù)，下一篇文章會(huì)給出建表SQL。

到此為止服務(wù)器配置完畢，下面就是代碼部分了，我會(huì)把代碼上傳到github供大家下載，然后分別就微信小程序開(kāi)發(fā)環(huán)境、上傳、生產(chǎn)環(huán)境配置進(jìn)行講解。
基于mpvue的微信小程序全棧保姆式教程二

總結(jié)

以上是生活随笔為你收集整理的基于mpvue的微信小程序全栈保姆式教程一的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。