简单3步轻松跑起HarmonyOS+Vue3（axios+nutui+element-plus）原创精华

Li___in

发布于 2021-9-26 02:03

浏览

5收藏

话不多说先看效果：

下图为FA效果图

简单3步轻松跑起HarmonyOS+Vue3（axios+nutui+element-plus）-鸿蒙开发者社区
动态效果图参考（由于gif过大上传不上了）gif动态图

UI效果可将浏览器调为手机模式，然后访问 http://47.112.192.216/ ，其中HarmonyOS特性能力需要在真机或者分布式远程模拟器中查看效果。

gif图演示了3个功能

1.vue3调用HarmongyOS接口，进行分布式拉起
2.首页实现：视频播放+发送弹幕+获取HarmonyOS轻量级数据库数据+vue网络请求获取评论数据和图片
3.其他页面实现签名功能+侧边导航栏

如何实现

如何才能既用到Vue丰富的生态，还能使用到HarmonyOS多设备交互特性呢？
项目是通过HarmongOS的Webview组件加载Vue页面，Vue和HarmonyOS之间交互通过HarmonyOS注入接口供vue调用，其他更多交互方式和api可参考，在HarmonyOS编写好分布式和访问数据库接口并注入后，Vue即可在window对象中找到对应方法并调用。

创建Vue3工程，导入nutui、element-plus、axios等所需组件，编写完页面后执行npm run serve即可运行并获取到*本机地址*，这里我已经将工程部署到http://47.112.192.216/，Vue相关创建编写这里不再赘述，可点击仓库地址下载工程。
创建HarmongOS工程，创建WebView加载vue页面地址（使用本地地址须手机和电脑处于同一局域网，或使用部署到服务器的地址），并暴露接口
xml

<ohos.agp.components.webengine.WebView
        ohos:id="$+id:webview"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ohos.agp.components.webengine.WebView>
1.
2.
3.
4.
5.

java

 WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
        webView.getWebConfig().setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行；如何使用JavaScript下文有详细介绍
        final String url = "http://47.112.192.216/"; // EXAMPLE_URL由开发者自定义
        webView.load(url);
        // 存储token
        PreferenceUtils.putToken(this,"token form HarmonyOS");

        webView.addJsCallback("getTokenForHarmonyOS", new JsCallback() {
            @Override
            public String onCallback(String msg) {
                // 从轻量级数据库获取token
                return PreferenceUtils.getToken(getContext());
            }
        });

        // 分享页面
        webView.addJsCallback("sharePage", new JsCallback() {
            @Override
            public String onCallback(String msg) {
                List<DeviceInfo> onlineDevices = DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);
                // 判断组网设备是否为空
                if (!onlineDevices.isEmpty()) {
                    Intent intent1 = new Intent();
                    Operation operation = new Intent.OperationBuilder()
                            .withDeviceId(onlineDevices.get(0).getDeviceId())
                            .withBundleName(getBundleName())
                            .withAbilityName(MainAbility.class.getName())
                            .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE)
                            .build();
                    intent1.setOperation(operation);
                    startAbility(intent1);
                    return "拉起成功";
                }else {
                    return "未找到设备";
                }
            }
        });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

在Vue中调用HarmonyOS的注入到Window的接口，并编写对应的交互方式。

function share(){
      if (window.sharePage && window.sharePage.call) {
        let result = sharePage.call("message from web");
        Toast.success(result);
      }else {
        Toast.fail("分享失败，请确定当前为HarmonyOS环境");
      }
    }
function getToken(){
      if (window.getTokenForHarmonyOS && window.getTokenForHarmonyOS.call) {
        let result = getTokenForHarmonyOS.call("message from web");
        Toast.success("token：" + result);
      }else {
        Toast.fail("token 获取失败");
      }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.