Auto.js制作蓝奏软件库app

最新推荐文章于 2024-08-10 08:04:47 发布

姜来式

最新推荐文章于 2024-08-10 08:04:47 发布

阅读量1.8k

点赞数

分类专栏： auto.js 文章标签： javascript 前端开发语言 android

本文链接：https://blog.csdn.net/qq_43974059/article/details/126436649

版权

auto.js 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

教程简介：

本教程利用抓包工具抓到蓝奏软件分享的接口，添加搜索功能，在ui界面的list控件中显示搜索结果，实现了list的上拉翻页，下拉刷新功能，并提供搜索结果的下载服务。（代码及软件下载地址在文末，更多教程在我的公众号：For My Future）

接口：

http://api2.free.tryzth.com/json/search?keywords=软件&page=1

界面展示：

流程简介：

一.设计list样式

二.搜索功能实现

三.list上拉进入下一页功能实现

四.list下拉刷新功能实现

五.list点击下载功能实现

一.设计list样式

首先要设计list的样式，也就是一行展示的视图。因为它带着img，text，button等控件，所以要把这些元素设计到card布局里面。

这里我先用AndroidStudio里的xml文件design设计进行布局的安卓开发，因为这些控件可以拖动设计比较方便观察，

设计完成后把代码复制到auto.js中,稍作修改

  <list id="todoList"  bg="#999999">
<card w="*" h="70" margin="10 5" cardCornerRadius="2dp" cardElevation="1dp" >
  <LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="68dp"
    android:orientation="horizontal">
    <ImageView
        id="img"
        android:layout_width="62dp"
        android:layout_height="68dp"
        src="{{this.src}}" />

    <LinearLayout

        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="72dp"
            android:orientation="vertical">

            <TextView
                id="name"
                gravity ="bottom"
                textColor="#000000"
                android:layout_width="match_parent"
                android:layout_height="38dp"
                maxLines="2"
                android:ellipsize="marquee"
                text="{{this.name}}" />

            <LinearLayout
                marginTop="6dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <TextView
                    maxLines="1"
                    id="date"
                    gravity ="center_left"
                    android:layout_width="141dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    text="{{this.date}}" />

                <TextView
                    maxLines="1"
                    id="size"
                    gravity ="center_left"
                    android:layout_width="143dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    text="{{this.size}}" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    <button
        id="btn"
        style="Widget.AppCompat.Button.Colored" 
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="68dp"
        text="下载" />

</LinearLayout>
</card>
</list>

这样，list一行的样式就设计好了，随后添加SearchView，id为search。初始ui界面如图所示：

二.搜索功能实现

搜索框的在制作简易音乐app（二）那一期中有详细教程，这里贴出代码，不做赘述。

ui.search.setOnQueryTextListener( {
    onQueryTextSubmit(text){
      todoList=[];
      if(text!=null){
        globekeyword = text;
        threads.start(function(){searchword(text,globepage);
        })
    }
     ui.todoList.setDataSource(todoList); //与ui的list进行绑定，可以进行显示
     return true;  
},
onQueryTextChange ( text ) {
    return true;
}

})

代码变量及函数解释：

todoList：已声明的全局变量todoList[]，是个列表，存放的就是我们list要展示的数据。点击搜索首先是要之前的数据清空，所以才有todoList=[];

globekeyword:已声明的全局变量，存放的是我们点击搜索后得到搜索框中的字符串。

searchword函数：调用api接口进行搜索。见代码注释。

function searchword(keyword ,page){  //两个参数，一个搜索词，一个页码
    globepage = 1; //全局变量存放页码
    let url = "http://api2.free.tryzth.com/json/search?keywords="+ keyword + "&page=" + page;
    let res = http.get(url);
    let totallist = JSON.parse(res.body.string()).data;
     for(i=(page-1)*30;i<page*30;i++){  //一页是30条数据，比如说第一页存放到todoList的0~29，那么第二页就要存放到30~59
    if(totallist[i].logo==""){totallist[i].logo="@drawable/ic_android_black_48dp"}//测试发现图标有空的现象，所以把空的图标设为默认安卓图标
     datelist[i] = totallist[i].dates;  //存放时间
     linklist[i] = totallist[i].link;   //存放下载链接
     logolist[i] = totallist[i].logo;   //存放图标地址
     sizelist[i] = totallist[i].size;   //存放软件大小
     titlelist[i] = totallist[i].title;  //存放软件名字
     todoList.push({    //放入至todoList变量中
         src:logolist[i],
         name:titlelist[i],
         date:datelist[i],
         size: sizelist[i],
         link:linklist[i]
     })
 
 }
}

三.list上拉进入下一页功能实现

我这里花了比较长时间寻找资料，我看auto.js的list教程好像没有监听它上滑下滑的功能，于是就去看安卓的ListView，但我套用ListView的方法设置监听器的时候一直设置不上，后来发现一定要new一个OnScrollListener的实例，代码才不会报错，也就是下方所示代码中（）中的内容

ui.todoList.addOnScrollListener(new Packages.androidx.recyclerview.widget.RecyclerView.OnScrollListener({}))

computeVerticalScrollExtent()是当前屏幕显示的区域高度，computeVerticalScrollOffset() 是当前屏幕之前滑过的距离，而computeVerticalScrollRange()是整个View控件的高度，通过这几个值对list是否上拉到底进行判断：

代码如下：

ui.todoList.addOnScrollListener(new Packages.androidx.recyclerview.widget.RecyclerView.OnScrollListener({
    onScrolled:function(view,dx,dy){
        if(view.computeVerticalScrollExtent()+view.computeVerticalScrollOffset()>=view.computeVerticalScrollRange()){//判断是否滑到底
        threads.start(function(){
        globepage = globepage + 1; //滑到底自动加一页
        toast("加载完成")
        let url = "http://api2.free.tryzth.com/json/search?keywords="+ globekeyword + "&page=" + globepage;
        let res = http.get(url);
        let totallist = JSON.parse(res.body.string()).data;
        for(i=0;i<30;i++){
            if(totallist[i].logo==""){totallist[i].logo="@drawable/ic_android_black_48dp"}
        }
        for(i=(globepage-1)*30;i<globepage*30;i++){
            datelist[i] = totallist[i-(globepage-1)*30].dates;
            linklist[i] = totallist[i-(globepage-1)*30].link;
            logolist[i] = totallist[i-(globepage-1)*30].logo;
            sizelist[i] = totallist[i-(globepage-1)*30].size;
            titlelist[i] = totallist[i-(globepage-1)*30].title;
            todoList.push({
                src:logolist[i],
                name:titlelist[i],
                date:datelist[i],
                size: sizelist[i],
                link:linklist[i]
            })
    
    }
        })

        
        }

    }

    
}))

四.list下拉刷新功能实现

使用SwipeRefreshLayout实现下拉刷新的功能，把list放入布局里面

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout id="swipe">
<list >
<card  >
...........
</card>
</list>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

刷新，

ui.swipe.setOnRefreshListener({//监听刷新事件
    onRefresh: function() {
            globepage = 1;
            todoList=[];
            ui.todoList.setDataSource(todoList);
            threads.start(function(){searchword(globekeyword,globepage); })
            ui.swipe.setRefreshing(false); //设置刷新状态
    }
});

五.list点击下载功能实现

ui.todoList.on("item_bind", function(itemView, itemHolder){
    itemView.btn.on("click", function(){
        let item = itemHolder.item;
        app.openUrl(item.link) //跳转到浏览器进行下载
    });})

代码下载地址：

https://jianglaishi.lanzout.com/iBfzY09vkzmd
密码:2fuf

apk下载地址：

https://jianglaishi.lanzout.com/iBWcb09vl0fc
密码:hdu1

更多教程在我的公众号：

For My Future