首页手记想高效开发小程序，mpvue了解下（二）

想高效开发小程序，mpvue了解下（二）

标签：

前端工具 Vue.js 小程序

序言

上一节分享的内容呢，主要是围绕“小程序的现状”、“什么是mpvue？”、“搭建基础架构”等几个话题展开的。这一节呢，主要是以“小程序部署到腾讯云”为主题进行分享的。对于为啥要将小程序部署到腾讯云后台呢，以下是个人见解。一般项目在上线部署环境的时候需要多个流程，腾讯云会将上面一整套上线部署的标准打了个包，同时呢也提供了免费的开发环境，等到上线的时候买个域名+服务器就可以了。这就是我个人推荐使用腾讯云的原因。

腾讯后台搭建

那如何上传测试代码到腾讯云呢？接下来Eknow君会按照几个步骤来完成这个流程。

登录到腾讯云
由于要搭建腾讯云开发环境，首先就要进入腾讯云后台进行本地的配置。
【小程序后台】-【设置】-【开发者工具】-【腾讯云】

下载node.js Demo
找到开发环境中的下载测试代码，将其download下来，打开里面的文件夹，因为开发的小程序代码属于client端，所以只需要拿取server文件夹即可。
【下载node.js版本demo】-【wafer压缩包】-【server】
部署到mpvue初始化的项目
复制server文件夹到已经使用mpvue初始化的项目test根目录下，同时修改project.config.json的文件，将云端路径更改为本地的server路径。

"qcloudRoot":"./server",

开始上传
上面几个步骤也就配置完了，接下来就在微信开发者工具将代码上传到腾讯云后台，上传过程中需要注意的是将node_modules给去掉；同时按照模块上传，等待上传成功，整一套流程也就基本完成了。

本地开发环境的搭建

在开发者工具中，有一个不太友好的地方在于每次修改后台代码的时候都要上传代码到腾讯云，这会导致效率大大降低，因此可以考虑下搭建本地环境。当然腾讯云有着相关的开发文档，参照着官方文档可以很快地搭建好。下面Eknow君分享下搭建的过程。

配置config.js
既然要参考文档，我们便需要从【腾讯云】-【文档平台】-【微信小程序开发者工具】-【常见问题】-【node相关】入手，找到【本地如何搭建开发环境】这一小节，便可以进行相应地配置。找到之前部署到mpvue初始化的项目里【server】-【config.js】，将下面的代码对应粘贴进去。同时将端口改为5757。

const CONF = {
      // 其他配置 ...
    serverHost: 'localhost',
    tunnelServerUrl: '',
    tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
      // 腾讯云相关配置可以查看云 API 密钥控制台：https://console.cloud.tencent.com/capi
    qcloudAppId: '您的腾讯云 AppID',
    qcloudSecretId: '您的腾讯云 SecretId',
    qcloudSecretKey: '您的腾讯云 SecretKey',
    wxMessageToken: 'weixinmsgtoken',
    networkTimeout: 30000,
    port: '5757',
}

从上面的代码可以看出，qcloudAppId、qcloudSecretId、qcloudSecretKey三个属性需要自己配置。
2. 配置MySQL
配置完config.js之后呢，就是要初始化数据库环境了。在这里分为2步，
第一，启动数据库服务。在这里Eknow君推荐phpstudy，可以不用再手动安装Apache等，直接打开http://localhost/phpMyAdmin/,账号密码都是默认的root。按照模板创建cAuth数据库，同时在server里的config.js进行MySQL配置。
第二，打开cmd面板，安装依赖

cd server
npm install
//安装全局依赖，用来热启动，方便进行调试
npm install -g nodemon

同时初始化数据库

node tools/initdb.js

在这里需要注意一个地方，执行这个命令很有可能报MySQL错误。

Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

这句话的意思呢，是指表中出现多个timestamp并设置为current_timestamp，此时创建表失败。因此我们需要找到【server】-【tools】-【cAuth.sql】对create_time字段进行修改，

 `create_time` datetime NOT NULL COMMENT '创建时间',
  `last_visit_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

修改完后再执行一遍初始化数据库的命令，成功后查看下数据库信息。
最后，需要本地启动调试环境，启动debug模式。
3. 测试本地服务
最后，我们需要测试下本地的是否成功运行。首先，找到【server】-【controllers.js】-【创建demo.js】，暴露一个json信息。

 module.exports = ctx => {
   ctx.state.data={
     msg : 'Hello Mr.Eknow'
   }
}

打开浏览器，输入http://localhost:5757/weapp/demo
到此，整个小程序的本地开发环境便成功搭建起来了。有点小激动~
总结
通过上面的一系列操作后，小程序上传测试代码到腾讯云还有搭建腾讯云后台本地开发环境的方法已经分享完。老铁们也应该对mpvue的创建与腾讯云的搭建有了一定的了解，基石已经搭好，Eknow君在这里还是建议多敲敲代码，兴许能发现新的坑位等着来铺哟。

点击查看更多内容