Компонент веб-представления uni-app поддерживает загрузку удаленных веб-страниц. В среде приложения он также поддерживает загрузку локальных HTML-страниц.

На странице загрузки веб-представления будет задействовано использование wx, plus, uni и других объектов.

• Используйте wxizapi под существующим апплетом,Нужно представиться Вичатпоставлятьизhttps://res.wx.qq.com/open/js/jweixin-1.4.0.js。
• По умолчанию в существующем приложении есть объект plus.,Нет Нужно представитьсяjsдокумент.
• Независимо от того, находится ли оно под существующим апплетом или существующим приложением,Используйте uniизапи,Нужно представить https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

В этой статье будет подробно описано, как использовать объект uni в веб-просмотре и как взаимодействовать со страницей vue.

Начиная с HBuilderX версии 1.0.0, uni-app поддерживает вызов API uni в веб-просмотре.

Файлы, зависящие от ссылки

Чтобы вызвать API uni в HTML, загруженном веб-представлением, вам необходимо сослаться на необходимый JS-SDK в HTML.

<!-- Вичат JS-SDK Если вам не нужна совместимость с апплетом, нет необходимости ссылаться на это. JS документ. -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni из На SDK должна быть ссылка. -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

Tips

• Эти JS Файлсуществовать web-view Загружаю это HTML из цитируется в файле вместо uni-app В проектеиздокумент.
• Если не рассматривать Вичат Мини программа,Вичатиз представлять не нужно JS-SDK。
• Когда два файла импортируются одновременно,Обратите внимание на порядок введения из,Вичатизнуждатьсясуществоватьвперед。

Время звонка

существовать Файлы,зависящие от ссылкиназад,нуждатьсясуществовать HTML средний мониторинг UniAppJSBridgeReady Только после того, как событие сработает, его можно безопасно вызвать. uni из API。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('Текущая среда:' + JSON.stringify(res));  
    });  
});

Переход на страницу

Поддержка звонков всем из uni Методы маршрутизации могут быть реализованы HTML Вернитесь на страницу приложения.

После существования UniAppJSBridgeReady вызовите метод маршрутизации, чтобы перейти на страницу внутри приложения.

document.addEventListener('UniAppJSBridgeReady', function() {  
    document.querySelector('.btn-list').addEventListener('click', function(evt) {  
        var target = evt.target;  
        if (target.tagName === 'BUTTON') {  
            var action = target.getAttribute('data-action');  
            if(action === 'navigateTo') {  
                uni.navigateTo({  
                    url: '/pages/component/button/button'  
                });  
            }  
        }  
    });  
});

Отправить сообщение

может пройти uni.postMessage существовать HTML Среднее приложение Отправить сообщение. Для реализации этой функции необходимо выполнить следующие два шага.

Прослушайте событие сообщения веб-просмотра

монитор web-view Компоненты message событие,Ранназадсуществоватьсобытиеперезвонитьиз event.detail.data Получите переданное сообщение.

<template>  
    <view>  
        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleMessage(evt) {  
                console.log('Получено сообщение: ' + JSON.stringify(evt.detail.data));  
            }  
        }  
    }  
</script>

от HTML к приложению Отправить сообщение

uni.postMessage Формат параметра носителя должен быть data: {}. Другими словами, доставка информации сообщения должна существовать. data в этом объекте.

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.postMessage({  
        data: {  
            action: 'postMessage'  
        }  
    });  
});

каждое исполнение postMessage Наконец, переданное сообщение будет сохранено в виде массива. Следовательно, существовать web-view из message обратный вызов события, полученный из event.detail.data из значений является массивом.

Получить текущую информацию об окружающей среде

HTML существуют В разных средах вам может потребоваться выполнять разные операции или доставлять разные сообщения. может пройти uni.getEnv() Метод получения текущей информации об окружающей среде.

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        if (res.plus) {  
            console.log('Текущая среда для【5+App】');  
        } else if (res.miniprogram) {  
            console.log('когдавпередсредадля【Вичат Мини программа】');  
        }  
    });  
});

Собственный HTML

с HBuilderX v1.1.0 и выше,существовать 5+App Под платформой web-view Поддержка загрузки в приложении из HTML ресурс. местныйиз HTML Ресурсы должны храниться в том месте существования, которое указано в каталоге, то есть uni-app проект->hybrid->html Оглавление.

├─common      
├─components        
├─hybrid  
│  └─html  
│          test.html        
├─pages              
├─static  
│  App.vue  
│  main.js  
│  manifest.json  
│  pages.json

и html Файл, связанный с css、js Жду местный ресурс, тоже поставлю существовать hybrid->html каталог. Этот гибридный каталог не будет скомпилирован компилятором.,Поэтому файлы vue нельзя размещать здесь.,А другие каталоги не могут поместить местный HTML-документ. В будущем гибридный каталог также будет поддерживать смешанное использование других языков.

Уведомление：существовать Собственный HTML При введении сетевых ресурсов протокол должен быть заполнен. Например: https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js.

Опыт бега

В примере web-view Загрузка — это собственный тестовый адрес, этот тест HTML См. вложение.

• Чтобы загрузить сетевой адрес, вам необходимо локально запустить службу для загрузки сетевого адреса. HTML Вставьте его и измените hello uni-app серединаиз web-view Пример из src Адрес для может получить доступ к адресу локальной сети.
• Если загружается Собственный HTML из, просто создайте новый каталог и используйте его HTML Вставьте его и измените web-view из src для /hybrid/html/test.html Вот и все.
• Справочная документация：web-view

Связь формы компонента веб-представления в приложении и метода работы plus.webview.

Сама страница uni-appizvue представляет собой веб-просмотр.,компонент изweb-view на странице vue,Фактически, это дополнительный веб-просмотр. Однако на странице Vue нельзя разместить несколько компонентов веб-представления. Этот компонент по умолчанию является полноэкранным (он не закрывает собственный заголовок и встроенную навигацию). После использования кода плюса для получения текущего объекта веб-просмотра (см. эту статью https://ask.dcloud.net.cn/article/35036), а затем получения суб-веб-представления, вы также можете получить изplusизwebview, соответствующий компоненту веб-представления, а затем использовать его plus.webviewizrich api. Обратите внимание на время получения дочернего веб-просмотра. Если метод получения выполняется слишком рано, он может быть не получен.