上一篇文章已經(jīng)把服務(wù)器配置完畢，接下來就是把代碼在本地跑起來捂蕴，在開發(fā)環(huán)境跑起來启绰，在生成環(huán)境跑起來委可，在自己配置的服務(wù)器跑起來着倾。
微信小程序注冊
前往https://mp.weixin.qq.com/wxopen/waregister?action=step1注冊自己的小程序賬號，按照提示即可蒿囤，然后前往https://mp.weixin.qq.com/wxopen/initprofileaction=home&lang=zh_CN&token=406389460新建一個(gè)微信材诽，接下來下載微信小程序開發(fā)工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html脸侥，選擇適合自己電腦的版本睁枕。
讓代碼在本地跑起來
配置本地環(huán)境
安裝MySQL沸手，建議下載xampp契吉，用xampp自帶的MySQL捐晶，用起來比較方便租悄。下載Navicat Premium，上篇文章已經(jīng)給出下載破解地址胶哲。
下載代碼并本地運(yùn)行起來
從https://github.com/FFGF/XCDHBook下載代碼到本地鸯屿，打開xampp,點(diǎn)擊MySQL的start 啟動本地MySQL寄摆， 通過Navicat創(chuàng)建一個(gè)本地連接婶恼，進(jìn)入本地?cái)?shù)據(jù)庫勾邦，新建一個(gè)cAuth數(shù)據(jù)庫，然后將下載的代碼server/tools/cAuth.sql導(dǎo)入到cAuth數(shù)據(jù)庫萎河。右鍵cAuth選擇運(yùn)行SQL文件虐杯，然后選擇cAuth.sql運(yùn)行即可擎椰。
接下來需要修改配置文件译荞，推薦使用vscode編輯器，修改/XCDHBook/project.config.json 把里面的appid換成你自己微信小程序的appid
{
"description": "項(xiàng)目配置文件圈膏。",
"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為下面所示
// 配置項(xiàng)
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',
// 騰訊云相關(guān)配置可以查看云 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 和用戶信息
* 若使用了騰訊云微信小程序解決方案
* 開發(fā)環(huán)境下囤采，MySQL 的初始密碼為您的微信小程序 appid
*/
mysql: {
host: 'localhost',
port: 3306,
user: 'root',
db: 'cAuth',
pass: '',
char: 'utf8mb4'
},
cos: {
/**
* 地區(qū)簡稱
* @查看 https://cloud.tencent.com/document/product/436/6224
*/
region: 'ap-guangzhou',
// Bucket 名稱
fileBucket: 'qcloudtest',
// 文件夾
uploadFolder: ''
},
// 微信登錄態(tài)有效期
wxLoginExpires: 7200,
wxMessageToken: 'abcdefgh'
}
module.exports = CONF
然后在cmd下面進(jìn)入到/XCDHBook目錄下運(yùn)行 npm install 安裝依賴蕉毯，如果網(wǎng)速很慢建議換成淘寶的鏡像npm install -g cnpm --registry=https://registry.npm.taobao.org 運(yùn)行cnpm install進(jìn)行依賴安裝恕刘，然后cnpm run dev或者npm run dev 運(yùn)行小程序褐着。然后再打開一個(gè)cmd進(jìn)入到/XCDHBook/server 和上面一樣含蓉，運(yùn)行小程序后端代碼。安裝依賴 cnpm install 斟赚， 安裝nodemon cnpm install -g nodemon,然后cnpm run dev 或者npm run dev運(yùn)行起來拗军，目前為止有兩個(gè)cmd发侵，一個(gè)是后端代碼刃鳄，一個(gè)是前端小程序代碼叔锐。
打開微信小程序開發(fā)工具愉烙，記得勾選不校驗(yàn)合法域名解取、web-view（業(yè)務(wù)域名）肮蛹、TLS 版本以及 HTTPS 證書伦忠，把項(xiàng)目目錄定位到XCDHBook即可昆码，打開后點(diǎn)擊上面的編譯，編譯一下就行了吨娜。這個(gè)時(shí)候你就可以看到微信小程序已經(jīng)跑起來了宦赠。
注意這個(gè)時(shí)候還不能真機(jī)預(yù)覽，你點(diǎn)擊了預(yù)覽按鈕會生成一個(gè)二維碼妙色，掃描后并不能看到數(shù)據(jù)身辨，因?yàn)槭謾C(jī)無法找到電腦localhost的數(shù)據(jù)煌珊。接下來讓小程序在開發(fā)環(huán)境跑起來怪瓶，可以真機(jī)預(yù)覽一下
開通開發(fā)環(huán)境践美，進(jìn)行真機(jī)預(yù)覽
https://mp.weixin.qq.com/wxopen/thirdtools?action=index&token=406389460&lang=zh_CN 選擇開通騰訊云陨倡，進(jìn)入后臺開發(fā)環(huán)境
https://console.qcloud.com/lav2/dev，可以看到騰訊為你準(zhǔn)備了一套的配套措施杂曲，其實(shí)就是上篇文章咱們配置的服務(wù)器擎勘。把二級域名復(fù)制粘貼一下棚饵，修改配置文件即可噪漾。
先把數(shù)據(jù)庫導(dǎo)入到開發(fā)環(huán)境點(diǎn)擊phpMyAdmin按鈕欣硼，賬戶是root分别，密碼是你的appid,里面已經(jīng)存在數(shù)據(jù)庫cAuth耘斩，我們只要把我們的表導(dǎo)進(jìn)去即可括授，如果導(dǎo)入過程中出現(xiàn)錯(cuò)誤荚虚，也不怕版述，我們直接打開cAuth.sql渴析，把里面的sql語句復(fù)制粘貼出來俭茧，然后點(diǎn)擊SQL按鈕，直接運(yùn)行sql進(jìn)行建表午磁，然后插入數(shù)據(jù)即可。
修改/XCDHBook/src/config.js,把host換成你自己的開發(fā)環(huán)境二級域名
// 配置項(xiàng)
const host = 'https://mxvlh6mn.qcloud.la'
const config = {
host,
loginUrl: `${host}/weapp/login`,
userUrl: `${host}/weapp/user`
}
export default config
修改/XCDHBook/service/config.js,主要是就是注釋掉為了本地開發(fā)而做的設(shè)置，然后把數(shù)據(jù)庫密碼修改成你的appid
const CONF = {
// serverHost: 'localhost',
// tunnelServerUrl: '',
// tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// // 騰訊云相關(guān)配置可以查看云 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 和用戶信息
* 若使用了騰訊云微信小程序解決方案
* 開發(fā)環(huán)境下扁耐，MySQL 的初始密碼為您的微信小程序 appid
*/
mysql: {
host: 'localhost',
port: 3306,
user: 'root',
db: 'cAuth',
pass: 'wx56f6f1c59845b222',
char: 'utf8mb4'
},
cos: {
/**
* 地區(qū)簡稱
* @查看 https://cloud.tencent.com/document/product/436/6224
*/
region: 'ap-guangzhou',
// Bucket 名稱
fileBucket: 'qcloudtest',
// 文件夾
uploadFolder: ''
},
// 微信登錄態(tài)有效期
wxLoginExpires: 7200,
wxMessageToken: 'abcdefgh'
}
module.exports = CONF
上傳代碼到騰訊云開發(fā)環(huán)境婉称，第一次上傳采用模塊上傳王暗，以后采用智能上傳
這個(gè)時(shí)候再進(jìn)行編譯科汗，預(yù)覽即可手機(jī)查看了头滔。
開通生產(chǎn)環(huán)境坤检，讓小伙伴看一下
https://console.qcloud.com/lav2/production 選擇nodejs環(huán)境即可，選擇11塊錢的.xyz域名期吓，選擇49塊的服務(wù)器早歇。支付60后，騰訊會幫你自動部署環(huán)境讨勤，安裝依賴箭跳。和開哦聽開發(fā)環(huán)境一樣，把數(shù)據(jù)庫導(dǎo)入進(jìn)去悬襟，可以修改數(shù)據(jù)庫的密碼好記一點(diǎn)衅码，比如修改成qwerabc拯刁。
開通后修改一下配置，主要是把/XCDHBook/src/config.js host換成你的生產(chǎn)環(huán)境的域名垛玻，修改/XCDHBook/service/config.js 里面把數(shù)據(jù)庫密碼修改成你的qwerabc割捅，自己剛剛設(shè)定的密碼。然后點(diǎn)擊騰訊云上傳正式代碼帚桩，按照提示填寫版本號和備注亿驾。
然后回到https://console.qcloud.com/lav2/production生產(chǎn)環(huán)境，點(diǎn)擊代碼部署等候一會即可账嚎。這個(gè)時(shí)候就可以關(guān)閉本地服務(wù)器cmd了莫瞬，因?yàn)橛玫氖巧a(chǎn)環(huán)境的數(shù)據(jù)庫了儡蔓。
然后點(diǎn)擊編譯，預(yù)覽即可疼邀。如果想讓小伙伴也看到你需要添加小伙伴為體驗(yàn)者
接下來就是正式上線喂江，點(diǎn)擊微信小程序的上傳按鈕，然后登錄小程序管理后臺旁振，提交審核即可获询，前提是你的域名要備案成功，不然無法提交拐袜。
部署后臺到自己搭建的服務(wù)器
如果你沒有搭建服務(wù)器這一節(jié)可以跳過了吉嚣，上一篇文章搭建了服務(wù)器，接下來我們要把代碼部署到上面去蹬铺。首先要修改/XCDHBook/src/config.js host換成你的生服務(wù)器域名尝哆，其次修改/XCDHBook/service/config.js 修改成下面所示。其中appId甜攀、appSecret修改成你自己的较解，數(shù)據(jù)庫面修改成你自己的數(shù)據(jù)庫密碼，rootPathname修改成你自己代碼存放的位置赴邻，放到/data/release/weapp即可了
const CONF = {
// serverHost: 'localhost',
// tunnelServerUrl: '',
// tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// // 騰訊云相關(guān)配置可以查看云 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 和用戶信息
* 若使用了騰訊云微信小程序解決方案
* 開發(fā)環(huán)境下，MySQL 的初始密碼為您的微信小程序 appid
*/
mysql: {
host: 'localhost',
port: 3306,
user: 'root',
db: 'cAuth',
pass: 'wx56f6f1c59845b222',
char: 'utf8mb4'
},
cos: {
/**
* 地區(qū)簡稱
* @查看 https://cloud.tencent.com/document/product/436/6224
*/
region: 'ap-guangzhou',
// Bucket 名稱
fileBucket: 'qcloudtest',
// 文件夾
uploadFolder: ''
},
// 微信登錄態(tài)有效期
wxLoginExpires: 7200,
wxMessageToken: 'abcdefgh'
}
module.exports = CONF
上傳代碼到服務(wù)器姥敛，把server目錄下面除了node_modules之前的文件進(jìn)行打包server.zip奸焙，然后通過xshell進(jìn)入服務(wù)器
安裝 apt-get install lrzsz
cd /data/release/weapp目錄下，rz命令上傳剛剛打包好的文件彤敛，上傳完畢后通過
unzip server.zip解壓与帆。運(yùn)行npm run install安裝依賴，然后npm run dev運(yùn)行起來即可墨榄，別忘了開啟nginx,可以 通過命令service nginx restart 進(jìn)行重啟玄糟，這個(gè)時(shí)候在運(yùn)行本地的微信小程序即可，可以通過微信開發(fā)者工具的調(diào)試器的Network看到數(shù)據(jù)是從自己的服務(wù)器獲得的袄秩。但是一退出xshell就發(fā)現(xiàn)阵翎，就不能或者數(shù)據(jù)了，可以通過nohup num run dev命令在后臺運(yùn)行之剧。下次通過xshell在登錄服務(wù)器可以通過命令
netstat -apn | grep 5757找到對應(yīng)的線程郭卫，然后通過kill -9 進(jìn)程號 將其殺死，就可以再次啟動服務(wù)了背稼。
有個(gè)坑就是上一篇咱們的ssl是自己生成的贰军，不是購買的，導(dǎo)致一個(gè)問題就是通過微信開發(fā)者工具可以請求到數(shù)據(jù)蟹肘，但是預(yù)覽的話就不行词疼，ssl必須要是購買的俯树，如果是自己做的，手機(jī)無法請求到贰盗。
總結(jié)
我github里面的html代碼是用pug編寫的聘萨，css是用stylus編寫的，和視頻里面稍微有點(diǎn)不一樣童太，主要是我感覺縮進(jìn)很好看米辐。具體的代碼編寫可以查看視頻跟著學(xué)習(xí)。
