實(shí)驗(yàn)項目叫做神記事，英文名speed-note。就是一個記事本小程序。
安裝
npm install --global vue-cli@2.9
vue init mpvue/mpvue-quickstart speed-note
其中wxmp appid來自于后臺 - 開發(fā)設(shè)置 - AppID(小程序ID)。
其他設(shè)置全部保持默認(rèn)即可。
cd my-project
npm install
npm run dev
執(zhí)行之后，使用微信開發(fā)者工具選擇D:/speed-note/，即可預(yù)覽項目。
騰訊云
這時候微信開發(fā)者工具的右上角是沒有“騰訊云”按鈕的，需要去后臺開通。
- 打開：
后臺 - 開發(fā) - 開發(fā)者工具 - TGit權(quán)限管理，會提示你沒有開通騰訊云。那么咱們就去開通。 - 接著會看到
公眾平臺帳號授權(quán)，掃碼授權(quán)。 - 接著會問你，要么開通獨(dú)立的騰訊云賬號，要么關(guān)聯(lián)已有騰訊云賬號。我選擇開通獨(dú)立賬號。
之后進(jìn)入騰訊云管理界面。
下載服務(wù)器端測試代碼
在騰訊云管理界面，你會發(fā)現(xiàn)第三步是下載測試代碼，可選擇的有Nodejs版本和PHP版本，由于Nodejs版本更簡單，所以我先下載了Nodejs版本。
你會發(fā)現(xiàn)文件名是wafer2-quickstart-nodejs...這樣的，那么這個wafer2是什么？
wafer2官方網(wǎng)站：https://github.com/tencentyun/wafer2-quickstart
簡單說，wafer2就是一套工具包，用戶只需要開通，即可使用開發(fā)者工具上傳、部署、調(diào)試小程序后端代碼，無需了解服務(wù)器運(yùn)維、數(shù)據(jù)庫部署搭建即可使用。當(dāng)然，如果你的小程序是純前端程序，不需要后端交互，那么這個工具包可以不必安裝。
這個包里面包含當(dāng)前最流行的koa2框架，也就是類似于PHP語言的Laravel、ThinkPHP...等框架。顯然，你也需要koa2的相關(guān)知識。
我個人對小程序是充滿敬畏的，我不認(rèn)為一個前端程序員需要把后端的工作全包了，如果一個前端程序員能包攬后端，達(dá)到所謂“全?！保荒苷f明這個小程序一定不會是大型的、重要的項目。所以，當(dāng)你在學(xué)習(xí)小程序開發(fā)階段，只要對koa2有基本掌握即可，能做到數(shù)據(jù)庫增刪改查就差不多了，等你真正以開發(fā)小程序?yàn)槁殬I(yè)的時候，后端程序員用什么語言就是他的事情，你只需要讓他po給你接口即可。如果你真的打算全棧，而且更熟悉PHP語言，也無妨，以后再改。甚至說，如果你后端對Java最熟，那也可以，不過就只能脫離騰訊云了，需要用自己的服務(wù)器，因?yàn)轵v訊云不提供Java環(huán)境。
wafer2部署教程：https://github.com/tencentyun/wafer2-quickstart-nodejs/blob/master/README.md
網(wǎng)上的相關(guān)文檔很多，比如 騰訊云 wafer2 上手，輕松部署小程序后端！
將server文件夾放到項目根目錄
wafer2-quickstart-nodejs-master.zip這個文件我們只需要其中的server文件夾，因?yàn)閏lient文件夾就是小程序前端，是我們要用mpvue去生成的，所以不用它的代碼。
修改project.config.json，加入server文件夾路徑
該文件在項目根目錄，它第10行是"miniprogramRoot": "dist/wx/",，在下方追加1行代碼，也就是指定server文件夾的路徑：
"qcloudRoot": "./server/",
其實(shí)有一個細(xì)節(jié)，在設(shè)置這一步之前，你的開發(fā)者工具右上角始終是沒有“騰訊云”按鈕的，即使你去工具 - 工具欄管理 - 自定義工具管理去找，依然是找不到“騰訊云”按鈕，因?yàn)槟銢]有設(shè)置server目錄，開發(fā)者工具認(rèn)為你的小程序不需要后端。直到設(shè)置了server路徑，才會出現(xiàn)“騰訊云”按鈕?，F(xiàn)在勾上它。（如果還沒有，重啟工具就應(yīng)該能找到。）
選擇線上開發(fā)環(huán)境
點(diǎn)擊工具右上角的“騰訊云”按鈕，會讓你選擇Nodejs環(huán)境或是PHP環(huán)境，我們選Nodejs環(huán)境。
重新點(diǎn)擊騰訊云按鈕，可以看到下拉菜單，我們目前用不到這些功能，因?yàn)橄乱徊轿覀兇罱ū镜氐拈_發(fā)環(huán)境。
繼續(xù)部署本地Node.js Demo
先細(xì)讀官方說明微信小程序開發(fā)者工具 自行部署 Node.js Demo，查看《上傳 Demo 和啟動》一節(jié)的內(nèi)容。
具體說，將
// 其他配置 ...
serverHost: 'localhost',
tunnelServerUrl: 'http://tunnel.ws.qcloud.la',
tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// 騰訊云相關(guān)配置可以查看云 API 密鑰控制臺：https://console.cloud.tencent.com/capi
qcloudAppId: '你的騰訊云 AppID',
qcloudSecretId: '你的騰訊云 SecretId',
qcloudSecretKey: '你的騰訊云 SecretKey',
wxMessageToken: 'weixinmsgtoken',
networkTimeout: 30000
貼到server/config.js里面。其中tunnel相關(guān)的跳過，qcloud相關(guān)的如實(shí)填寫。
qcloudAppId來自于騰訊云后臺右上角菜單的“賬號信息”。
qcloudSecretId和qcloudSecretKey來自于騰訊云后臺右上角菜單的“訪問管理”，然后點(diǎn)擊左側(cè)“API秘鑰管理”，如果沒有秘鑰，則“新建秘鑰”。然后從中復(fù)制即可，其中“qcloudSecretKey”需要先填手機(jī)驗(yàn)證碼。
然后，在server目錄執(zhí)行npm install，安裝相關(guān)依賴。
部署本地MySQL
- 準(zhǔn)備MySQL：這一步很簡單，相信任何程序員本機(jī)至少都有一個XAMPP之類的集成環(huán)境，直接用即可。
- 配置
server/config.js：接著，我們修改server/config.js內(nèi)容，設(shè)置相關(guān)參數(shù)。注意，要在數(shù)據(jù)庫中創(chuàng)建一個cAuth庫，編碼為utf8mb4，通常用phpmyadmin創(chuàng)建即可。這個數(shù)據(jù)庫用于存放登錄認(rèn)證相關(guān)的數(shù)據(jù)。可以改名。 - 在server目錄執(zhí)行命令行
node tools/initdb.js，為了給cAuth庫創(chuàng)建一個叫csessioninfo的表。
這里注意，如果你在第3步遇到關(guān)于CURRENT_TIMESTAMP的報錯，這個問題跟MySQL版本過低有關(guān)，解決辦法：要么升級你的集成環(huán)境，要么另裝一個集成開發(fā)環(huán)境。
我個人選擇另裝一個環(huán)境，比如XAMPP的便攜版（https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/7.1.25/），然后修改端口：
-
httpd.conf幾處端口改成800 -
my.ini幾處端口改為33060 - phpmyadmin的
config.inc.php增加一行$cfg['Servers'][$i]['port'] = '33060';，這樣phpmyadmin就可以正常用了，訪問http://localhost:800/phpmyadmin/即可 - 當(dāng)然，
server/config.js里面的MySQL端口也改成33060
此時重新操作第2、3步，即可成功導(dǎo)入sql文件。
測試本地Nodejs服務(wù)器環(huán)境
構(gòu)建demo API
構(gòu)建過程很簡單，兩步：
一、新建一個koa2控制器，叫demo
在server/controllers目錄新建一個demo.js：
async function get (ctx, next) {
ctx.state.data = {
msg: 'Hello 小程序！'
}
}
module.exports = {
get
}
二、新建一個路由，也叫demo
在server/routes目錄的index.js中，在router.post('/message', controllers.message.post)下方追加：
// demo
router.get('/demo', controllers.demo.get)
到此，demo API構(gòu)建完畢。
訪問demo接口
在server目錄敲入node app，啟動http服務(wù)。
瀏覽器訪問http://localhost:5757/weapp/demo，頁面顯示：
{"code":0,"data":{"msg":"Hello 小程序！"}}
測試成功。
安裝nodemon來監(jiān)控文件修改，隨時自動重啟http服務(wù)
nodemon在nodejs界如雷貫耳，它的作用是監(jiān)控文件修改，隨時幫你重啟你的服務(wù)。
npm install -g nodemon
這樣就裝好了，不用做任何配置。
今后啟動服務(wù)就不再是node app，而是nodemon app。
這之后，你每天需要開2個命令行窗口，一個用于執(zhí)行npm run dev，負(fù)責(zé)前端開發(fā)，另一個去server目錄用于執(zhí)行nodemon app，負(fù)責(zé)啟動http服務(wù)。
不校驗(yàn)合法域名
我們本地環(huán)境的域名是http://localhost:5757，這顯然不是騰訊眼中的合法域名，所以，需要到開發(fā)者工具右上角的“詳情”中勾上“不校檢合法域名...”。
安裝wafer2-client-sdk
官網(wǎng)：https://github.com/tencentyun/wafer2-client-sdk
這又是什么東西呢，它中文名叫“微信小程序客戶端騰訊云增強(qiáng) SDK”，說白了就是增強(qiáng)會話能力的一個工具包。在項目根目錄安裝它：
npm install wafer2-client-sdk --save
使用方法：
在項目根目錄的App.vue中加入：
import qcloud from 'wafer2-client-sdk'
然后看一下官方文檔。文檔說，從2018年上半年開始，微信登錄授權(quán)必須手動觸發(fā)，并且給了范例代碼。所以我們代碼大致是：
<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">獲取用戶信息</button>
這里注意，官方文檔是bindgetuserinfo="doLogin"，我們在mpvue當(dāng)然要改成@getuserinfo="doLogin"。
然后添加一個方法：
methods: {
doLogin: function () {
qcloud.setLoginUrl(config.loginUrl)
const session = qcloud.Session.get()
if (session) {
// 第二次登錄
// 或者本地已經(jīng)有登錄態(tài)
// 可使用本函數(shù)更新登錄態(tài)
qcloud.loginWithCode({
success: res => {
console.log('二次登陸', res)
// this.setData({ userInfo: res, logged: true })
// util.showSuccess('登錄成功')
},
fail: err => {
console.error(err)
// util.showModel('登錄錯誤', err.message)
}
})
} else {
// 首次登錄
qcloud.login({
success: res => {
console.log('首次登陸', res)
// this.setData({ userInfo: res, logged: true })
// util.showSuccess('登錄成功')
},
fail: err => {
console.error(err)
// util.showModel('登錄錯誤', err.message)
}
})
}
}
}
上方代碼也是修改自官網(wǎng)提供的范例，注意兩點(diǎn)：
-
config.loginUrl需要先定義一個配置項，其實(shí)它就是http://localhost:5757/weapp/login。 - 我注釋掉了一部分，因?yàn)樾枰葘懸恍┕ぞ哳?，而我們現(xiàn)在并沒有寫。
測試過程：從開發(fā)者工具中點(diǎn)擊button，然后觀察控制臺，等幾秒就會打印出自己的用戶信息。
安裝scss支持
默認(rèn)情況下，mpvue沒有安裝scss相關(guān)依賴，所以我們手動安裝一下：
npm install node-sass sass-loader --save-dev
