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

发布于 2021-9-26 02:03
浏览
5收藏

话不多说先看效果:

下图为FA效果图

简单3步轻松跑起HarmonyOS+Vue3(axios+nutui+element-plus)-开源基础软件社区简单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对象中找到对应方法并调用。

  1. 创建Vue3工程,导入nutui、element-plus、axios等所需组件,编写完页面后执行npm run serve即可运行并获取到*++本机地址++*,这里我已经将工程部署到++http://47.112.192.216/++,Vue相关创建编写这里不再赘述,可点击仓库地址下载工程。
  2. 创建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>

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. 在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 获取失败");
      }
    }

相关链接

Vue和FA工程地址:https://gitee.com/LLLLLLin/harmonyos-vue3
Vue已打包部署可参考使用地址:http://47.112.192.216/
Webview api:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158#section6833162911117
Vue3的创建编写和使用:这个就自己百度啦~,我也是现学现写的>▽<。vue3同样支持vue2的写法,项目内about.vue就是用vue2写法。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-9-26 02:03:59修改
5
收藏 5
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐