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

2019年6月9日 244次阅读来源: 星辰大海__xcdh

上一篇文章已经把服务器配置完毕，接下来就是把代码在本地跑起来，在开发环境跑起来，在生成环境跑起来，在自己配置的服务器跑起来。

微信小程序注册

前往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运行即可。

《基于mpvue的微信小程序全栈保姆式教程二》打开xampp

《基于mpvue的微信小程序全栈保姆式教程二》新建cAuth数据库

接下来需要修改配置文件，推荐使用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即可，打开后点击上面的编译，编译一下就行了。这个时候你就可以看到微信小程序已经跑起来了。

《基于mpvue的微信小程序全栈保姆式教程二》微信开发者工具

《基于mpvue的微信小程序全栈保姆式教程二》设置https

《基于mpvue的微信小程序全栈保姆式教程二》 XCDHBook

注意这个时候还不能真机预览，你点击了预览按钮会生成一个二维码，扫描后并不能看到数据，因为手机无法找到电脑localhost的数据。接下来让小程序在开发环境跑起来，可以真机预览一下

开通开发环境，进行真机预览

https://mp.weixin.qq.com/wxopen/thirdtools?action=index&token=406389460&lang=zh_CN 选择开通腾讯云，进入后台开发环境

《基于mpvue的微信小程序全栈保姆式教程二》开通开发环境

《基于mpvue的微信小程序全栈保姆式教程二》后台管理

https://console.qcloud.com/lav2/dev，可以看到腾讯为你准备了一套的配套措施，其实就是上篇文章咱们配置的服务器。把二级域名复制粘贴一下，修改配置文件即可。

《基于mpvue的微信小程序全栈保姆式教程二》开发环境

先把数据库导入到开发环境点击phpMyAdmin按钮，账户是root，密码是你的appid,里面已经存在数据库cAuth，我们只要把我们的表导进去即可，如果导入过程中出现错误，也不怕，我们直接打开cAuth.sql，把里面的sql语句复制粘贴出来，然后点击SQL按钮，直接运行sql进行建表，然后插入数据即可。

《基于mpvue的微信小程序全栈保姆式教程二》导入mysql

《基于mpvue的微信小程序全栈保姆式教程二》运行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

上传代码到腾讯云开发环境，第一次上传采用模块上传，以后采用智能上传

《基于mpvue的微信小程序全栈保姆式教程二》上传开发环境代码

《基于mpvue的微信小程序全栈保姆式教程二》第一次上传

这个时候再进行编译，预览即可手机查看了。

开通生产环境，让小伙伴看一下

https://console.qcloud.com/lav2/production 选择nodejs环境即可，选择11块钱的.xyz域名，选择49块的服务器。支付60后，腾讯会帮你自动部署环境，安装依赖。和开哦听开发环境一样，把数据库导入进去，可以修改数据库的密码好记一点，比如修改成qwerabc。

《基于mpvue的微信小程序全栈保姆式教程二》修改数据库密码

开通后修改一下配置，主要是把/XCDHBook/src/config.js host换成你的生产环境的域名，修改/XCDHBook/service/config.js 里面把数据库密码修改成你的qwerabc，自己刚刚设定的密码。然后点击腾讯云上传正式代码，按照提示填写版本号和备注。

《基于mpvue的微信小程序全栈保姆式教程二》上传正式代码

然后回到
https://console.qcloud.com/lav2/production生产环境，点击代码部署等候一会即可。这个时候就可以关闭本地服务器cmd了，因为用的是生产环境的数据库了。

然后点击编译，预览即可。如果想让小伙伴也看到你需要添加小伙伴为体验者

《基于mpvue的微信小程序全栈保姆式教程二》添加小伙伴

接下来就是正式上线，点击微信小程序的上传按钮，然后登录小程序管理后台，提交审核即可，前提是你的域名要备案成功，不然无法提交。

《基于mpvue的微信小程序全栈保姆式教程二》上传

《基于mpvue的微信小程序全栈保姆式教程二》审核

部署后台到自己搭建的服务器

如果你没有搭建服务器这一节可以跳过了，上一篇文章搭建了服务器，接下来我们要把代码部署到上面去。首先要修改/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编写的，和视频里面稍微有点不一样，主要是我感觉缩进很好看。具体的代码编写可以查看视频跟着学习。

    原文作者：星辰大海__xcdh
    原文地址: https://www.jianshu.com/p/b6ec2a6aa359
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。