NativeScript-vue: не удается отобразить локальный HTML-код в WebView


NativeScript-vue: не удается отобразить локальный HTML-код в WebView

08.11.2020 05:29:45 Просмотров 69 Источник

Я использую NativeScript-vue.

Я хочу использовать WebView для отображения HTML-файла в локальном активе.

src/components/App.vue:

<template>
  <Frame>
    <Page>
      <GridLayout columns="*" rows="*">
        <WebView row="0" col="0" src="~/assets/index.html" />
      </GridLayout>
    </Page>
  </Frame>
</template>

src/main.ts:

import Vue from 'nativescript-vue';
import App from './components/App.vue';

new Vue({
  render: h => h(App)
}).$start();

src/assets/index.html:

<html>
  <body>
    <div>test</div>
  </body>
</html>

App_Resources/Android/src/main/AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="__PACKAGE__"
    android:versionCode="10000"
    android:versionName="1.0">

    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"/>

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true">

        <activity
            android:name="com.tns.NativeScriptActivity"
            android:label="@string/title_activity_kimera"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
            android:theme="@style/LaunchScreenTheme">

            <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.tns.ErrorReportActivity"/>
    </application>
</manifest>

Теперь, когда я запускаю это приложение на эмуляторе Android, я получаю ошибку "ERR_ACCESS_DENIED".

enter image description here

Такая же ситуация и с реальным устройством, а не с эмулятором.

Есть ли какая-то возможная причина?

Окружающая среда:

  • НПМ:
    • @nativescript/core: 7.0.3
    • nativescript-socketio: 3.3.1
    • nativescript-vue: 2.8.1
  • Эмулятор: API 30, Android 11.0, x86

Любопытно, что он отлично работает с эмулятором Android 10.0 (API 29, x86).

android vue.js nativescript nativescript-vue
У вопроса есть решение - Посмотреть?

Ответы - NativeScript-vue: не удается отобразить локальный HTML-код в WebView / NativeScript-vue: Unable to display local HTML in WebView

Является ответом!
tekunikaruza

09.11.2020 02:37:38

Оказывается, в Android 11.0 и более поздних версиях доступ к файлам по умолчанию запрещен!

Ссылка Для Разработчиков Android: WebSettings

Значение по умолчанию равно true для приложений, ориентированных на сборку.VERSION_CODES.Q и ниже, а также false при таргетинге сборки.VERSION_CODES.R и выше.

разрешенный код

src/components/App.vue:

<template>
  <Frame>
    <Page>
      <GridLayout columns="*" rows="*">
        <WebView row="0" col="0" @loaded="webViewLoaded" />
      </GridLayout>
    </Page>
  </Frame>
</template>

<script lang="ts">
export default {
  methods: {
    webViewLoaded(args) {
      if (args.object.android) {
        args.object.android.getSettings().setAllowFileAccess(true); // IMPORTANT!!
        args.object.src = "~/assets/map/index.html"; // Load local HTML.
      }
    },
  },
};
</script>
Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X