【微信小程序】mpvue+koa2 框架搭建本地开发环境
为了方便开发，在本地搭建开发环境
一、搭建mpvue环境
1.首先获取小程序AppId
AppId可去往微信公众平台获取，在设置一栏的开发设置下
2.初始化mpvue
该步骤需要实现安装过nodejs，与vue，具体安装步骤见vuejs的三个安装方法
进入到项目目录后输入
vue init mpvue/mpvue-quickstart然后根据提示逐步输入信息
project name 即项目名称
wxmp appid 即微信小程序appid，从微信公众平台中获得。
剩下的选项直接敲回车键即可。
3.安装依赖
在项目目录下 输入
npm installBug：在进行这一步的时候出现了一个问题，错误提示如下：
于是我开始使用管理身份运行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
若看见下图
则说明配置成功。