1、安装SDK插件
SDK插件用来获取用户的openId
SDK是server端（也就是后端）的插件，帮助我们很容易的获取openId。openId是微信中用户身份的唯一标识，我们通过openId来识别用户，方便后期的用户管理
~/WeChatProjects/truth_hold$ npm install --save wafer2-client-sdk //系统返回信息 + wafer2-client-sdk@2.1.0 added 1 package from 1 contributor and audited 10626 packages in 10.382s > wafer2-client-sdk应用文档 https://github.com/tencentyun/wafer2-client-sdk
2、添加授权登录按钮
编辑src/pages/index/index.vue文件的template部分，添加授权登录的按钮
登录按钮是小程序小程序集成的API，规定的登录按钮的写法
<!-- 参考代码，无需粘贴 <template> <div> —> <!-- 需要粘贴的部分 --> <button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">授权登录</button>
3、配置登录链接
编辑src/config.js文件，config.js文件我们用来放配置型的代码，用下面的代码替换掉原先的代码
登录链接为什么是http://localhost:5757/weapp/login，后面的课程会具体分析
//域名，通过域名来找到服务器，在这里我们将本地电脑当成服务器 //所以现在配置的域名是本地的，当项目实际上线，这里需要换成已备案的域名 const host = 'http://localhost:5757' const config = { host, loginUrl: `${host}/weapp/login` } //我们在【ES6知识点详解】中讲过export的意思是向外暴露接口 //这样在其他文件中可以通过import config from '@/config'引用 //然后通过config.loginUrl就能得到在本文件中配置的值'http://localhost:5757/weapp/login' export default config
4、删除测试代码
在第二章学习ES6时，我们在index.vue界面添加了一些代码，现在将这些测试代码删除，删除后
<script> export default { data () { return { mark:0 } }, methods: { addMark (add) { this.mark = this.mark + add console.log("mark为：",this.mark) } } } </script>
5、引用配置文件
在src/pages/index/index.vue文件中添加import引用SDK插件、config.js文件
//参考代码，无需粘贴 //<script> //需要粘贴的部分 import qcloud from 'wafer2-client-sdk' import config from '@/config' //参考代码，无需粘贴 //export default {
6、添加登录方法
编辑index.vue文件，在script的methods对象中添加方法loginSuccess和login
//参考代码，无需粘贴 //methods: { //addMark (add) { ... //}, //需要粘贴的部分 //登录成功会调用loginSuccess方法 loginSuccess (res) { //将用户信息保存到缓存中，wx.setStorageSync是小程序的一个API，用来将信息添加到缓存中 wx.setStorageSync('userinfo', res) }, login () { //wx.showToast是小程序的消息提示框 wx.showToast({ title: '登录中', icon: 'loading' }) //通过SDK插件，请求config.js中配置的loginUrl路径（http://localhost:5757/weapp/login） qcloud.setLoginUrl(config.loginUrl) qcloud.login({ success: res => { //登录成功后，显示底部导航栏 wx.showTabBar() console.log('登录成功', res) //调用loginSuccess方法，并将用户信息作为参数 this.loginSuccess(res) }, fail: err => { console.error('登录失败', err) } }) } //参考代码，无需粘贴 //},
7、授权本地域名
我们在src/config.js文件中定义的域名http://localhost:5757，不是一个真正的域名，只有在我们自己电脑上才有效
真正的域名如http://baidu.com是可以通过网络访问的
对于这种不合法的域名，在微信开发者工具中，需要授权一下
点击右上角>>图标，点击详情—本地设置，选中不校验合法域名，就可以了~
8、测试
（1）打开终端，进入项目目录，打开两个窗口同时运行npm run dev
第一个窗口，在项目目录下运行npm run dev用来启动前端代码
~/WeChatProjects/truth_hold$ npm run dev
第二个窗口，在server目录下运行npm run dev用来启动后端代码
~/WeChatProjects/truth_hold/server$ npm run dev
然后点击授权登录按钮，右侧控制台出现下列信息，说明登录成功了
控制台中出现的，就是登录接口获取到的当前登录用户的微信昵称、城市、openId等信息
（2）登录可能出现错误–登录失败 Error: 响应错误
解决方法：
完善server/config.js文件中的下列字段
qcloudAppId: '必填', qcloudSecretId: '必填', qcloudSecretKey: '必填', // 微信小程序 App ID appId: '必填', // 微信小程序 App Secret appSecret: '必填', // 是否使用腾讯云代理登录小程序，设置为false useQcloudLogin: false,
qcloudAppId、qcloudSecretId、qcloudSecretKey这三个参数，我们在上一节已经配置过了。
appId、appSecret这两个参数需要在微信公众平台（https://mp.weixin.qq.com/）登录小程序账号—开发—开发设置中查看。
useQcloudLogin参数改为false
9、查看数据库
登录mysql，可以看到cSessionInfo表中已经有一条客户信息了
我们主要会用到user_info字段，里面包含了openId、nickName等用户基本的信息
mysql> use cAuth; mysql> select * from cSessionInfo; | open_id | uuid | skey | create_time | last_visit_time | session_key | user_info +------------------------------+--------------------------------------+-------------------- | oqURH46cYrMV3IwrrflosChndRTI | 88d1f834-bd64-491e-9779-18f3653528cc | dcd4a49ed87a0f4ebdff0f40ee4a53ed5572aa01 | 2019-06-16 11:19:43 | 2019-06-16 20:13:53 | aZha8RCFtrY1mp98kj9hSg== | {"openId":"oqURH46cYrMV3IwrrflosChndRTI","nickName":"ww","gender":2,"language":"zh_CN","city":"Qingdao","province":"Shandong","country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ2Te6nOOqiaeiae0WCWxRHKedpM7ZOs8AIU6og0ia1WChutbiaaaibthT7GbrewG0licrkbps8XajcHXzQ/132","watermark":{"timestamp":1560687233,"appid":"wxd2a52ff3594d8d7d"}} | +------------------------------+--------------------------------------+-------------------- 1 row in set (0.00 sec)
