卡片初始化
对于创建的Js卡片，其卡片初始化的一些数据是在Java类中进行的，这里是在WidgetImpl.java类中，对应的初始化方法为bindFormData()方法。
代码如下：
public class WidgetImpl extends FormController { //卡片初始化时方法 @Override public ProviderFormInfo bindFormData() { HiLog.info(TAG, "开始"); ZSONObject object = new ZSONObject(); object.put("weatherList", getData("北京")); FormBindingData bindingData = new FormBindingData(object); ProviderFormInfo formInfo = new ProviderFormInfo(); formInfo.setJsBindingData(bindingData); return formInfo; } }
如上面代码所示，我们这里将刚才获取的7日json数据设置到ZSONObject中，并指定其在js的变量名为weatherList，对应index.json文件中data中的数据。
刷新天气功能实现
其次，我们不仅需要展示天气数据，而且需要提供给用户一个自己手动更新天气的按钮进行交互。
交互的功能也在WidgetImpl类中，由onTriggerFormEvent()方法进行处理。代码如下所示：
public class WidgetImpl extends FormController { // 卡片消息事件时方法 @Override public void onTriggerFormEvent(long formId, String message) { ZSONObject zsonObject = ZSONObject.stringToZSON(message); HiLog.info(TAG, "onTriggerFormEvent"); ZSONObject result = new ZSONObject(); switch (zsonObject.getString("mAction")) { case "refresh": result.put("weatherList",getData("宜昌")); break; default: break; } // Update js card try { if (mContext instanceof Ability) { ((Ability) mContext).updateForm(formId, new FormBindingData(result)); } } catch (FormException e) { HiLog.error(TAG, e.getMessage()); } } }
如上面代码所示，这里通过mAction机型判断，需要处理的是哪个时间。当然，这里的天气卡片，我们只提供了一个刷新功能，所以只有一个事件。
但在实际的项目中，卡片的交互功能往往很多，比如说音乐类App提供一个卡片进行音乐的播放交互，那么就会提供播放，暂停，下一首，上一首等很多功能。
那么就可以直接通过swicth进行事件字符串的判断，区分其进行的处理方式。
这里，为了用户能看到真正的交互效果，我们将城市进行了切换，毕竟7日天气同一城市，短时间是没有任何变化的。
到这里，基本的交互功能以及界面就全部完成了，实现的效果如首图所示。
卡片界面的样式
在前面我们只介绍了卡片的布局index.hml，以及卡片的交互基本数据的定义index.json。但之所以卡片的界面如首图一样显示，是因为样式index.css：
.card_root_layout { flex-direction: column; width: 100%; height: 100%; background-image: url("common/cardbg.jpg"); } .refresh_image { width: 30px; height: 30px; margin-left: 10px; margin-top: 10px; object-fit: contain; } .weather_list{ margin-top: 2px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; flex-direction: row; height: 100%; width: 100%; align-content: center; align-items: center; justify-content: center; } .list_item{ margin-right: 10px; } .list_div{ flex-direction: column; align-items: center; } .list_text{ font-size: 15px; margin-top: 15px; } .list_image{ height: 30px; object-fit: contain; margin-top: 20px; }
网络请求
在上面，我们是通过自己定义的网络请求，获取json数据字符串的。这里，博主直接给出定义的网络请求类（LYJUtils.java）的代码：
public class LYJUtils { public static String doGet(String httpUrl) { HttpsURLConnection connection = null; InputStream is = null; BufferedReader br = null; String result = null;// 返回结果字符串 try { // 创建远程url连接对象 URL url = new URL(httpUrl); // 通过远程url连接对象打开一个连接，强转成httpURLConnection类 connection = (HttpsURLConnection) url.openConnection(); // 设置连接方式：get connection.setRequestMethod("GET"); // 设置连接主机服务器的超时时间：15000毫秒 connection.setConnectTimeout(15000); // 设置读取远程返回的数据时间：60000毫秒 connection.setReadTimeout(60000); // 发送请求 connection.connect(); // 通过connection连接，获取输入流 if (connection.getResponseCode() == 200) { is = connection.getInputStream(); // 封装输入流is，并指定字符集 br = new BufferedReader(new InputStreamReader(is, "UTF-8")); // 存放数据 StringBuffer sbf = new StringBuffer(); String temp = null; while ((temp = br.readLine()) != null) { sbf.append(temp); sbf.append("\r\n"); } result = sbf.toString(); } } catch (Exception e) { e.printStackTrace(); } finally { // 关闭资源 if (null != br) { try { br.close(); } catch (IOException e) { e.printStackTrace(); } } if (null != is) { try { is.close(); } catch (IOException e) { e.printStackTrace(); } } connection.disconnect();// 关闭远程连接 } return result; } }
定义权限
这里，因为我们获取了网络数据。所以，我们需要赋予应用网络权限，具体权限的定义在config.json文件中，代码如下所示：
"module": { "reqPermissions": [ { "name": "ohos.permission.INTERNET" } ], "package": "com.liyuanjinglyj.jsweather",
