uni-app 打包apk时 web-view 不显示内容,一片空白

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

uni-app 打包apk时 web-view 不显示内容,一片空白

示例代码:

<web-view :style="viewStyle" allow :fullscreen="true" :webview-styles="webviewStyles" src="http://zwfw.dsj.lankao.gov.cn/webSite/article/index.do?articleId=3740580292"></web-view>

操作步骤:

直接云打包成apk 在手机上运行

预期结果:

能正常显示webview内容

实际结果:

显示空白页面

bug描述:

uniapp 中使用web-view,用Hbuildex直接运行到手机可以正常查看到页面内容,但是使用云打包/离线打包均显示空白页面

图片:

Image 1 Image 2

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.28
手机系统 Android
手机系统版本号 Android 14
手机厂商 小米
手机机型 红米13pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

3 回复

协议改成https试试


谢谢,原来就是https;也是这样,想改成http试了试,依然如此

在使用uni-app进行Android APK打包时,如果遇到web-view组件不显示内容的问题,可能是由于多种原因导致的。以下是一些常见的问题及其对应的代码解决方案,帮助你排查和解决web-view不显示内容的问题。

1. 确认web-viewsrc属性是否正确

首先,确保web-viewsrc属性指向的是一个有效的URL。如果URL不正确或无法访问,web-view将无法显示内容。

<template>
  <view>
    <web-view src="https://www.example.com"></web-view>
  </view>
</template>

2. 检查网络权限

Android应用默认可能没有网络访问权限,需要在manifest.json中配置网络权限。

"mp-weixin": { // 或其他平台配置
  "appid": "your-appid",
  "setting": {
    "urlCheck": false
  },
  "permission": {
    "scope.userInfo": {
      "desc": "你的用户信息将用于小程序运行"
    },
    "android.permission.INTERNET": {
      "desc": "允许应用访问网络"
    }
  }
}

注意:上述配置示例针对微信小程序,其他平台如HBuilderX打包的Android应用,需在manifest.jsonapp-plusandroid配置块中设置。

3. 启用HTTPS

Android 9(Pie)及以上版本要求默认使用HTTPS协议。如果web-view加载的是HTTP页面,可能会导致加载失败。

4. 跨域问题

如果web-view加载的页面涉及到跨域请求,确保服务器支持CORS(跨源资源共享)。

5. 调试与日志

使用HBuilderX的调试工具查看控制台输出,检查是否有错误信息。如果有,根据错误信息进一步排查。

6. 示例代码与配置

以下是一个完整的web-view使用示例,包括在manifest.json中配置网络权限(以HBuilderX打包为例):

// manifest.json
{
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "INTERNET"
        ]
      }
    }
  }
}
<!-- pages/index/index.vue -->
<template>
  <view>
    <web-view src="https://www.example.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据定义
    };
  },
  methods: {
    // 方法定义
  }
};
</script>

确保以上配置正确无误,并重新打包APK进行测试。如果问题依旧,请检查是否有其他配置或代码问题影响web-view的加载。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!