预览最终效果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即可
https://console.qcloud.com/ssl按照提示即可,等待审核
https://console.qcloud.com/beian/authcode 生成备案授权码,https://console.qcloud.com/beian按照提示进行备案即可。比较麻烦又是拍照,又是打印的,如果你就是写写玩玩小程序这部可以跳过,如果你的小程序有后台,并且想自己搭建后台,这一步必须做,因为不备案的话,没法提交小程序审核。
安装nodejs环境,安装nginx做反向代理,安装mysql数据库
参考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。
apt-get install nginx
查看nginx版本
nginx -v
如果腾讯云服务器审核比较慢,咱们自己生成即可
创建文件夹 /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的微信小程序全栈保姆式教程二