基于mpvue的微信小程序全栈保姆式教程二
上一篇文章已经把服务器配置完毕，接下来就是把代码在本地跑起来，在开发环境跑起来，在生成环境跑起来，在自己配置的服务器跑起来。
微信小程序注册
前往https://mp.weixin.qq.com/wxopen/waregister?action=step1注册自己的小程序账号，按照提示即可，然后前往https://mp.weixin.qq.com/wxopen/initprofileaction=home&lang=zh_CN&token=406389460新建一个微信，接下来下载微信小程序开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，选择适合自己电脑的版本。
让代码在本地跑起来
配置本地环境
安装MySQL，建议下载xampp，用xampp自带的MySQL，用起来比较方便。下载Navicat Premium，上篇文章已经给出下载破解地址。
下载代码并本地运行起来
从https://github.com/FFGF/XCDHBook下载代码到本地，打开xampp,点击MySQL的start 启动本地MySQL， 通过Navicat创建一个本地连接，进入本地数据库，新建一个cAuth数据库，然后将下载的代码server/tools/cAuth.sql导入到cAuth数据库。右键cAuth选择运行SQL文件，然后选择cAuth.sql运行即可。
接下来需要修改配置文件，推荐使用vscode编辑器，修改/XCDHBook/project.config.json 把里面的appid换成你自己微信小程序的appid
{
"description": "项目配置文件。",
"setting": {
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"miniprogramRoot": "./dist/",
"qcloudRoot": "./server/",
"compileType": "miniprogram",
"appid": "wx56f6f1c59845b222",
"projectname": "book",
"libVersion": "2.2.3",
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}修改/src/config.js为下面所示
// 配置项
const host = 'http://localhost:5757'
const config = {
host,
loginUrl: `${host}/weapp/login`,
userUrl: `${host}/weapp/user`
}
export default config修改/server/config.js代码为下面所示,可以把其中的qcloudAppId、qcloudSecretId、qcloudSecretKey修改成你自己的。
const CONF = {
serverHost: 'localhost',
tunnelServerUrl: '',
tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
qcloudAppId: '1253824455',
qcloudSecretId: 'AKIDYCtbPHAQ8W0SySxBCZ4lbbi4W7nitQII',
qcloudSecretKey: 'AGJcqBb50nTCuaCi9f6Pal0Kh8c7ZyHX',
wxMessageToken: 'weixinmsgtoken',
networkTimeout: 30000,
port: '5757',
rootPathname: '',
// 微信小程序 App ID
appId: '',
// 微信小程序 App Secret
appSecret: '',
// 是否使用腾讯云代理登录小程序
useQcloudLogin: true,
/**
* MySQL 配置，用来存储 session 和用户信息
* 若使用了腾讯云微信小程序解决方案
* 开发环境下，MySQL 的初始密码为您的微信小程序 appid
*/
mysql: {
host: 'localhost',
port: 3306,
user: 'root',
db: 'cAuth',
pass: '',
char: 'utf8mb4'
},
cos: {
/**
* 地区简称
* @查看 https://cloud.tencent.com/document/product/436/6224
*/
region: 'ap-guangzhou',
// Bucket 名称
fileBucket: 'qcloudtest',
// 文件夹
uploadFolder: ''
},
// 微信登录态有效期
wxLoginExpires: 7200,
wxMessageToken: 'abcdefgh'
}
module.exports = CONF然后在cmd下面进入到/XCDHBook目录下运行 npm install 安装依赖，如果网速很慢建议换成淘宝的镜像npm install -g cnpm –registry=https://registry.npm.taobao.org 运行cnpm install进行依赖安装，然后cnpm run dev或者npm run dev 运行小程序。然后再打开一个cmd进入到/XCDHBook/server 和上面一样，运行小程序后端代码。安装依赖 cnpm install ， 安装nodemon cnpm install -g nodemon,然后cnpm run dev 或者npm run dev运行起来，目前为止有两个cmd，一个是后端代码，一个是前端小程序代码。
打开微信小程序开发工具，记得勾选不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书，把项目目录定位到XCDHBook即可，打开后点击上面的编译，编译一下就行了。这个时候你就可以看到微信小程序已经跑起来了。
注意这个时候还不能真机预览，你点击了预览按钮会生成一个二维码，扫描后并不能看到数据，因为手机无法找到电脑localhost的数据。接下来让小程序在开发环境跑起来，可以真机预览一下
开通开发环境，进行真机预览
https://mp.weixin.qq.com/wxopen/thirdtools?action=index&token=406389460&lang=zh_CN 选择开通腾讯云，进入后台开发环境
https://console.qcloud.com/lav2/dev，可以看到腾讯为你准备了一套的配套措施，其实就是上篇文章咱们配置的服务器。把二级域名复制粘贴一下，修改配置文件即可。
先把数据库导入到开发环境点击phpMyAdmin按钮，账户是root，密码是你的appid,里面已经存在数据库cAuth，我们只要把我们的表导进去即可，如果导入过程中出现错误，也不怕，我们直接打开cAuth.sql，把里面的sql语句复制粘贴出来，然后点击SQL按钮，直接运行sql进行建表，然后插入数据即可。
修改/XCDHBook/src/config.js,把host换成你自己的开发环境二级域名
// 配置项
const host = 'https://mxvlh6mn.qcloud.la'
const config = {
host,
loginUrl: `${host}/weapp/login`,
userUrl: `${host}/weapp/user`
}
export default config修改/XCDHBook/service/config.js,主要是就是注释掉为了本地开发而做的设置，然后把数据库密码修改成你的appid
const CONF = {
// serverHost: 'localhost',
// tunnelServerUrl: '',
// tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// // 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
// qcloudAppId: '1253824455',
// qcloudSecretId: 'AKIDYCtbPHAQ8W0SySxBCZ4lbbi4W7nitQII',
// qcloudSecretKey: 'AGJcqBb50nTCuaCi9f6Pal0Kh8c7ZyHX',
// wxMessageToken: 'weixinmsgtoken',
// networkTimeout: 30000,
port: '5757',
rootPathname: '',
// 微信小程序 App ID
appId: '',
// 微信小程序 App Secret
appSecret: '',
// 是否使用腾讯云代理登录小程序
useQcloudLogin: true,
/**
* MySQL 配置，用来存储 session 和用户信息
* 若使用了腾讯云微信小程序解决方案
* 开发环境下，MySQL 的初始密码为您的微信小程序 appid
*/
mysql: {
host: 'localhost',
port: 3306,
user: 'root',
db: 'cAuth',
pass: 'wx56f6f1c59845b222',
char: 'utf8mb4'
},
cos: {
/**
* 地区简称
* @查看 https://cloud.tencent.com/document/product/436/6224
*/
region: 'ap-guangzhou',
// Bucket 名称
fileBucket: 'qcloudtest',
// 文件夹
uploadFolder: ''
},
// 微信登录态有效期
wxLoginExpires: 7200,
wxMessageToken: 'abcdefgh'
}
module.exports = CONF上传代码到腾讯云开发环境，第一次上传采用模块上传，以后采用智能上传
这个时候再进行编译，预览即可手机查看了。
开通生产环境，让小伙伴看一下
https://console.qcloud.com/lav2/production 选择nodejs环境即可，选择11块钱的.xyz域名，选择49块的服务器。支付60后，腾讯会帮你自动部署环境，安装依赖。和开哦听开发环境一样，把数据库导入进去，可以修改数据库的密码好记一点，比如修改成qwerabc。
开通后修改一下配置，主要是把/XCDHBook/src/config.js host换成你的生产环境的域名，修改/XCDHBook/service/config.js 里面把数据库密码修改成你的qwerabc，自己刚刚设定的密码。然后点击腾讯云上传正式代码，按照提示填写版本号和备注。
然后回到https://console.qcloud.com/lav2/production生产环境，点击代码部署等候一会即可。这个时候就可以关闭本地服务器cmd了，因为用的是生产环境的数据库了。
然后点击编译，预览即可。如果想让小伙伴也看到你需要添加小伙伴为体验者
接下来就是正式上线，点击微信小程序的上传按钮，然后登录小程序管理后台，提交审核即可，前提是你的域名要备案成功，不然无法提交。
部署后台到自己搭建的服务器
如果你没有搭建服务器这一节可以跳过了，上一篇文章搭建了服务器，接下来我们要把代码部署到上面去。首先要修改/XCDHBook/src/config.js host换成你的生服务器域名，其次修改/XCDHBook/service/config.js 修改成下面所示。其中appId、appSecret修改成你自己的，数据库面修改成你自己的数据库密码，rootPathname修改成你自己代码存放的位置，放到/data/release/weapp即可了
const CONF = {
// serverHost: 'localhost',
// tunnelServerUrl: '',
// tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// // 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
// qcloudAppId: '1253824455',
// qcloudSecretId: 'AKIDYCtbPHAQ8W0SySxBCZ4lbbi4W7nitQII',
// qcloudSecretKey: 'AGJcqBb50nTCuaCi9f6Pal0Kh8c7ZyHX',
// wxMessageToken: 'weixinmsgtoken',
// networkTimeout: 30000,
port: '5757',
rootPathname: '/data/release/weapp',
// 微信小程序 App ID
appId: 'wx56f6f1c59845b222',
// 微信小程序 App Secret
appSecret: 'wx56f6f1c5984qefwrgefe',
// 是否使用腾讯云代理登录小程序
useQcloudLogin: true,
/**
* MySQL 配置，用来存储 session 和用户信息
* 若使用了腾讯云微信小程序解决方案
* 开发环境下，MySQL 的初始密码为您的微信小程序 appid
*/
mysql: {
host: 'localhost',
port: 3306,
user: 'root',
db: 'cAuth',
pass: 'wx56f6f1c59845b222',
char: 'utf8mb4'
},
cos: {
/**
* 地区简称
* @查看 https://cloud.tencent.com/document/product/436/6224
*/
region: 'ap-guangzhou',
// Bucket 名称
fileBucket: 'qcloudtest',
// 文件夹
uploadFolder: ''
},
// 微信登录态有效期
wxLoginExpires: 7200,
wxMessageToken: 'abcdefgh'
}
module.exports = CONF上传代码到服务器，把server目录下面除了node_modules之前的文件进行打包server.zip，然后通过xshell进入服务器
安装 apt-get install lrzsz
cd /data/release/weapp目录下，rz命令上传刚刚打包好的文件，上传完毕后通过
unzip server.zip解压。运行npm run install安装依赖，然后npm run dev运行起来即可，别忘了开启nginx,可以 通过命令service nginx restart 进行重启，这个时候在运行本地的微信小程序即可，可以通过微信开发者工具的调试器的Network看到数据是从自己的服务器获得的。但是一退出xshell就发现，就不能或者数据了，可以通过nohup num run dev命令在后台运行。下次通过xshell在登录服务器可以通过命令
netstat -apn | grep 5757找到对应的线程，然后通过kill -9 进程号 将其杀死，就可以再次启动服务了。
有个坑就是上一篇咱们的ssl是自己生成的，不是购买的，导致一个问题就是通过微信开发者工具可以请求到数据，但是预览的话就不行，ssl必须要是购买的，如果是自己做的，手机无法请求到。
总结
我github里面的html代码是用pug编写的，css是用stylus编写的，和视频里面稍微有点不一样，主要是我感觉缩进很好看。具体的代码编写可以查看视频跟着学习。