一.简介
基于mpvue+koa2+mysql等开发的一款督促自身的小程序。
二.准备
1.小程序账号注册
微信公众平台 注册账号
2.开发者工具下载
微信开发者工具 下载对应的版本
安装好微信开发相关工具之后，还需安装vscode(链接: vscode官网) ，本项目基于vscode和微信开发者工具开发。
三.搭建开发环境
本项目是基于mpvue开发的。
1.安装node环境(相当于造房子搭的地基)
2.安装vue-cli脚手架
命令： npm install -g vue-cli
3.创建mpvue项目
命令: vue init mpvue/mpvue-quickstart truth_hold
注：使用mpvue要先掌握vue知识哦！vue官网
4.koa2路由
Koa是一个后端框架。
路由管理就是接收不同的api请求，找到相应处理的文件，查到或者修改数据，返回处理的信息。
koa路由，统一在server/routes/index.js文件下管理。
四.项目开发
1.项目简介
1.首先打开项目后，配置相关的window和tabBar
2.删除dist文件夹(删不掉的话，只需删除 dist/wx/pages 文件夹即可。
3.在终端输入 npm run dev 启动项目。(这时会重新出现dist文件夹)
2.前后端介绍
本项目中，src文件夹是前端部分，server文件夹是后端部分。
前端： 点击授权登陆，请求后端服务器
后端：a.获取到用户信息保存到数据库中
b.从数据库中得到用户信息后，返回数据到前端
3.搭建后端服务器
将自己本地搭建成服务器，运行小程序。
1.点击腾讯云-开通开发环境，直接点第3步，点击第一个下载Node.js版本demo,下载完成后复制其中的server文件夹到我们的项目中。
2.打开server文件夹下的config.js配置相关信息
serverHost: 'localhost', tunnelServerUrl: '',
tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89', // 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
qcloudAppId: '腾讯云AppId',
qcloudSecretId: '腾讯云ScretId,
qcloudSecretKey: '腾讯云ScretKey ',
wxMessageToken: 'weixinmsgtoken',
3.数据库mysql
1) 创建一个小程序专属数据库cAuth
create database cAuth;
注意：这时cAuth数据库中，就有一个cSessionInfo表，用于存储信息
2) 在server文件夹中的config.js下配置mysql相关配置
4.安装依赖
所有配置都配置好之后，在server目录下执行命令 npm install 安装所有依赖
5.初始化数据库
在server 文件下，执行 node tools/initdb.js
这时再 npm run dev 即可
4.获取用户信息
注意：小程序自身有获取用户信息的方法，是 wx.getUserInfo,但是它获取不到openid（用户身份的唯一标识）。
所以我们使用腾讯提供的sdk插件获取用户信息。
插件应用文档：wafer2-client-sdk应用文档
安装wafer2-client-sdk插件： npm install --save wafer2-client-sdk
五.相关代码
1.授权登陆页面
用户首次登陆小程序，会弹出一个授权登陆页面(见六)，点击授权登陆即可进入小程序。
用户再次登陆，不会弹出授权登陆弹窗。
用户首次登陆小程序，会获得用户的所有信息存入userInfo中，并将userInfo存入缓存中，再次进入会判断是否登陆过(查看storage中有没有userInfo)
import config from '@/config'
// 引入腾讯云的sdk插件
import qcloud from 'wafer2-client-sdk'
import {showSuccess} from '@/util'
export default {
methods: {
login (){
// 'https://199447.qcloud.la/login'
qcloud.setLoginUrl( config.loginUrl )
qcloud.login({
success: (userInfo) => {
console.log('登录成功', userInfo)
this.loginSuccess(userInfo)
// 把false 和 用户信息userInfo传递给组件index.vue，实现点击授权登录按钮，让登陆弹窗消失，控制登陆弹窗的showLogin在父组件index.vue中
this.$emit('changeShow',false, userInfo)
// 登陆成功后，显示TabBar
wx.showTabBar()
showSuccess("登陆成功")
},
fail: (err) => {
console.log('登录失败', err)
}
})
},
loginSuccess( userInfo ){
// 登陆成功后，将用户信息保存到微信的缓存中
wx.setStorageSync('userinfo', userInfo)
}
2.数据库和数据表
1.opinions表
当用户填写完意见反馈页面的内容时，点击提交按钮，提交反馈页面的内容全部存储到opinions表中，所以我们需要建立一个opinions表
DROP TABLE IF EXISTS `opinions`;-- 我的中的意见反馈表CREATE TABLE `opinions` ( `id` int(11) NOT NULL AUTO_INCREMENT, `openid` varchar(100) NOT NULL, `opinion` text NOT NULL, `src` text NOT NULL, `wechat` varchar(20) DEFAULT NULL, `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
3.前后端运行过程
以意见反馈页面为例：
填写完意见反馈页面的内容后，点击提交按钮，要将意见反馈页面的内容传到后台，提交到对应的表(opinions)中
点击按钮后，会通过对应的url访问后端(/weapp/createopinion' ),通过http://localhost:5757找到本地的服务器的地址，然后找到server/routes/index.js
在server/routes/index.js 中找到处理意见反馈的路由router.post('/createopinion', controllers.createopinion)
再然后找到controllers文件夹下的createOpinion.js文件，在其中处理从前端传递到后端的数据，并在其中将数据传入到数据库对应的表中
补充：
1.mounted和onShow的区别
mounted 在页面加载完之后执行一次，之后就不再执行了
如：获取用户信息，只需要在页面加载完成后加载一次就可以了
onShow 每次切换页面，都会再次执行
2.Koa路由
koa是一个后端框架
路由管理就是接收不同的api请求,找到相应处理的文件，查到或修改数据，返回路由的信息
六.最终项目
1.项目部分截图
授权登陆.png
