【微信小程序】mpvue+koa2 框架搭建本地开发环境

 

 

为了方便开发，在本地搭建开发环境

一、搭建mpvue环境

1.首先获取小程序AppId

AppId可去往微信公众平台获取，在设置一栏的开发设置下

2.初始化mpvue

该步骤需要实现安装过nodejs，与vue，具体安装步骤见vuejs的三个安装方法

进入到项目目录后输入

vue init mpvue/mpvue-quickstart

然后根据提示逐步输入信息

project name 即项目名称

wxmp appid 即微信小程序appid，从微信公众平台中获得。

剩下的选项直接敲回车键即可。

 

 

3.安装依赖

在项目目录下 输入

npm install

  Bug：在进行这一步的时候出现了一个问题，错误提示如下：

于是我开始使用管理身份运行cmd，继续install，但仍然出现同样的错误，这时候使用

npm cache clean --force

清楚完npm的缓存后发现运行正常了，等待一段时间后得到如下结果

安装依赖完成，这一步在项目文件夹下下载了node_modules文件夹

4.使用微信小程序web开发工具打开项目

 

打开后即可看到mpvue的demo实例小程序

到这里说明mpvue弄好了。

 

二、搭建本地开发环境

 

1.下载demo

地址：https://console.qcloud.com/lav2/dev

下载完成后将里面的server文件夹复制到项目的根目录下。

2.建立数据库

使用mysql数据库

• 打开cmd窗口，cd到mysql的安装路径

cd C:\Program Files\MySQL\MySQL Server 5.7\bin

• 登录mysql数据库

mysql -u root -p

输入密码后进入数据库

• 建立数据库

create database CAuth;

建立名为CAuth的数据库，由于在server/config.js中已经配置好数据库，所以命名数据库为CAuth，若想用其他名字，也需要在config.js中对应修改，config.js文件中mysql的配置如下：
 

  /**
   * MySQL 配置，用来存储 session 和用户信息
   * 若使用了腾讯云微信小程序解决方案
   * 开发环境下，MySQL 的初始密码为您的微信小程序 appid
   */
  mysql: {
    host: 'localhost',
    port: 3306,
    user: 'root',
    db: 'cAuth',
    pass: '你数据库的密码',
    char: 'utf8mb4'
  },

注意要对应修改pass，否则初始化数据库时会无法登录。

 

3.配置config.js

在server/config.js中的CONF中添加如下代码：

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

修改以下三项，腾讯云相关配置可以查看云 API 秘钥控制台

4.初始化环境

• 首先安装依赖

# 切换到服务端代码目录
cd server

# 安装依赖
npm install

# 安装全局依赖
npm install -g nodemon

• 初始化数据库

node tools/initdb.js

5.测试本地环境是否搭建成功

1.首先可以在server/controllers目录下新建test.js文件内容如下：

module.exports = async (ctx) => {
  ctx.state.data={
    msg:'hello 小程序后台'
  }
}

2.然后在server/routes/index.js文件中添加一句

router.get('/test',controllers.test)

3.在cmd窗口中，cd到server文件夹下输入：

npm run dev

成功结果如下：

4.打开浏览器输入 http://localhost:5757/weapp/test

若看见下图

则说明配置成功。