如何在 vue-native 中制作 webview

Posted 2023-02-22

【中文标题】如何在 vue-native 中制作 webview

【英文标题】：how to make webview in vue-native

【发布时间】：2020-01-04 06:18:32

【问题描述】：

我正在尝试使用 vue-native-cli 制作 webview 应用程序

我正在尝试在documents 的帮助下使用 web-view 组件

这是我的页面

<template>
    <web-view
        :source="'https://google.com'"
        :style="marginTop: 20"
    />
</template>

<script>
export default 
  methods: 

  

</script>
<style>

</style>

当我使用时

<view class="text-container">
        <text>Hello World</text>
    </view>

它工作正常，但在 webview 中得到

invarian voilation：元素类型无效

【参考方案1】：

似乎 React Native 的某些部分在底层发生了变化，而 Vue Native 文档尚未更新以解决它。截至 2020 年 3 月的答案：

通过expo install react-native-webview安装webview组件 导入到您的组件中 确保您的 :source 属性将 uri 作为对象传递：

<template>
    <web-view :source="uri:'https://google.com'" />
</template>

<script>
import  WebView  from "react-native-webview";

export default 
  name: "myComponent",
  components: 
    "web-view": WebView
  
;
</script>

【讨论】：

我们也必须添加 originWhitelist:["*"] 怎么样？ <web-view originWhitelist:["*"] source= html: View,

【参考方案2】：

你必须先导入 WebView

import  WebView  from "react-native";
export default 
    components: 
      'web-view': WebView
    ,
;

<template>
    <web-view
        :source="'https://google.com'"
        :style="marginTop: 20"
    />
</template>