Mpvue开发小程序开发环境搭建过程

作者: microkof | 来源:发表于2019-01-07 17:11 被阅读31次

实验项目叫做神记事，英文名speed-note。就是一个记事本小程序。

安装

npm install --global vue-cli@2.9
vue init mpvue/mpvue-quickstart speed-note

其中wxmp appid来自于后台 - 开发设置 - AppID(小程序ID)。

其他设置全部保持默认即可。

cd my-project
npm install
npm run dev

执行之后，使用微信开发者工具选择D:/speed-note/，即可预览项目。

腾讯云

这时候微信开发者工具的右上角是没有“腾讯云”按钮的，需要去后台开通。

打开：后台 - 开发 - 开发者工具 - TGit权限管理，会提示你没有开通腾讯云。那么咱们就去开通。
接着会看到公众平台帐号授权，扫码授权。
接着会问你，要么开通独立的腾讯云账号，要么关联已有腾讯云账号。我选择开通独立账号。

之后进入腾讯云管理界面。

下载服务器端测试代码

在腾讯云管理界面，你会发现第三步是下载测试代码，可选择的有Nodejs版本和PHP版本，由于Nodejs版本更简单，所以我先下载了Nodejs版本。

你会发现文件名是wafer2-quickstart-nodejs...这样的，那么这个wafer2是什么？

wafer2官方网站：https://github.com/tencentyun/wafer2-quickstart

简单说，wafer2就是一套工具包，用户只需要开通，即可使用开发者工具上传、部署、调试小程序后端代码，无需了解服务器运维、数据库部署搭建即可使用。当然，如果你的小程序是纯前端程序，不需要后端交互，那么这个工具包可以不必安装。

这个包里面包含当前最流行的koa2框架，也就是类似于PHP语言的Laravel、ThinkPHP...等框架。显然，你也需要koa2的相关知识。

我个人对小程序是充满敬畏的，我不认为一个前端程序员需要把后端的工作全包了，如果一个前端程序员能包揽后端，达到所谓“全栈”，只能说明这个小程序一定不会是大型的、重要的项目。所以，当你在学习小程序开发阶段，只要对koa2有基本掌握即可，能做到数据库增删改查就差不多了，等你真正以开发小程序为职业的时候，后端程序员用什么语言就是他的事情，你只需要让他po给你接口即可。如果你真的打算全栈，而且更熟悉PHP语言，也无妨，以后再改。甚至说，如果你后端对Java最熟，那也可以，不过就只能脱离腾讯云了，需要用自己的服务器，因为腾讯云不提供Java环境。

wafer2部署教程：https://github.com/tencentyun/wafer2-quickstart-nodejs/blob/master/README.md

网上的相关文档很多，比如腾讯云 wafer2 上手，轻松部署小程序后端！

将server文件夹放到项目根目录

wafer2-quickstart-nodejs-master.zip这个文件我们只需要其中的server文件夹，因为client文件夹就是小程序前端，是我们要用mpvue去生成的，所以不用它的代码。

修改project.config.json，加入server文件夹路径

该文件在项目根目录，它第10行是"miniprogramRoot": "dist/wx/",，在下方追加1行代码，也就是指定server文件夹的路径：

"qcloudRoot": "./server/",

其实有一个细节，在设置这一步之前，你的开发者工具右上角始终是没有“腾讯云”按钮的，即使你去工具 - 工具栏管理 - 自定义工具管理去找，依然是找不到“腾讯云”按钮，因为你没有设置server目录，开发者工具认为你的小程序不需要后端。直到设置了server路径，才会出现“腾讯云”按钮。现在勾上它。（如果还没有，重启工具就应该能找到。）

image.png

选择线上开发环境

点击工具右上角的“腾讯云”按钮，会让你选择Nodejs环境或是PHP环境，我们选Nodejs环境。

重新点击腾讯云按钮，可以看到下拉菜单，我们目前用不到这些功能，因为下一步我们搭建本地的开发环境。

继续部署本地Node.js Demo

先细读官方说明微信小程序开发者工具自行部署 Node.js Demo，查看《上传 Demo 和启动》一节的内容。

具体说，将

    // 其他配置 ...
    serverHost: 'localhost',
    tunnelServerUrl: 'http://tunnel.ws.qcloud.la',
    tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
      // 腾讯云相关配置可以查看云 API 密钥控制台：https://console.cloud.tencent.com/capi
    qcloudAppId: '你的腾讯云 AppID',
    qcloudSecretId: '你的腾讯云 SecretId',
    qcloudSecretKey: '你的腾讯云 SecretKey',
    wxMessageToken: 'weixinmsgtoken',
    networkTimeout: 30000

贴到server/config.js里面。其中tunnel相关的跳过，qcloud相关的如实填写。

qcloudAppId来自于腾讯云后台右上角菜单的“账号信息”。

qcloudSecretId和qcloudSecretKey来自于腾讯云后台右上角菜单的“访问管理”，然后点击左侧“API秘钥管理”，如果没有秘钥，则“新建秘钥”。然后从中复制即可，其中“qcloudSecretKey”需要先填手机验证码。

然后，在server目录执行npm install，安装相关依赖。

部署本地MySQL

准备MySQL：这一步很简单，相信任何程序员本机至少都有一个XAMPP之类的集成环境，直接用即可。
配置server/config.js：接着，我们修改server/config.js内容，设置相关参数。注意，要在数据库中创建一个cAuth库，编码为utf8mb4，通常用phpmyadmin创建即可。这个数据库用于存放登录认证相关的数据。可以改名。
在server目录执行命令行node tools/initdb.js，为了给cAuth库创建一个叫csessioninfo的表。

这里注意，如果你在第3步遇到关于CURRENT_TIMESTAMP的报错，这个问题跟MySQL版本过低有关，解决办法：要么升级你的集成环境，要么另装一个集成开发环境。

我个人选择另装一个环境，比如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/即可
当然，server/config.js里面的MySQL端口也改成33060

此时重新操作第2、3步，即可成功导入sql文件。

测试本地Nodejs服务器环境

构建demo API

构建过程很简单，两步：

一、新建一个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构建完毕。

访问demo接口

在server目录敲入node app，启动http服务。

浏览器访问http://localhost:5757/weapp/demo，页面显示：

{"code":0,"data":{"msg":"Hello 小程序！"}}

测试成功。

安装nodemon来监控文件修改，随时自动重启http服务

nodemon在nodejs界如雷贯耳，它的作用是监控文件修改，随时帮你重启你的服务。

npm install -g nodemon

这样就装好了，不用做任何配置。

今后启动服务就不再是node app，而是nodemon app。

这之后，你每天需要开2个命令行窗口，一个用于执行npm run dev，负责前端开发，另一个去server目录用于执行nodemon app，负责启动http服务。

不校验合法域名

我们本地环境的域名是http://localhost:5757，这显然不是腾讯眼中的合法域名，所以，需要到开发者工具右上角的“详情”中勾上“不校检合法域名...”。

安装wafer2-client-sdk

官网：https://github.com/tencentyun/wafer2-client-sdk

这又是什么东西呢，它中文名叫“微信小程序客户端腾讯云增强 SDK”，说白了就是增强会话能力的一个工具包。在项目根目录安装它：

npm install wafer2-client-sdk --save

使用方法：

在项目根目录的App.vue中加入：

import qcloud from 'wafer2-client-sdk'

然后看一下官方文档。文档说，从2018年上半年开始，微信登录授权必须手动触发，并且给了范例代码。所以我们代码大致是：

<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>

这里注意，官方文档是bindgetuserinfo="doLogin"，我们在mpvue当然要改成@getuserinfo="doLogin"。

然后添加一个方法：

  methods: {
    doLogin: function () {
      qcloud.setLoginUrl(config.loginUrl)

      const session = qcloud.Session.get()

      if (session) {
        // 第二次登录
        // 或者本地已经有登录态
        // 可使用本函数更新登录态
        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)
          }
        })
      }
    }
  }

上方代码也是修改自官网提供的范例，注意两点：

config.loginUrl需要先定义一个配置项，其实它就是http://localhost:5757/weapp/login。
我注释掉了一部分，因为需要先写一些工具类，而我们现在并没有写。

测试过程：从开发者工具中点击button，然后观察控制台，等几秒就会打印出自己的用户信息。

安装scss支持

默认情况下，mpvue没有安装scss相关依赖，所以我们手动安装一下：

npm install node-sass sass-loader --save-dev