# UniappPlusIntegrationDemo

**Repository Path**: scenario-samples/uniapp-plus-integration-demo

## Basic Information

- **Project Name**: UniappPlusIntegrationDemo
- **Description**: 使用uni-app开发HarmonyOS应用不支持使用plus接口，本示例介绍了如何迁移plus接口到HarmonyOS平台。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-29
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-app应用替代plus的openWeb、openURL和openFile方法的实现示例

## 场景介绍
使用uni-app开发HarmonyOS应用不支持使用plus接口，本示例介绍了如何迁移plus接口到HarmonyOS平台。

## 效果预览
<img src="screenshots/output.gif" width="200">

## 实现思路
1. plus方法plus.runtime.openWeb会在在应用内部打开一个新的Web页面，可以用uni-app的web-view组件替代。
```Vue
<template>
  <web-view :src="url"></web-view>
</template>
<script>
  export default {
    data() {
      return {
        url: ''
      };
    },
    onLoad(options) {
      // 解码URL避免参数丢失
      this.url = decodeURIComponent(options.url);
    }
  };
</script>
```
2. 然后使用uni.navigateTo方法跳转到web-view页面，跳转链接需要带上URL。
```Vue
uni.navigateTo({
  url: `/pages/openweb/openweb?url=${encodeURIComponent('https://www.huawei.com/')}`
})
```
3. plus方法plus.runtime.openURL会根据URL协议唤起系统对应能力或第三方应用去处理URL，而uni-app官方提供了该plus接口的[替代插件](https://ext.dcloud.net.cn/plugin?id=17828)，并且已经适配了HarmonyOS平台。将插件引入项目后，即可使用openSchema方法打开URL链接。
```Vue
// 通过uts-openSchema插件拉起系统默认浏览器加载URL
openSchema('https://www.huawei.com/')
```

4. plus方法plus.runtime.openFile调用系统应用打开本地文件，uni-app有替代的API参考[uni.openDocument](https://uniapp.dcloud.net.cn/api/file/file.html#opendocument)。
```Vue
uni.openDocument({
  filePath: '/static/测试.docx',
  showMenu: true,
  success: function(res) {
    console.info('打开文档成功');
  }
})
```

## 说明
1. plus方法plus.runtime.openURL需要通过[uts-openSchema](https://ext.dcloud.net.cn/plugin?id=17828#detail)插件替代。使用本示例前，要手动下载[uts-openSchema](https://ext.dcloud.net.cn/plugin?id=17828#detail)插件。

## 约束与限制
* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用HBuilderX 4.87、DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 工程目录
```
├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json                                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs                           // harmony工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
├─pages
│  └─index
│      └─index.vue                          // 首页
│          
└─static                                    // 静态资源文件的插件
└─uni_modules                               // 插件目录，用于存放uni-app的插件
```


## 参考文档
[新开页面打开文档](https://uniapp.dcloud.net.cn/api/file/file.html#opendocument)<br>
[web-view](https://uniapp.dcloud.net.cn/component/web-view.html#web-view)