MpVue小程序

使用mpVue框架搭建小程序项目

1、安装Vue-cli项目

创建一个空文件夹
```
D:\project\vue-blog
```

创建一个基于mpvue模板的vue应用程序

#这里的 myvue 是项目名，可以根据自己的需求起名
vue init mpvue/mpvue-quickstart vue-blog

然后一直选择no

初始化并运行

cd myvue #进入项目路径
npm install    #安装环境
npm run dev #启动项目

2、使用微信开发工具开发项目

这个工具只是用于展示小程序效果，以及控制台的输出

3、使用IDEA打开项目

我们只需要在IDEA中进行开发即可

修改app.json
删除dist文件夹，这个是自动生成的
然后从终端重新启动我们的项目
```
npm run dev
```
启动之后就会重新生成一个dist文件夹
打开src/pages/index/index.vue文件，将内容进行清理，这里就是显示在小程序的主页内容

修改完之后，vue会进行热部署

然后就可以随意开发了！

4、安装sass插件

sass语法跟css相同，只是sass可以进行嵌套编写

安装

npm install sass-loader node-sass --save-dev

如果报错，需要降低sass的版本

在package.json中进行修改，将版本改为7.3.1
重新安装插件即可

5、创建新页面

需要在pages目录下创建新的页面文件

流程如下

创建新页面me

配置基本内容

main.js

import Vue from 'vue'
import App from './me'

// add this to handle exception
Vue.config.errorHandler = function (err) { 
  if (console && console.error) { 
    console.error(err)
  } 
} 

const app = new Vue(App)
app.$mount()

me.vue

在app.json中配置新的页面js

{ 
  "pages": [
    "pages/index/main",
    "pages/me/main"
  ],
  "window": { 
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "晓江",
    "navigationBarTextStyle": "black"
  } 
}

6、ES6语法

ES6是JavaScript的一个版本，我们经常使用的是JavaScript的ES5版本，ES6 在其基础上添加了许多新的语法特性

mpvue框架默认使用的ES6语法

ES6文档：https://www.runoob.com/w3cnote/es6-concise-tutorial.html

基本语法：

let用来声明变量，允许创建块级作用域，代替了ES5中的var
const用来声明常量，不可以被修改
拼接字符串

可以直接在${ }里面写变量，用反引号 ` 包裹字符串。代替用加号拼接字符串

数组的批量赋值

let arr = [1,2] 
let [a,b] = arr 
console.log("a的值为:",a) 
console.log("b的值为:",b)

模块化

模块功能主要由两个命令构成：export和import。

export命令用于规定模块的对外接口

import命令用于引用其他模块提供的功能
Promise异步执行 ，一个 Promise 是一个等待被异步执行的对象。当它执行成功，状态会变成resolved；执行失败状态会变成rejected

resolved状态说明是正常执行返回的信息，rejected状态相当于抛出错误信息，会被try…catch…捕捉到
async就是异步的意思，会作为一个关键字放到函数前面，用来表示函数是一个异步函数
await是等待的意思，后面常放一个promise对象。await关键字只可以放

到async函数里面

7、搭建后端开发环境

下载server文件夹，打开腾讯云网站，下载nodejs对应的文件
解压之后，复制server文件夹到我们的项目目录下就行了

打开config.js文件，在第二行添加上如下小程序的配置代码，注意修改账号信息

  // 小程序的配置
  serverHost: 'localhost',
  tunnelServerUrl: '',
  tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
  // 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
  qcloudAppId: '您的腾讯云 AppID',
  qcloudSecretId: '您的腾讯云 SecretId',
  qcloudSecretKey: '您的腾讯云 SecretKey',
  wxMessageToken: 'weixinmsgtoken',
  networkTimeout: 30000,

打开控制台链接：https://console.cloud.tencent.com/capi
点击创建新密钥
然后复制、填写信息即可

8、连接MySQL数据库

创建小程序数据库cAuth
然后在server目录下的config.js中配置mysql数据库信息，记得关闭腾讯云的代理
使用终端进入server目录，安装后端的各种依赖
```
cd server
npm install
```
安装全局的依赖
```
npm install -g nodemon 
```

初始化数据库

node tools/initdb.js

报了一个错误！

UnhandledPromiseRejectionWarning: Error: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol request
ed by server; consider upgrading MySQL client

解决方法：(注意修改密码)

mysql -uroot -p
# 这里需要输入密码
use cAuth

alter user 'root'@'localhost' identified with mysql_native_password by '1234'; 

flush privileges;

# 退出使用MySQL
exit

# 重新安装
node tools/initdb.js

注意必须是在server目录下执行的，现在OK了！

查看数据库，现在已经自动生成csessioninfo数据表了！

如果你不想这么简单的查数据库的话，可以执行下面的指令

mysql -uroot -p
# 输出密码

# 查看所有数据库
show databases;

# 选中数据
use cAuth;

# 查看数据表，指令记得加分号
show tables;

# 退出
exit

启动项目
```
npm run dev
```
哇，为什么变得这么酷炫了（原来这是后端的启动）
访问测试
```
http://localhost:5757/
```
看到这个信息就说明测试成功了！

9、获取用户信息

虽然小程序有自带的获取用户信息的方法UserInfo，但是这样是获取不到openid这样的敏感信息的

wafer2-client-sdk应用文档：https://github.com/tencentyun/wafer2-client-sdk

安装SDK插件，同样是在项目目录下执行
```
npm install --save wafer2-client-sdk
```
在前端添加一个按钮

配置config.js文件

const host = "http://localhost:5757"

const config = { 
    host,
    loginUrl:`${ host} /weapp/login`
} 

export default config

导入接口，配置登录方法

import config from "@/config"
import qcloud from "wafer2-client-sdk"
export default { 
  data() { 
    return { 
      mark: 0
    } 
  } ,
  methods:{ 
    test(){ 
      console.log("测试方法")
    } ,
    login(){ 
      qcloud.setLoginUrl(config.loginUrl);
      qcloud.login({ 
        success: userInfo =>{ 
          console.log("登陆成功", userInfo);;
          this.loginSuccess(userInfo);
        } ,
        fail: err => { 
          console.log("登陆失败", err);
        } 
      } );
    } ,
    loginSuccess(userInfo){ 
      // 将用户信息保存到微信缓存中
      wx.setStorageSync('userInfo', userInfo);
    } 
  } 
}