Auto.js制作短视频app（添加登陆注册界面）

在b站上看到了一个视频咨询的安卓项目

https://www.bilibili.com/video/BV16Z4y1H7jj?spm_id_from=333.337.search-card.all.click

其项目中登陆注册的ui界面挺好看的，便想复刻到auto.js中，制作一款短视频播放app。代码下载在我的微信公众号：For My Future

一.界面仿写

安卓教程中总共有三个界面，主页面，登录页面，注册页面，我分别创建main.js,login.js,register.js来写这三个界面，以及我添加的video.js界面来播放短视频。

1.1主页面

我事先已经跟着教程将AndroidStudio中的安卓代码打好，只要稍加修改便可使用。

安卓代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:background="@mipmap/splash"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><RelativeLayoutandroid:layout_alignParentBottom="true"android:layout_marginBottom="90dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="44dp"android:paddingRight="44dp"><Buttonandroid:id="@+id/btn_login"android:layout_width="100dp"android:layout_height="40dp"android:layout_alignParentLeft="true"android:background="@drawable/shape_login_btn"android:text="@string/login"android:textColor="#ffffff"android:textSize="20sp" /><Buttonandroid:id="@+id/btn_register"android:layout_alignParentRight="true"android:layout_width="100dp"android:layout_height="40dp"android:background="@drawable/shape_register_btn"android:text="@string/register"android:textSize="20sp"android:textColor="#ffffff"/></RelativeLayout>
</RelativeLayout>

auto.js改写：

'ui';
/*** 作者: 姜来式* QQ: 1216951671*/ui.layout(
<RelativeLayout  bg="file://./splash.jpg"layout_width="match_parent"layout_height="match_parent">
<RelativeLayoutlayout_alignParentBottom="true"layout_marginBottom="90dp"layout_width="match_parent"layout_height="wrap_content"paddingLeft="44dp"paddingRight="44dp"><Buttonid="btn_login"layout_width="100dp"layout_height="40dp"layout_alignParentLeft="true"text="登录"textColor="#ffffff"textSize="15sp"shape="rectangle"radius="9dp"bg="#c75fe768"/>
<Buttonid="btn_register"layout_width="100dp"layout_height="40dp"layout_alignParentRight="true"text="注册"textColor="#ffffff"textSize="15sp"shape="rectangle"radius="9dp"bg="#afee5d59"/></RelativeLayout>
</RelativeLayout>);

1.2登录页面

安卓代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".activity.LoginActivity"android:background="#ffffff"><ImageViewandroid:layout_width="match_parent"android:layout_height="329dp"android:src="@mipmap/login"android:scaleType="fitXY"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:gravity="center"android:orientation="vertical"android:layout_marginTop="278dp"android:layout_marginLeft="18sp"android:layout_marginRight="18dp"android:paddingLeft="43dp"android:paddingRight="31dp"android:background="@drawable/shape_login_form"android:layout_width="match_parent"android:layout_height="230dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="@mipmap/account"/><EditTextandroid:id="@+id/et_account"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:textSize="18sp"android:background="@null"android:hint="@string/account_hint"android:textColorHint="#bcbcbc"android:textColor="#000000"/></LinearLayout><Viewandroid:layout_marginTop="23dp"android:layout_marginBottom="23dp"android:layout_width="match_parent"android:layout_height="1dp"android:background="#e8e7e7"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="@mipmap/pwd"/><EditTextandroid:id="@+id/et_pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:inputType="textPassword"android:textSize="18sp"android:background="@null"android:hint="@string/register_hint"android:textColorHint="#bcbcbc"android:textColor="#000000"/></LinearLayout></LinearLayout><Buttonandroid:id="@+id/btn_login"android:layout_marginLeft="18dp"android:layout_marginRight="18dp"android:layout_marginTop="67dp"android:text="@string/login"android:textSize="24sp"android:textColor="#ffffff"android:layout_width="match_parent"android:layout_height="55dp"android:background="@drawable/shape_big_login_btn"/></LinearLayout>
</RelativeLayout>

auto.js改写：

"ui";
/*** 作者: 姜来式* QQ: 1216951671*/ui.layout(
<RelativeLayout android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff">
<ImageViewandroid:layout_width="match_parent"android:layout_height="329dp"android:src="file://./login.jpg"android:scaleType="fitXY"/>
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">
<LinearLayoutandroid:gravity="center"android:orientation="vertical"android:layout_marginTop="278dp"android:layout_marginLeft="18sp"android:layout_marginRight="18dp"android:paddingLeft="43dp"android:paddingRight="31dp"android:background="#ffffff"android:layout_width="match_parent"android:layout_height="230dp">
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical">
<ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="file://./account.jpg"/>
<EditTextandroid:id="et_account"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:textSize="18sp"android:hint="请输入账号"android:textColorHint="#bcbcbc"android:textColor="#000000"bg="#ffffff"/></LinearLayout>
<Viewandroid:layout_marginTop="23dp"android:layout_marginBottom="23dp"android:layout_width="match_parent"android:layout_height="1dp"android:background="#e8e7e7"/>
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical">
<ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="file://./pwd.jpg"/>
<EditTextandroid:id="et_pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:inputType="textPassword"android:textSize="18sp"android:hint="请输入密码"android:textColorHint="#bcbcbc"android:textColor="#000000"bg="#ffffff"/></LinearLayout>
</LinearLayout>
<Buttonandroid:id="btn_login"android:layout_marginLeft="18dp"android:layout_marginRight="18dp"android:layout_marginTop="67dp"android:text="登录"android:textSize="24sp"android:textColor="#ffffff"android:layout_width="match_parent"android:layout_height="55dp"bg="#4dbe66"android:shape="rectangle"android:radius="9dp"/>
</LinearLayout>
</RelativeLayout>

)

‍这里面有一个问题，

中间的这白色矩形框是一个xml文件，名为shape_login_form，在linearlayout布局中使用方法为：

android:background="@drawable/shape_login_form"

而在auto.js中，我不知道如何引用一个xml文件只好把背景都设置为白色。

1.3注册页面

安卓代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".activity.LoginActivity"android:background="#ffffff"><ImageViewandroid:layout_width="match_parent"android:layout_height="329dp"android:src="@mipmap/login"android:scaleType="fitXY"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:gravity="center"android:orientation="vertical"android:layout_marginTop="278dp"android:layout_marginLeft="18sp"android:layout_marginRight="18dp"android:paddingLeft="43dp"android:paddingRight="31dp"android:background="@drawable/shape_login_form"android:layout_width="match_parent"android:layout_height="230dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="@mipmap/account"/><EditTextandroid:id="@+id/et_account"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:textSize="18sp"android:background="@null"android:hint="@string/account_hint"android:textColorHint="#bcbcbc"android:textColor="#000000"/></LinearLayout><Viewandroid:layout_marginTop="23dp"android:layout_marginBottom="23dp"android:layout_width="match_parent"android:layout_height="1dp"android:background="#e8e7e7"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical"><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="@mipmap/pwd"/><EditTextandroid:id="@+id/et_pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:inputType="textPassword"android:textSize="18sp"android:background="@null"android:hint="@string/register_hint"android:textColorHint="#bcbcbc"android:textColor="#000000"/></LinearLayout></LinearLayout><Buttonandroid:id="@+id/btn_register"android:layout_marginLeft="18dp"android:layout_marginRight="18dp"android:layout_marginTop="67dp"android:text="@string/register"android:textSize="24sp"android:textColor="#ffffff"android:layout_width="match_parent"android:layout_height="55dp"android:background="@drawable/shape_big_register_btn"/></LinearLayout>
</RelativeLayout>

auto.js改写：

"ui";
/*** 作者: 姜来式* QQ: 1216951671*/ui.layout(
<RelativeLayout android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff">
<ImageViewandroid:layout_width="match_parent"android:layout_height="329dp"android:src="file://./login.jpg"android:scaleType="fitXY"/>
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">
<LinearLayoutandroid:gravity="center"android:orientation="vertical"android:layout_marginTop="278dp"android:layout_marginLeft="18sp"android:layout_marginRight="18dp"android:paddingLeft="43dp"android:paddingRight="31dp"android:background="#ffffff"android:layout_width="match_parent"android:layout_height="230dp">
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical">
<ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="file://./account.jpg"/>
<EditTextandroid:id="et_account"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:textSize="18sp"android:hint="请输入账号"android:textColorHint="#bcbcbc"android:textColor="#000000"bg="#ffffff"/></LinearLayout>
<Viewandroid:layout_marginTop="23dp"android:layout_marginBottom="23dp"android:layout_width="match_parent"android:layout_height="1dp"android:background="#e8e7e7"/>
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:gravity="center_vertical">
<ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:src="file://./pwd.jpg"/>
<EditTextandroid:id="et_pwd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:inputType="textPassword"android:textSize="18sp"android:hint="请输入密码"android:textColorHint="#bcbcbc"android:textColor="#000000"bg="#ffffff"/></LinearLayout>
</LinearLayout>
<Buttonandroid:id="btn_register"android:layout_marginLeft="18dp"android:layout_marginRight="18dp"android:layout_marginTop="67dp"android:text="注册"android:textSize="24sp"android:textColor="#ffffff"android:layout_width="match_parent"android:layout_height="55dp"bg="#b1525e"android:shape="rectangle"android:radius="9dp"/>
</LinearLayout>
</RelativeLayout>)

1.4短视频播放页面

这个页面是自己添加的，使用VideoView播放视频，并且布局要占满手机屏幕。

"ui";
/*** 作者: 姜来式* QQ: 1216951671*/ui.layout(
<linear gravity="center_horizontal">
<VideoView id="video" h="{{device.height}}px" /></linear>);

2.2登录界面

登录界面要实现的是得到用户输入的账号和密码并与数据库中的信息进行比对，若相同则登录到video.js界面，否则登录失败。数据库网址为：

http://47.112.180.188:8080/renren-fast/app/login

ui.btn_login.click(function(){let account = ui.et_account.getText().toString().trim();let pwd  = ui.et_pwd.getText().toString().trim();login(account,pwd);})

随后进行login函数的编写：

function login(account , pwd){if(account==null||account.length<=0){return;}if(pwd==null||pwd.length<=0){return;}let m ={};m["mobile"]=account;m["password"]=pwd;let res = http.postJson(baseurl,m)let status = JSON.parse(res.body.string()).msg;if(status=="success"){toast("登录成功");engines.execScriptFile("video.js")}else{toast("登录失败")}}

2.3注册界面

逻辑实现与登录界面相似，注册网址：

http://47.112.180.188:8080/renren-fast/app/register

ui.btn_register.click(function(){let account = ui.et_account.getText().toString().trim();let pwd  = ui.et_pwd.getText().toString().trim();register(account,pwd);})

function register(account , pwd){if(account==null||account.length<=0){return;}if(pwd==null||pwd.length<=0){return;}let m ={};m["mobile"]=account;m["password"]=pwd;let res = http.postJson(baseurl,m)let status = JSON.parse(res.body.string()).msg;if(status=="success"){toast("注册成功");}else{toast("注册失败")}}

2.4短视频播放界面

在实现功能实现之前要找到短视频api的接口，这里在网上查找到了一些

var urllist = ["https://dwz.mk/FvQVNb","https://dwz.mk/Q3YBjm","https://dwz.mk/MVZVjy","http://b6i.cn/6yHq3","http://mtw.so/66fctR","http://mtw.so/6d5rQ6","http://mtw.so/6llOO4","http://mtw.so/5JKMrO","http://mtw.so/66faVz","http://mtw.so/6llPR4","http://mtw.so/6sS2VL","http://mtw.so/5YNa04","http://mtw.so/6llPRe","http://mtw.so/5Ceznr","http://mtw.so/6d5qi8","http://mtw.so/5uImiU","http://mtw.so/6d5qii","http://mtw.so/5JKMu4","http://mtw.so/6llPRI","http://mtw.so/5uImkQ","http://mtw.so/5YNa2k","http://mtw.so/6llPRS","http://mtw.so/5JKMuo","http://mtw.so/6d5qiM","http://mtw.so/6llPS2","http://mtw.so/5JKMuy","http://mtw.so/5YNa2E","https://v.nrzj.vip/video.php","https://v.nrzj.vip/video.php?_t=0.9112040900843363","https://v.nrzj.vip/video.php?_t=0.8246091199048984",'https://www.nihaowua.com/v/video.php?_t=0.9413531186688902',]

当然也有随机的短视频接口，

var suiji ="https://wmsp.cc/video.php?_t=0.4853208149268591";

如果想添加自己的视频这里也提供一种方法，上传视频到抖音，分享复制链接（注意：这个链接并不是视频链接），用浏览器打开，视频资源嗅探找到视频的链接，如下图最上面的地址。

当然，这个方法有不足之处，视频链接几个小时就会失效了，如果想用永久的链接，还是要有自己的服务器上传视频。

设置随机取list列表中的视频进行播放：

ui.post(function () {//var path = 'https://wmsp.cc/video.php?_t=0.3851079164671034'var url = urllist[random(0,urllist.length-1)]ui.video.setVideoURI(android.net.Uri.parse(url));ui.video.start();})

当视频播放完重复播放：

ui.video.setOnCompletionListener({onCompletion(){ui.video.start();}})

这里有一个问题，看安卓文档重复播放应该是resume（）方法，但是这里设置后无法重复播放，于是改写为start（）方法。

单击界面在list列表随机播放下一条视频：

ui.video.click(function(){if(judge==0){var url = urllist[random(0,urllist.length-1)]ui.video.setVideoURI(android.net.Uri.parse(url));ui.video.start();}})

长按随机播放视频：

ui.video.longClick(function(){ui.video.setVideoURI(android.net.Uri.parse(suiji));ui.video.start();judge = 1;toast("随机播放下一条视频")setTimeout(() => {judge = 0;}, 4000);})

这里使用settimeout,是因为我经过测试发现长按后一定会触发短按事件，而短按不会触发长按事件，上网查询说要加一个 return true即可，经测试还是同样触发，于是自己想办法解决。加了一个变量judge进行判断，当长按后judge会立刻赋值为1，短按新加if判断,则长按后可以不触发短按事件。

 if(judge==0){......}

‍

而settimeout的使用会使judge在4000毫秒后再从1变为0，可以进入到短按逻辑中，顺利解决了这个问题。

视频演示：

【auto.js制作随机短视频app-哔哩哔哩】 https://b23.tv/Kh7rVoX

app下载地址：

https://jianglaishi.lanzout.com/ibEWk0938bxa
密码:41e9

教程及代码下载在我的微信公众号：For My Future

Auto.js制作短视频app（添加登陆注册界面）相关推荐

auto.js制作简易音乐app（二）
上一个版本只完成了音乐播放的功能,此次编写实现了歌单搜索,歌曲选择以及歌曲下载的功能,一些基本功能已经大体完成了,后续也只是一些BUG处理,脚本逻辑完善等等.app及代码下载在我的公众号:For My ...
Android 制作一款短视频app软件可在线观看（视频实时更新）
Android 制作一款短视频app软件可在线观看(视频实时更新) 第一步:完成界面的设计界面布局采用LinearLayout,添加TextView控件显示标题,添加4个Button按钮可切换不同的 ...
短视频源码教程之短视频app制作如何实现合拍功能
当用户发现比较搞笑的视频时,总是想进行模仿的,在短视频app制作合拍功能之前,我们至少需要两部手机,一部负责播放原视频,一部负责拍摄我们自己,非常不便,而现在,合拍功能应运而生,本篇文章是关于在短视频 ...
短视频APP开发制作—生成视频封面、略缩图
在短视频App开发中,编辑短视频有很多重点功能,如视频滤镜.音乐混音.静态贴纸.加水印等,今天讲一讲如何使用腾讯短视频sdk获取视频封面或略缩图. 首先,初始化控件,设置必要配置: mTXVideoE ...
了解这些才能进行短视频app制作
想运营短视频必须先了解短视频app制作,只有知道了短视频app制作是怎么一回事,在您没有研发团队的基础上才能更好的与开发商进行沟通. 1.视频特效和素材短视频app制作中很重要的一点是美颜视频特效, ...
如何制作一个简单的短视频 app
如果想制作一个简单的短视频 app,可以考虑以下步骤: 确定 app 的目标和功能:需要明确 app 的目标受众和提供的功能,以确定 app 的整体设计方向. 选择开发平台:根据自己的技术能力和预算选 ...
短视频app制作开发，时间戳格式化
短视频APP制作开发时间戳格式化相关代码: var value = new Date(); console.log(dateStr(value)); //2019-09-20 18:10:54//pa ...
如何在短视频源码基础上快速打造一款高清又极速的短视频APP开发制作？
整个短视频的市场规模一直在增长,网络数据显示2018年已经突破100亿大关,在2019年预测将超过200亿.纵观行业,在生活资讯.美食.搞笑.游戏.美妆等领域,短视频流量巨大但竞争激烈,但是在教育.财 ...
淘宝上线短视频APP鹿刻：害抖音之心无，防抖音之心有
文:罗超,陶程亦有贡献. 9月17日,罗超频道发现淘宝旗下短视频App"鹿刻"已经可以在各大应用商店下载. App Store 的版本记录显示该产品的开发者并不是淘宝,也不是阿里巴 ...

Auto.js制作短视频app（添加登陆注册界面）

Auto.js制作短视频app（添加登陆注册界面）相关推荐

最新文章

热门文章