一.简介

基于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

真自律