预览最终效果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

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的微信小程序全栈保姆式教程一相关推荐

【微信小程序全栈开发课程】课程目录（mpvue+koa2+mysql）
1.前言本课程会将我的一个已上线的全栈小程序项目做成[免费课程]分享给大家~ 小程序扫描下面二维码查看功能: 小程序环境搭建+开发工具介绍+vue+ES6基础知识+每一行代码展示+代码逻辑+云服务器 ...
7.4【微信小程序全栈开发课程】小程序上线--基于Ubuntu搭建小程序运行环境
上一节我们安装了nginx和SSL证书,这一节继续来搭建小程序运行环境 1.配置nodeJs环境 (1)安装node.npm 我们云服务器是Ubuntu系统,通过apt-get安装即可 //下载nod ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
李艺《微信小程序全栈开发实战》（第一章）
李艺<微信小程序全栈开发实战>(第一章) 双线程运行机制小程序的特点及开发能力小程序的特点小程序的开发能力开发小程序的一般流程小程序的运行机制小程序双线程视图的持续更新是如何 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...
3.1【微信小程序全栈开发课程】在本地搭建后端开发环境
第二章将前端页面的框架基本搭建好了,第三章,我们来做登录功能,登录功能需要在后端获取到用户信息,返回到前端.所以先来搭建后端开发环境 1.后端开发环境介绍我们的项目用的是前后端分离开发前端可以理解 ...

基于mpvue的微信小程序全栈保姆式教程一