直播短视频源码如何编写uni-app登录功能界面

用户登录直播短视频源码最基础也是最重要的功能，只有通过登陆以后，系统才能对用户信息进行区分，保证用户的账号安全，而且用户通过登陆以后，可以享受直播短视频源码全部的功能，应有完整的用户体验。接下来，我们就以一起看一下，一个简单的直播短视频源码登录功能是如何实现的。
一、html代码搭建功能框架
实现直播短视频源码登陆页面的第一步，就是搭建一个页面框架，以下是实现代码：

<template><view class="content" :style="'background-image: url(../../static/login/bg_login.png);height:'+this.windowHeight+'px'" ><view class="text-area"><text class="title">注册登录后体检更多精彩</text></view><view class="login_in"><view class="phone">+86<input type="number" v-bind:value="mobile" placeholder="请输入您的手机号" @input="mobile_input"  /></view><view class="pwd"><input type="password" v-bind:value="pwd"  placeholder="请输入密码" @input="pwd_input" /></view></view><button type="default" class="logon" @click="logo">立即登录</button><view class="operation"><view class="reg"><navigator url="../login/register">立即注册</navigator></view><view class="forget"><navigator url="../login/forget">忘记密码</navigator></view></view><view class="treaty">登录即代表《隐私政策》和《服务协议》</view></view>
</template>

二、css样式进行页面美化
页面框架完成后，要在这个基础上对页面进行美化，页面风格要和直播短视频源码的系统风格一致。

<style>.content{width: 100vw;background-position: center;}.content .text-area{width: 100%;padding-top: 4rem;padding-bottom: 2rem;text-align: center;}.content .text-area .title{color: #FFFFFF;letter-spacing:8upx;font-size: 1.5rem;}.content .login_in{width: 100%;}.content .login_in .phone{width: 70%;padding: 0 5%;height: 2.6rem;line-height: 2.6rem;background-color: rgb(255 255 255 / 55%);border-radius: 2rem;position: relative;margin: 0 auto;color: #EEEEEE;font-size: 1rem;}.content .login_in .phone>input{position: absolute;top: 11.5%;left: 4rem;height: 2rem;line-height: 2rem;}.uni-input-placeholder{color: #EEEEEE;}.content .login_in .pwd{width: 70%;padding: 0 5%;height: 2.6rem;line-height: 2.6rem;background-color: rgb(255 255 255 / 55%);border-radius: 2rem;margin: 0 auto;color: #EEEEEE;font-size: 1rem;margin-top: 1rem;}.content .login_in .pwd>input{position: relative;top: 11.5%;height: 2rem;line-height: 2rem;}.content .logon{width: 80%;height: 2.5rem;line-height: 2.5rem;border-radius: 2rem;background-color: #FA5A3A;color: #fff;margin-top: 1.5rem;}.content .operation{width: 80%;height: 2.5rem;line-height: 2.5rem;border-radius: 2rem;font-size: 0.8rem;color: #EEEEEE;margin: 0 auto;position: relative;}.content .operation .reg{width: 50%;float: left;}.content .operation .forget{width: 50%;text-align: right;float: right;}.content .treaty{width:100%;position: absolute;bottom:5%;font-size: 0.8rem;color: #EEEEEE;text-align: center}</style>

三、js实现登录功能
最后，就是通过js来完成用户登录的逻辑，实现直播短视频源码的用户登录。

<script>export default {data() {return {mobile:'',pwd:'',windowHeight:0,}},onLoad() {   //获取页面高度this.windowHeight=uni.getSystemInfoSync().windowHeight;},methods: {mobile_input(e){//手机号this.mobile=e.detail.value;},pwd_input(e){//手机号this.pwd=e.detail.value;},logo(e){// 登入if(this.mobile==''){uni.showToast({title: '请输入您的手机号',icon:'none',duration: 2000});return 1;}if(this.pwd==''){uni.showToast({title: '请输入密码',icon:'none',duration: 2000});return 1;}uni.request({url: '请求域名',method: 'GET',data: {country_code:'86',user_login:this.mobile,user_pass:this.pwd},success: res => {//登入后主要逻辑处理},fail: (data) => {console.log(data);},complete: () => {}});}}}
</script>

就是这样，我们就实现了简单的用户登录的功能，这段代码来自直播短视频源码的代码，如果需要使用的话，可能会需要修改部分逻辑才能正常运行，有兴趣的朋友也可以关注我，和我进行交流。
声明：以上内容为云豹科技原创，未经作者本人同意，禁止转载，否则将追究相关法律责任。

直播短视频源码如何编写uni-app登录功能界面相关推荐

直播短视频源码，身份证图片识别
直播短视频源码,进行身份验证时,对上传的身份证图片实现正确识别的相关代码 public class IDCardModel{public string name;public string sex;p ...
（H5+安卓+ios）直播app系统源码,直播商城带货源码,方维直播app系统,直播短视频源码
商品介绍 (H5+安卓+ios)直播app系统源码,直播商城带货源码,方维直播app系统,直播短视频源码,本系统有三个版本:带商城直播系统,带H5直播系统,和一般的直播短视频系统,默认带H5版本系统 ...
Android直播中短视频源码的功能实现
直播app是当下流行的视频社交类平台,也是重要的流量渠道,短视频同样是重要的流量之王,在直播中加入短视频源码功能,实现强强联合,有效提高了直播app的可玩性和用户粘性.云豹直播作为优质的直播平台源码提 ...
直播源码和短视频源码，相亲相爱的一家人
直播源码和短视频源码,相亲相爱的一家人从直播的百播大战,到如今的趋于稳定:从短视频的兴起,到如今的竞争发展.直播和短视频两条线,开始相交,直播里面添加短视频功能,短视频里面也添加了直播. 在直播里面 ...
一对一交友源码，仿抖音短视频源码，搭建的秘密你了解多少？
一对一交友源码,仿抖音短视频源码,搭建的秘密你了解多少? 5G技术马上到来,现在直播遇到的一些问题,比如延迟.卡顿.掉线等,很有可能这些情况就不复存在了.而且,其他的一些高科技产品会运用到直播过程中, ...
长短视频之争，长视频平台和短视频源码谁主沉浮？
文/布谷安妮来源/山东布谷鸟网络飞速飙升的用户流量,让以抖音和快手为代表的短视频收割了大量的关注度,从个体用户到媒体,短视频源码在短短时间内成为互联网行业最炙手可热的话题.腾讯重新启用微视,百度推 ...
短视频源码，仿抖音源码，助您在短视频行业开辟出一条新路
短视频源码,仿抖音源码,助您在短视频行业开辟出一条新路复制代码在短视频行业,抖音当之无愧的T0阶层.致使腾讯老大也眼红这块蛋糕,打压抖音,重启自己的短视频--微视来进行竞争.短视频的火爆事宜得益于 ...
类似抖音的短视频app开发难度大吗？短视频源码让你事半功倍
"短视频"--在2018年视频直播行业的发展趋于稳定后,短视频app成为了主角.抖音短视频app的火爆,引来互联网大佬们的强势入局.看似简洁的抖音短视频app,实则在开发过程中会存 ...
如何通过短视频源码快速开发短视频APP
如何通过短视频源码快速开发短视频APP 随着抖音,快手等短视频的火热,越来越多的人也想搭建一套自己的短视频平台,话不多说,让我们开始吧. 一. 短视频APP开发通常我们有两种选择方式: 1. 重头定 ...
有视频APP上线，一对一交友源码和抖音短视频源码稳步前行
有视频APP上线,一对一交友源码和抖音短视频源码稳步前行最近几年,网络上谈论直播和短视频的随处可见.茶余饭后,闲暇时间,经常会看会儿直播或者刷下短视频,全民皆可参与. 艾媒咨询数据显示,2017年中 ...

直播短视频源码如何编写uni-app登录功能界面

直播短视频源码如何编写uni-app登录功能界面相关推荐

最新文章

热门文章