HarmonyOS - 开发一个微博热搜服务卡片

效果图

关键原理

• 使用JS的服务卡片，相对于Java的服务卡片，JS的服务卡片的支持更加齐全，效果更佳

• 使用了JS的UI中的List组件显示微博的热搜列表，每个子项包括序号、标题、热度和类型

• 通过在Ability的onCreateForm(Intent intent)函数中进行热搜的数据分析返回

• 使用Java的Jsoup包进行网页的html数据获取，再使用其分析出微博的热搜信息

服务卡片的页面和样式

<list class="list">
    <!-- 表头 -->
    <list-item class="list-item">
        <div class="div">
            <text class="item_number" style="color: #999;" >序号</text>
            <text class="item_title" style="color: #999;">关键词</text>
        </div>
    </list-item>
    <!-- 主要内容 -->
    <list-item for="{{cards}}" class="list-item">
        <div class="div">
            <!-- 序号 -->
            <text class="item_number">{{ $item.number }}</text>
            <!-- 标题 -->
            <text class="item_title">{{ $item.title }}</text>
            <!-- 热度 -->
            <text class="item_count">{{ $item.count }}</text>
            <!-- 类型(新/热/商) -->
            <text class="item_type" style="background-color: {{$item.color}};" >{{ $item.type }}</text>
        </div>
    </list-item>
</list>

然后是样式文件

/*列表样式*/
.list{
    align-items:center; /*居中对齐*/
}

/*列表中每个元素的样式*/
.list-item{
    border-radius: 10px; /*圆角*/
    background-color: #f2f2f2; /*背景颜色*/
    margin-bottom: 3px; /*向下间隔*/
}

/*元素中内容的样式*/
.div{
    margin:6px; /*四周边距*/
}

/*元素-序号的样式*/
.item_number {
    font-size: 12px;
    color: #f26d5f;
    width: 30px;
    text-align: left; /*左对齐*/
}

/*元素-标题的样式*/
.item_title{
    font-size: 12px;
    color: #0078b6;
    width: 220px;
    text-align: left;
}

/*元素-热度的样式*/
.item_count{
    font-size: 12px;
    text-align: right; /*右对齐*/
    width: 60px;
    color: #808080;
}

/*元素-类型的样式*/
.item_type{
    margin-left: 5px; /*向左间隔*/
    font-size: 12px;
    text-align: right;
    width: 15px;
    color: #fff;
    border-radius: 2px;
}

接着是js文件

export default {
    data: {
        cards: [
            {
                "number": 1,                        //序号
                "title": "义乌1秒发6只冠军同款 ",     //标题
                "count": 4591790,                   //热度
                "type": "新",                       //类型(新/热/商)
                "color": "#f2f2f2"                  //类型的颜色
            }
        ]
    }
}

Java端进行网页请求和分析出微博热搜信息

首先需要引入一个包Jsoup，含有网页请求和网页分析的工具

compile 'org.jsoup:jsoup:1.12.1'

然后写一个获取微博热搜的工具类

import org.jsoup.Jsoup;
import org.jsoup.internal.StringUtil;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 获取微博热搜信息工具
 */
public class GetWeiboListUtil {

    // 微博热搜地址
    private static final String URL = "https://s.weibo.com/top/summary?cate=realtimehot";

    public static List<Map<String, String>> getWeiboList() {
        List<Map<String, String>> weiboList = new ArrayList<>();
        try {
            // 使用Jsoup进行网页请求
            Document document = Jsoup.connect(URL).get();
            // 开始分析HTML
            Element plTopRealTimeHot = document.getElementById("pl_top_realtimehot");
            Elements tBody = plTopRealTimeHot.children().get(0).children().get(1).children();
            for (Element element : tBody) {
                String number = element.children().get(0).text();
                if (StringUtil.isBlank(number)) {
                    number = "↑";
                }
                String title = element.children().get(1).children().get(0).text();
                String count = "";
                if (element.children().get(1).children().size() > 1) {
                    count = element.children().get(1).children().get(1).text();
                }
                String type = element.children().get(2).text();
                String color = "";
                // 根据类型打上颜色
                if (!StringUtil.isBlank(type)) {
                    switch (type) {
                        case "热": color = "#ff9406";break;
                        case "新": color = "#ff3852";break;
                        case "商": color = "#00b7ee";break;
                    }
                }
                Map<String, String> weiboItem = new HashMap<>();
                weiboItem.put("number", number);
                weiboItem.put("title", title);
                weiboItem.put("count", count);
                weiboItem.put("type", type);
                weiboItem.put("color", color);
                weiboList.add(weiboItem);
            }
        }
        catch (IOException e) {
            e.printStackTrace();
        }
        return weiboList;
    }
}

然后是实现Ability的创建事件

import ***.GetWeiboListUtil;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.FormBindingData;
import ohos.aafwk.ability.ProviderFormInfo;
import ohos.ace.ability.AceAbility;
import ohos.aafwk.content.Intent;
import ohos.utils.zson.ZSONArray;
import ohos.utils.zson.ZSONObject;

import java.util.ArrayList;
import java.util.List;

public class MainAbility extends AceAbility {

    // UI侧列表名称
    private static final String LIST_NAME = "cards";
    // 卡片类型4*4
    private static final int DEFAULT_DIMENSION_4X4 = 4;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
    }

    @Override
    public void onStop() {
        super.onStop();
    }

    @Override
    protected ProviderFormInfo onCreateForm(Intent intent) {
        String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
        int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_4X4);
        if (formName.equals("widget") && dimension == DEFAULT_DIMENSION_4X4) {
            ProviderFormInfo providerFormInfo = new ProviderFormInfo();
            ZSONObject zsonObject = new ZSONObject();
            List<Object> weiboList = new ArrayList<>(GetWeiboListUtil.getWeiboList());
            ZSONArray zsonArray = new ZSONArray(weiboList);
            zsonObject.put(LIST_NAME, zsonArray);
            providerFormInfo.setJsBindingData(new FormBindingData(zsonObject));
            return providerFormInfo;
        }
        return null;
    }

    @Override
    protected void onUpdateForm(long formId) {
        super.onUpdateForm(formId);
    }

    @Override
    protected void onDeleteForm(long formId) {
        super.onDeleteForm(formId);
    }
}