- 简单说一下微信扫码登录的业务逻辑
- 首先，微信用户向第三方应用发送登录请求，第三方应用就会去向微信开放平台请求一个微信二维码的登录授权。接着，微信开放平台就会向用户发出请求确认，当用户点击确认允许的时候，就会告知微信开放平台。此时，微信开放平台就会让页面重定向到第三方指定链接，并会在重定向url上带一个临时票据code。
- 前端开发将code传给后端处理，后端开发传递状态码指示前端人员后续的操作，积分商城有3种情况，分别是0（表示之前绑定过手机号），400（表示二维码失效，及code失效，例如之前扫过该二维码，过期等），407（表示第一次访问积分商城，微信还没和手机账号进行绑定）。
- 如果状态码是0的话
- 提示成功
- 本地存储token【后端利用code去向微信开放平台拿的】
- 更新登录状态
- 清除地址栏code
- 如果状态码是400的话
- 提示用户二维码已经失效
- 打开登录模态框 - 引导用户再重新扫码
- 如果状态码是407的话
- 提示用户再进行一次手机号登录 -- 关联微信
- 打开登录模态框 - 引导用户登录
- 先存储uuid
- 清除地址栏code
- 如果状态码是0的话
- 去到Login.vue中继续进行关联操作
- 根据本地是否有uuid
- 有，调用BindWXAPI({手机号，验证码，uuid}) 绑定成功后 返回code0，并且把uuid删除了
- 无，调用PhoneReginAPI(普通登录请求),绑定成功后 返回code0
- 登录返回code0 表示登录成功
- 提示登录成功
- 本地存储token ，后续需要用到
- 自动关闭掉登录模态框
- topbar中登录按钮要变成购物车按钮。(登录状态)
- 把uuid删除了【已无用】
- 根据本地是否有uuid
- 这是一个PC端大型企业电商项目，采用了Vue2.6全家桶技术栈实现的，包含了vue-cli、vuerouter、vuex、axios等，主要有注册登录、商品管理、分类、购物车、个人中心等模块。
- 该项目使用了axios进行数据请求，为了方便组件使用，对axios进行了封装。
- 为了统一设置请求的路径，设置baseUrl来统一接口服务器地址
- 为了统一处理发送请求时，需要携带一些公共参数（如token)，添加请求拦截器
- 为了统一处理服务器响应回的数据，需要对数据进行二次处理（如响应拦截器
- 为了统一管理接口地址，新建api.js来封装请求地址
- 有使用，async+await是一个用同步思维解决异步问题的方案，有效避免回调地狱。
- async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。
- await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。
- await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；
- 如果不是Promise对象：把这个非promise的东西当做await表达式的结果。
- 先验证手机号格式是否正确
- 再验证滑动板块是否验证成功【插件实现】
- 官方文档
- 下载插件 npm i xxxxx
- 引入插件 main.js
- 使用组件（官网案例）
- 修改的参数，更新样式 。 /deep/
- 以上都正确就请假axios发送验证码请求,发送请求成功后,开始60秒倒计时，禁用按钮
- 获取验证码后点击登录按钮，对用户输入的验证码和后台发送过来的信息比对是否一致，一致则登录成功
- 参考上文
- 渲染微信扫码的步骤：
- 在public文件里面的index.html引入微信官方文件
- Login.vue组件里面，加id="weixin"的容器, 并new一下第一步导入的对象（复制官网代码）
- 修改二维码默认样式，需要通过工具包data-url.js文件，将css文件转换base64格式，粘贴到官方提供微信组件里面的 href属性中
背景：项目中多处使用alert提示，就很有必要
- ranction标签实现淡入淡出的动画效果。
具体操作参考以下笔记：
1. 项目中在App.vue中引入Toast.vue 2. 复制基本样式结构 3. 引入字体样式 （public.less) [打开页面检查是否正常显示Toast组件] 控制提示框显示和隐藏 v-show="是否显示提示框" 多个组件都可能会修改 是否显示提示框 ，隐藏将是否显示提示框 变量存储到vuex中。 4. 去vuex中添加showToast ，新增 isShowToast （回忆三个步骤） 5.App.vue中获取vuex中变量isShowToast mapState({组件内的属性名:state=>state.模块名.属性名}) 6.拿Login.vue测试，显示出提示框，自动隐藏 调用 changeIsShowToast 方法 显示 改为true ， 隐藏就是false [测试能够弹出提示信息以及自动关闭提示信息] 需求：不同的地方调用时提示不同的信息。显示不同的提示图标 1. 将需要变化的数据存放在vuex中 提示信息 toastMsg 提示信息 toastType: success,danger,warning 2. Toast.vue中获取vuex中数据。 根据toastType 动态绑定样式。 3. Login.vue中传递msg和type this.changeIsShowToast({ isshow:true, msg:'请输入正确的手机号码', type:'danger' }); [检查提示框组件内容，可以根据vuex中数据显示不同的信息] 需求：优化在显示提示框方法中自动关闭提示框 1. actions里增加方法 方法内调用mutations显示提示框，2s后又调用mutations关闭提示框 2. Login组件中，删除之前的changeIsShowToast方法的调用 改为直接调用actions内的方法