上一章节插件配置中登录组件的地址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>
<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的首页，点击首页的退出登录按钮，用户退出成功，页面跳转到登录组件页。
