uni-app 5+app加载nuve项目web版本出现意外效果

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 5+app加载nuve项目web版本出现意外效果

产品分类

uniapp/App

示例代码：

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title></title>  
    <script type="text/javascript">  
      document.addEventListener('plusready', function() {  
        window.location.href = "http://172.17.230.47:8085/mes/eamuni/index.html";  
      });  
    </script>  
  </head>  
  <body>  
  </body>  
</html>

操作步骤：

  1. 用uvue+vue3创建的uniapp项目，打包成web版本；
  2. 放置在服务下(http://172.17.230.47:8085/mes/eamuni/index.html可访问)
  3. 创建5+app空项目，在根index.html中加载(window.location.href = “http://172.17.230.47:8085/mes/eamuni/index.html”;)

预期结果：

  1. 这种技术路线是不是可以？还是不应该，还是有更好的实现方式？
    • 是工程化打包的项目，不能像mui那种每个页面进行拦截，有没有替代方式？
    • 断网或者服务器端不能访问时，该怎么给一个提示，在网络恢复时直接进入到原来的页面(是hash打包成web的方式)
    • 用5+app打包之后有没有更好的调试方式？

实际结果：

  1. 用平板中间的手势操作后退，是整个退出应用，原nvue版本的后退无效
  2. 扫码异常(现在已修改成plus.barcode.create(‘barcode’, [plus.barcode.QR]的方式可以扫码)
  3. 录音原有的api不可用(应该是需要修改为浏览器版本的录音功能)
  4. 自定义组件的弹窗<template><uni-popup ref="popup" type="bottom" background-color="#fff"></uni-popup>被遮挡，现在修改uni-view[name=‘content’]这个层级和宽度已修改好
  5. 在断网情况下，直接进入到一个大大自带的error页面而不是新加载的首页

bug描述：

需求背景：内部隔离网络下使用的app，想动态更新服务端的html即可，不想让员工频繁来技术部安装app

开发环境 版本号 项目创建方式
PC开发环境操作系统 Mac HBuilderX
PC开发环境操作系统版本号 macos
HBuilderX类型 正式
HBuilderX版本号 4.44
手机系统 Android
手机系统版本号 Android 8.1
手机厂商 小米
手机机型 MI PAD 4
页面类型 nvue
vue版本 vue3
打包方式 离线

Harmonyos Next教程
2 回复

第一步：起一个5+空项目，在index.html中写入

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>WebView</title> <script type="text/javascript"> // 确保 plus 对象存在 if (window.plus) { plusReady(); } else { document.addEventListener('plusready', plusReady, false); } 
  function plusReady() {  
    // 创建 WebView  
    var webview = plus.webview.create(  
      'http://192.168.100.102:9005/',  
      "targetWebview", // WebView ID  
      {  
        top: "0px",  
        bottom: "0px",  
        width: "100%",  
        height: "100%"  
      }  
    );  

    webview.show();  

    // 监听返回按钮事件  
    plus.key.addEventListener('backbutton', function() {  
      // 检查 WebView 是否可以返回  
      webview.canBack(function(e) {  
        if (e.canBack) {  
          webview.back(); // WebView 返回上一页  
        } else {  
          // 如果不能返回，提示用户是否退出应用  
          plus.nativeUI.confirm("确定要退出应用吗？", function(e) {  
            if (e.index == 0) {  
              plus.runtime.quit();  
            }  
          }, "提示", ["确定", "取消"]);  
        }  
      });  
    });  
  }  
</script>
</head> <body> </body> </html> 第二步：发型uniapp(nvue)项目成H5项目拿到项目地址，替换http://192.168.100.102:9005/ 注意：需要替换plus环境，如果是纯h5浏览器端则需要换对应的js 扫码需要进行替换：new plus.barcode.Barcode或者plus.barcode.create 录音需要进行替换：

在处理uni-app 5+ App加载nuve项目web版本出现意外效果的问题时，首先需要确保几个关键环节的配置和实现是正确的。以下是一个基本的代码示例和配置检查，帮助你定位和解决可能出现的问题。

1. 确认uni-app项目配置

确保manifest.json中正确配置了5+ App的相关属性，特别是关于nuve的配置。例如：

{
  "mp-weixin": {},
  "app-plus": {
    "usingComponents": true,
    "distribute": {
      "sdkConfigs": {
        "nuve": {
          "appid": "your-nuve-appid",
          "version": "1.0.0"
        }
      }
    }
  }
}

2. 加载nuve项目web版本

在uni-app中加载nuve项目的web版本，通常是通过web-view组件来实现的。确保web-view组件的src属性正确指向了nuve项目的web地址。

<template>
  <view>
    <web-view :src="nuveUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nuveUrl: 'https://your-nuve-project-url.com'
    };
  }
};
</script>

3. 检查网络请求和跨域问题

如果nuve项目的web版本涉及到与后端服务的交互，确保这些请求没有被uni-app或5+ App的安全策略阻止。你可能需要在manifest.json中配置network相关的权限。

{
  "app-plus": {
    "permissions": {
      "Request": {}
    }
  }
}

4. 调试和日志

使用5+ App的开发者工具进行调试，查看控制台输出和网络请求日志，以定位问题所在。例如，检查是否有JS错误、资源加载失败或网络请求被拦截等问题。

5. 示例代码完整性检查

确保所有相关代码文件都已正确引入并初始化。例如，如果使用了Vuex或其他状态管理工具，确保它们已正确配置并在组件中引入。

结论

以上代码和配置示例提供了一个基本的框架，用于检查和解决uni-app 5+ App加载nuve项目web版本时可能出现的意外效果。如果问题依然存在，建议仔细检查nuve项目的web版本本身是否存在问题，或者考虑是否有必要更新uni-app和5+ App的开发框架到最新版本。此外，查阅官方文档和社区论坛也是解决问题的好方法。

回到顶部