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

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

購買云服務器

微信小程序的生產環境可以直接使用騰訊提供的一套環境，域名11rmb一年，服務器49一個月。里面有配置好的nodejs，mysql，ssl證書等。但是有點貴對于學生來說，所以我們會直接搭建后臺，服務器10rmb一個月，域名4rmb一年。

購買騰訊云主機

https://cloud.tencent.com/act/campus點擊購買騰訊云學生主機，一個月十塊錢，建議購買三個月以上，這是個坑，一開始我購買了一個月，備案的使用一直提示沒有可用資源，搞了一天才知道云主機必須得三個月以上并且是包年包月的。選擇ubuntu16.04的系統，購買完畢后登錄騰訊云服務器控制臺https://console.cloud.tencent.com/cvm/index

登錄騰訊云主機

購買后會收到站內信和注冊時的郵箱也會收到一封郵件，上面有初始密碼，可以進行密碼重置，直接輸入即可。

還要開通安全組才可以通過xshell遠程登錄，點擊安全組按照提示進行添加，主要是開通22、80等常用端口。可以隨便把3306端口開通，為MySQL數據庫的遠程連接做好準備。

然后進圖云主機進行安全組的綁定，把剛剛新建的安全組綁定到這臺服務器即可。

通過xshell登錄，在1輸入你云服務器的公網ip，2輸入22即可。然后打開剛剛新建的會話，進行連接，有個坑，在輸入用戶名時一定要輸入ubuntu，因為騰訊云服務器ubuntu系統默認用戶名是ubuntu，密碼就是剛剛設定的密碼。進入后不是超級管理員用戶，操作起來不是很方便，接下來創建root權限，并遠程登錄。

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

域名購買

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

域名解析

就是別輸入域名可以到你的服務器上面，點擊解析、立即設置、輸入公網ip即可

ssl證書

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

網站備案

https://console.qcloud.com/beian/authcode 生成備案授權碼，https://console.qcloud.com/beian按照提示進行備案即可。比較麻煩又是拍照，又是打印的，如果你就是寫寫玩玩小程序這部可以跳過，如果你的小程序有后臺，并且想自己搭建后臺，這一步必須做，因為不備案的話，沒法提交小程序審核。

云服務器環境配置

安裝nodejs環境，安裝nginx做反向代理，安裝mysql數據庫

安裝nodejs環境

參考Ubuntu16.04安裝最新版nodejs
通過xshell以root賬戶登錄服務器

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

安裝最新穩定版nodejs

n stable node -v

最好版本是9.11以上，因為我搭建的時候就是9.11.2。

安裝nginx服務器

apt-get install nginx

查看nginx版本

nginx -v

配置ssl

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

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

然后在/data/release/nginx下進行下面的操作
參考自己制作ssl證書：自己簽發免費ssl證書，為nginx生成自簽名ssl證書

openssl genrsa -des3 -out ssl.key 1024

上面會要求輸入密碼，自己輸入一個好記的密碼即可

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

最后如下

然后進行nginx的配置 參考微信小程序開發環境（阿里云服務搭建+可運行的demo）
可以通過WinSCP連接服務器，因為要編一些配置，如果對vim不是很熟悉的話，WinSCP是個很好的工具首先通過xshell在/etc/nginx/conf.d創建weapp.conf

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

WinSCP新建會話和xshell類似，進入到/etc/nginx/conf.d文件夾下，右鍵編輯，內部編輯器打開即可

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，跳轉到https并顯示 502 Bad Gateway，則表示配置成功。

安裝mysql

安裝mysql

apt-get install mariadb-client-core-10.0

安裝mysql客戶端

apt install mysql-client-core-5.7

進入mysql

mysql -u root

然后創建用戶，并可以遠程登錄

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

修改mysql配置使得可以遠程訪問

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 連接遠程數據庫。新建MySQL連接

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。