背景
由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的、更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢?
1、现在微信小程序比较好,用户也比较多;利用微信小程序做推广,效果好;
2、小程序的痛点在于不需要在手机里额外安装app,利用微信提供的入口,用时扫码,用后清除;
3、开发周期与开发难度小于原生app。
技术栈
采用前后端分离
1、Vue全家桶
2、mpvue
3、koa2+mysql
构建过程
1、安装工作
a)安装好node
b)安装vue-cli
c)安装mysql
2、前端构建
# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
3、后端构建
a)腾讯云的配置
腾讯云支持
b)本地导入node代码
wafer2-startup,将其中的server文件夹放到项目目录下。
配置server——config.js
const CONF = {
// 其他配置 ...
serverHost: ‘localhost‘,
tunnelServerUrl: ‘‘,
tunnelSignatureKey: ‘27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89‘,
// 腾讯云相关配置可以查看云 API 秘钥控制台:https://console.cloud.tencent.com/capi
qcloudAppId: ‘您的腾讯云 AppID‘,//[账户信息](https://console.qcloud.com/developer)
qcloudSecretId: ‘您的腾讯云 SecretId‘,//[获取地址](https://console.qcloud.com/cam/capi)
qcloudSecretKey: ‘您的腾讯云 SecretKey‘,//[获取地址](https://console.qcloud.com/cam/capi)
wxMessageToken: ‘weixinmsgtoken‘,
networkTimeout: 30000
}
4、test
/routes/index.js
//注册demo路由
router.get(‘/demo‘, controllers.demo)
/controllers/demo.js
module.exports = async (ctx)=>{
ctx.state.data = {
msg: ‘hello, 小程序后台‘
}
}
5、本地环境搭建
a)在命令行执行新建默认名为cAuth的数据库
b)npm install -g nodemon
c)进入server目录,开启server
6、打开微信开发工具,新建并导入项目
项目目录
7、test结果
本地运行
git clone
npm install
npm run dev