用mpvue构建微信小程序

Posted 2020-11-14 Zenquan的技术博客

背景

由于机器人协会进行鼓励大家多读书的活动，所以为了可以更好的、更有效果，所以我跟会长提了一个建议，做一个微信小程序，那么为什么是微信小程序呢？
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