基于mpvue的微信小程序全棧保姆式教程二

上一篇文章已經(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新建一個微信，接下來下載微信小程序開發(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)建一個本地連接，進(jìn)入本地?cái)?shù)據(jù)庫，新建一個cAuth數(shù)據(jù)庫，然后將下載的代碼server/tools/cAuth.sql導(dǎo)入到cAuth數(shù)據(jù)庫。右鍵cAuth選擇運(yùn)行SQL文件，然后選擇cAuth.sql運(yùn)行即可。

打開xampp

新建cAuth數(shù)據(jù)庫

接下來需要修改配置文件，推薦使用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)行小程序。然后再打開一個cmd進(jìn)入到/XCDHBook/server 和上面一樣，運(yùn)行小程序后端代碼。安裝依賴 cnpm install ， 安裝nodemon cnpm install -g nodemon,然后cnpm run dev 或者npm run dev運(yùn)行起來，目前為止有兩個cmd，一個是后端代碼，一個是前端小程序代碼。
打開微信小程序開發(fā)工具，記得勾選不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS 版本以及 HTTPS 證書，把項(xiàng)目目錄定位到XCDHBook即可，打開后點(diǎn)擊上面的編譯，編譯一下就行了。這個時(shí)候你就可以看到微信小程序已經(jīng)跑起來了。

微信開發(fā)者工具

設(shè)置https

XCDHBook

注意這個時(shí)候還不能真機(jī)預(yù)覽，你點(diǎn)擊了預(yù)覽按鈕會生成一個二維碼，掃描后并不能看到數(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)境

開通開發(fā)環(huán)境

后臺管理

https://console.qcloud.com/lav2/dev，可以看到騰訊為你準(zhǔn)備了一套的配套措施，其實(shí)就是上篇文章咱們配置的服務(wù)器。把二級域名復(fù)制粘貼一下，修改配置文件即可。
開發(fā)環(huán)境

先把數(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)錯誤，也不怕，我們直接打開cAuth.sql，把里面的sql語句復(fù)制粘貼出來，然后點(diǎn)擊SQL按鈕，直接運(yùn)行sql進(jìn)行建表，然后插入數(shù)據(jù)即可。
導(dǎo)入mysql

運(yùn)行sql

修改/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)境，第一次上傳采用模塊上傳，以后采用智能上傳


上傳開發(fā)環(huán)境代碼

第一次上傳

這個時(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。

修改數(shù)據(jù)庫密碼

開通后修改一下配置，主要是把/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)擊代碼部署等候一會即可。這個時(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)行重啟，這個時(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ù)了。
有個坑就是上一篇咱們的ssl是自己生成的，不是購買的，導(dǎo)致一個問題就是通過微信開發(fā)者工具可以請求到數(shù)據(jù)，但是預(yù)覽的話就不行，ssl必須要是購買的，如果是自己做的，手機(jī)無法請求到。

總結(jié)

我github里面的html代碼是用pug編寫的，css是用stylus編寫的，和視頻里面稍微有點(diǎn)不一樣，主要是我感覺縮進(jìn)很好看。具體的代碼編寫可以查看視頻跟著學(xué)習(xí)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容