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">
    <RelativeLayout
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="90dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="44dp"
        android:paddingRight="44dp">
        <Button
            android: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" />
        <Button
            android: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">
<RelativeLayout
        layout_alignParentBottom="true"
                layout_marginBottom="90dp"
                layout_width="match_parent"
                layout_height="wrap_content"
                paddingLeft="44dp"
                paddingRight="44dp">

<Button
            id="btn_login"
                    layout_width="100dp"
                    layout_height="40dp"
                    layout_alignParentLeft="true"
                    text="登录"
                    textColor="#ffffff"
                    textSize="15sp"
                    shape="rectangle"
                    radius="9dp"
                    bg="#c75fe768"
                    />
<Button
            id="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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="329dp"
        android:src="@mipmap/login"
        android:scaleType="fitXY"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android: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">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/account"/>
                <EditText
                    android: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>
            <View
                android:layout_marginTop="23dp"
                android:layout_marginBottom="23dp"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#e8e7e7"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/pwd"/>
                <EditText
                    android: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>
        <Button
            android: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">
<ImageView
        android:layout_width="match_parent"
                android:layout_height="329dp"
                android:src="file://./login.jpg"
                android:scaleType="fitXY"
                />
<LinearLayout
        android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
<LinearLayout
            android: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">
<LinearLayout
                android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:gravity="center_vertical">
<ImageView
                    android:layout_width="25dp"
                            android:layout_height="25dp"
                            android:src="file://./account.jpg"/>
<EditText
                    android: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>
<View
                android:layout_marginTop="23dp"
                        android:layout_marginBottom="23dp"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#e8e7e7"/>
<LinearLayout
                android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:gravity="center_vertical">
<ImageView
                    android:layout_width="25dp"
                            android:layout_height="25dp"
                            android:src="file://./pwd.jpg"/>
<EditText
                    android: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>
<Button
            android: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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="329dp"
        android:src="@mipmap/login"
        android:scaleType="fitXY"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android: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">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/account"/>
                <EditText
                    android: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>
            <View
                android:layout_marginTop="23dp"
                android:layout_marginBottom="23dp"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#e8e7e7"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_vertical">
                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:src="@mipmap/pwd"/>
                <EditText
                    android: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>
        <Button
            android: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">
<ImageView
        android:layout_width="match_parent"
                android:layout_height="329dp"
                android:src="file://./login.jpg"
                android:scaleType="fitXY"
                />
<LinearLayout
        android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
<LinearLayout
            android: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">
<LinearLayout
                android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:gravity="center_vertical">
<ImageView
                    android:layout_width="25dp"
                            android:layout_height="25dp"
                            android:src="file://./account.jpg"/>
<EditText
                    android: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>
<View
                android:layout_marginTop="23dp"
                        android:layout_marginBottom="23dp"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#e8e7e7"/>
<LinearLayout
                android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:gravity="center_vertical">
<ImageView
                    android:layout_width="25dp"
                            android:layout_height="25dp"
                            android:src="file://./pwd.jpg"/>
<EditText
                    android: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>
<Button
            android: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