自定义登录组件

上一章节插件配置中登录组件的地址loginUrl也可以自定义

module.exports = {
plugins:{
"login": {
"inputParams": {
"title": "登录"
},
"navigationbar": {
"show": true
},
"menu": {
"show": false
},
"config": {
"loginUrl":"https://2i3ydhmhd.lightyy.com/index.html",
"mustForcedToLogin":true
}
}
}
};

第一步 登录组件开发

登录组件可以是JSN组件也可以是H5组件,是一个独立的light工程项目,因此登录组件的开发可以参考 LightH5模块开发LightJSN模块开发

我们这里以H5登录组件开发为例:新建一个H5项目后在index.html文件中增加一个登录的视图,然后执行 light gen,生成登录视图login.vue。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta name="Keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="app.css">
<title>login-demo</title>
</head>
<body>
<div id="main">
<view id="login" home="true"/>
</div>
<!--<snippet id="footer"/>-->
<script src="app.js"></script>
</body>
</html>

login.vue代码如下:

<template>
<div class="login">
<div><input type="text" v-model="nickname" placeholder="用户昵称"></div>
<div><input type="text" v-model="mobile" placeholder="手机号码"></div>
<div><input type="text" placeholder="密码"></div>
<div><span @click="login" class="button">登录</span></div>
</div>
</template>
<script>
import LightSDK from "light-sdk"
export default {
data(){
return {
nickname:"",
mobile:""
}
},
methods:{
login(){
LightSDK.native.userLogin({
"uid":"A000000001118941",
"mobile":this.mobile,
"token":"2017022715495486b9077d71464ae6bd9b6231e768929a",
"nickname":this.nickname,
"photoURL":"http://www.lightyy.com/data/file/58ddb6fe246fa043d34a8013?type=image",
"logoutWhenExit":"true"
});
}
}
}
</script>

登录组件需要在登录的时候调native源生的登录接口LightSDK.native.userLogin,具体使用参考文档 light-sdk

至此,登录组件开发完毕。

第二步 发布登录组件到light平台

在上一步登录组件项目的根目录下执行 light release -p 得到登录组件的包。然后去light平台创建一个登录组件的H5应用,并发布打好的包。下图中的链接地址即为自定义好的登录组件,可以直接用来配置在loginUrl中。

第三步 登录组件的具体使用

登录组件最终是配置在APP中使用的,下面我们新建一个APP应用 light create -t app,按照本章节LightAPP开发的文档配置好所有的项,并将上一步中开发好的登录组件的地址配置在loginUrl中。

config.js配置内容如下所示:

module.exports = {
res:{
logo:"/native/res/icon.png",
launch:"/native/res/launch.png",
},
menuBar:{
menus:[{
view:"index"
}]
},
navBar:{
backgroundColor:"#de302f",
titleColor:"#ffffff",
buttonColor:"#ffffff"
},
views:{
"index":{
url:"index.html"
}
},
plugins:{
"login": {
"inputParams": {
"title": "登录"
},
"navigationbar": {
"show": true
},
"menu": {
"show": false
},
"config": {
"loginUrl":"https://76hngfuip.lightyy.com/index.html",
"mustForcedToLogin":true
}
}
}
};

注意事项

如果登陆组件是jsn项目,地址前面需要加上gmu协议如:gmu://jsnative?startPage=demo1.vhost.light.com/app.native.js#/index

登录组件登录成功后,会自动进入到APP的主页,即config.js中配置的菜单地址。现在我们在APP项目中的index.vue文件中做如下修改:


<template>
<div>

<div><span @click="loginOut" class="button">退出登录</span></div>
<div class="home">欢迎来到首页</div>
</div>
</template>
<script>
import LightSDK from "light-sdk"
import light from "light"
export default {
data(){
return {
nickname:"",
mobile:""
}
},
methods:{
login(){
LightSDK.native.userLogin({
nickname:this.nickname,
mobile:this.mobile
});
},
loginOut(){
LightSDK.native.userlogout(function(){
alert("退出登录成功");
light.navigate("gmu://login"); //返回到登录组件
})
}
}
}
</script>

现在APP中的配置全部开发完毕,执行light release -p 打APP的包,并上传到平台。APP的集成方法可参考 APP集成

APP安装成功后打开,会出现我们配置好的登录组件页面。输入用户信息后点登录,会进入到APP的首页,点击首页的退出登录按钮,用户退出成功,页面跳转到登录组件页。