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