1、创建组件
在src/components文件夹下面创建一个LoginWindow.vue文件
写入vue基础代码
<template> <div> 登录弹窗组件 </div> </template> <script> export default { } </script> <style lang='scss'> </style>
2、添加样式代码
将index.vue文件中上一节课添加的样式代码，剪切到我们刚刚创建的LoginWindow.vue文件中。注意是剪切哦~
剪切到LoginWindow.vue文件中的标签中
.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { box-sizing: border-box; width: 560rpx; overflow: hidden; position: fixed; top: 30%; left: 0; z-index: 9999; background: #fff; margin: -150rpx 95rpx; border-radius: 16rpx; } .modal-content { box-sizing: border-box; display: flex; padding: 0rpx 53rpx 50rpx 53rpx; font-size: 32rpx; align-items: center; justify-content: center; flex-direction: column; } .content-tip { text-align: center; font-size: 36rpx; color: #333333; } .content-text { height:130px; padding:10px 0px 50px 0px; font-size:14px; } .modal-footer { box-sizing: border-box; display: flex; flex-direction: row; border-top: 1px solid #e5e5e5; font-size: 16px; font-weight:bold; height: 45px; line-height: 45px; text-align: center; background:#feb600; } button { width: 100%; background:#feb600; color:#FFFFFF; font-weight:bold; } .img { width: 280px; height:90px; } .little-tip { padding-top:15px; padding-bottom:3px; font-size: 14px; font-weight:bold; color: #feb600; } .little-content { padding-top:5px; font-size: 13px; color:#606060; } .key-bold { padding-top:5px; font-size: 14px; font-weight:bold; }
3、编辑script部分
（1）在LoginWindow.vue文件中标签内添加methods对象，并将index.vue文件中的登录方法剪切到methods对象中
//参考代码，无需粘贴 //<script> //export default { //methods: { //需要剪切粘贴的部分，从index.vue剪切到LoginWindow.vue文件 loginSuccess (res) { //将用户信息保存到缓存中，wx.setStorageSync是小程序的一个API，用来将信息添加到缓存中 wx.setStorageSync('userinfo', res) }, login () { //wx.showToast是小程序的消息提示框API 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) } }) } //参考代码，无需粘贴 //} //} //</script>
（2）import引用语句
将import引用SDK插件、config.js语句剪切到LoginWindow.vue文件中
//参考代码，无需粘贴 //<script> //需要粘贴的部分 import qcloud from 'wafer2-client-sdk' import config from '@/config'
4、编辑template部分
将登录弹窗部分的页面代码也剪切到LoginWindow.vue文件中
<!-- 参考代码，无需粘贴 <template> <div> --> <!--需要剪切粘贴的部分--> <div class="modal-mask"> </div> <div class="modal-dialog"> <div class="modal-content"> <img class="img" src="/static/images/littleTip-huang.jpg"> <div class="content-text"> <p class="key-bold">真自律是一款自律神器。</p> <p class="key-bold">将生活想象成通关打怪，打败自己的心魔加分，被心魔打败减分。</p> <p class="little-tip">举个例子：</p> <p class="little-content"> 午饭忍住没有吃麻辣烫，吃的绿色蔬菜，加5分； </p> <p class="little-content"> 但是晚饭还是没有忍住T_T，罪恶罪恶，减10分。 </p> </div> </div> <div class="modal-footer"> <!-- 小程序集成的API，通过button来授权登录 --> <button open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">授权登录</button> </div> </div> <!-- 参考代码，无需粘贴 </div> </template> -->
5、编辑index.vue文件
（1）在index.vue文件中关联组件
通过import引入组件，并添加components对象声明组件
//参考代码，无需粘贴 //<script> //需要粘贴的部分，通过import引入组件 import LoginWindow from '@/components/LoginWindow' //参考代码，无需粘贴 //export default { //需要粘贴的部分，添加components对象声明组件 components: { LoginWindow },
（2）编辑template部分，添加以组件命名的HTML元素
<!-- 参考代码，无需粘贴 <template> <div> —> <!-- 需要粘贴的部分 --> <LoginWindow></LoginWindow> <!-- 参考代码，无需粘贴 <div class="show"> -->
6、查看效果
在终端启动项目，微信开发者工具会出现与上一节一样的效果
