一、需求说明
设计一个公共组件 checkUser，文件路径为：/components/checkUser/check
目前小程序中，有几处操作都需要用户已登录且实名，而这几处的校验用户代码大部分是重复的。希望将这部分代码抽离成一个项目级公共组件，每次使用时直接引用即可。
具体业务如下：
- 在做某些操作时先判断是否授权，若无，则弹框提示授权
- 若已授权，则判断是否注册，若无，则弹框指引注册
- 若已注册，则判断是否实名，若无，则弹框指引实名
- 若以上全部完成，则进行下一步处理（不同地方的下一步处理不同）
二、需求实现
2.1 组件内包含什么？
- 包含自定义的授权弹框，及样式
- 包含从判断授权、注册、实名的一系列处理
2.2 组件的输入是什么？
- 组件内部需要有一个 start 函数，从父组件调用这个函数，就开始走组件内的所有逻辑
- 根据业务场景的不同，有时需要在打开某个页面时校验，有时需要在点击某个按钮时校验
- 为子组件设置 id，在父组件中通过 id 找到子组件，并调用其 start 函数 示例代码如下：
子组件代码：
start() {
// 检验用户代码
}
父组件代码：
{
"usingComponents": {
"checkUser": "/components/checkUser/check"
}
}
<checkUser id="checkUser"></checkUser>
// 打开页面校验
onShow: function () {
this.selectComponent('#checkUser').start()
},
// 点击某个按钮校验
handleClick() {
this.selectComponent('#checkUser').start()
}
2.3 组件的输出是什么？
- 不同业务场景下，检查用户成功后需要处理的逻辑不同
- 所以当子组件内处理成功后，抛出一个自定义事件
- 父组件为这个自定义事件绑定处理函数，做下一步处理 示例代码如下：
子组件代码：
start() {
// 检验用户成功
let params
this.triggerEvent('success', params);
}
父组件代码：
<checkUser id="checkUser" bind:success="checkUserSuccess"></checkUser>
checkUserSuccess(params) {
// 处理成功后的逻辑
console.log(params.detail) // 子组件传递的参数
}
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。
目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里
如文章有错误或表述不清晰，欢迎各位留言反馈~~
