@microduino/accountcenter

1.13.6 • Public • Published

#microduino用户中心

###用户中心,基于react和npm使用方式(表现层)

npm i @microduino/accountcenter

###config配置说明

/**
 * appID 必填,否则会初始化失败(跟任博对接下,做统一规划~)
 * language:国际化,目前定义了zh和en
 * display:展示模式,可选范围mobile pc(default)
 * styles:皮肤自定义入口(预留)
 */
const config = {appID: 'idea-lab', language: 'zh', display: 'mobile'}

###react 项目,npm导入方式

const {Login, Register, Forget} = new AccountCenter(config)
     <Login /> // 登录页面
     <Register /> // 忘记密码页面
     <Forget /> // 注册页面

###非react 项目,script标签引入方式

    <script src="../dist/accountCenter.js"></script>
    <script type="text/babel">
       function onSuccess () {
           alert('成功')
       }
       const {React, ReactDOM, AccountCenter} = accountCenter

       const {Login, Register, Forget, config} = new AccountCenter({language: 'en', appID: 'idea-lab'})
       ReactDOM.render(
           <div>
               <Login onSuccess={onSuccess}/>
               <Register onSuccess={onSuccess}/>
               <Forget onSuccess={onSuccess}/>
           </div>
           document.getElementById('app')
       )
   </script>
   <div id="app"></div>

#component说明

Login 登录
    props定义
        onForget: PropTypes.func,    //点击忘记密码跳转route
        onSuccess: PropTypes.func,   //登录成功操作
        onRegister: PropTypes.func,  //点击注册跳转route

Forget 忘记密码
    props定义
        onSuccess: PropTypes.func,   //找回密码成功后的操作


Register 注册
    props定义
        onLogin: PropTypes.func,     //登录按钮跳转
        onSuccess: PropTypes.func,   //注册成功后的操作

ChangeEmail 修改注册邮箱
JoinAccount 账号关联邮箱
ChangePassWord 修改密码
ChangeAccountData   修改账号资料【头像,用户名】

#方法

       const {api} = new AccountCenter()

     // logout 登出
     api.logout()

     // logout 判断是否登录
     api.isLogin()

#遗留问题 批量注册(需求细化) app端的登录需求(直接去找接口的service,这边满足不了,除非是html嵌入的形式) oauth登录对接(ps:账号合并相关需求) Token传递给客户端的问题~~~预留~~~ Cookie的服务器渲染 oauth的中转页面~(route问题,需要定义) #其他 日志和数据统计(佳文的包来处理)

#目录说明

 |---dist 输出目录
     |---accountCenter.js    #browser版本的js包
     |---app.js    #react和npm版本的build结果
 |---example
     |---browser.html    #script引入方式
     |---bundle.js    #example build js
     |---index.html    #运行结果预览
 |---lib   #三方库
     |---browser.min.js    #用于react,浏览器端script引入方式的支持
 |---node_modules
 |---src
      |---api   #接口交互部分的逻辑定义(预留,等任博的接口。。。)
      |---components   #基础组件(只存放无状态的基础组件)
      |---locale   #国际化定义
      |---modules   #套件(完整逻辑的模块定义在这里)
      |---browser.js    #浏览器模块配置
      |---npm.js     #npm模块配置
      |---utils   #工具库
      |---app.less   #css核心,PC和mobile适配以及响应
 |---static    #静态资源
 |---index.js   #npm 出口
 |---webpack.config.js            #example配置
 |---webpack.prepublish.config    #build npm包
 |---webpack.prepublishbrowser.config.js   #build 浏览器版本的js
......

Readme

Keywords

Package Sidebar

Install

npm i @microduino/accountcenter

Weekly Downloads

14

Version

1.13.6

License

none

Unpacked Size

3.66 MB

Total Files

35

Last publish

Collaborators

  • microduino