点击观看视频 ↓↓↓
课程文字版
1、安装SDK插件
SDK插件用来获取用户的openIdSDK是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>部分还剩下下面的代码,<template>、<style>部分暂时不需要改动
<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)
关注【猫宁一】公众号回复【课件】领取课程PPT和小程序源码微信小程序实战开发课程【提供源码】实际上线项目 mpvue+koa2_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
B站可以1.5倍加速观看视频课程