Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 ceed2f08 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng
1 浏览文件
操作

更新web-view示例

上级 a1f34f14
隐藏空白更改
内联 并排
Showing with 88 addition and 84 deletion
pages/component/web-view/web-view.uvue
浏览文件 @ ceed2f08
<template> <template>
<view class="uni-flex-item"> <view class="uni-flex-item">
<web-view ref="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles" @message="message" <web-view id="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles" @message="message"
@error="error" @loading="loading" @loaded="loaded"> @error="error" @loading="loading" @loaded="loaded">
</web-view> </web-view>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view class="uni-input-v"> <view class="uni-input-v">
<input class="uni-input" confirmType="go" placeholder="输入网址跳转" @confirm="confirm" /> <input class="uni-input" confirmType="go" placeholder="输入网址跳转" @confirm="confirm" />
</view> </view>
<view class="uni-row uni-btn-v"> <view class="uni-row uni-btn-v">
<view class="uni-flex-item"> <view class="uni-flex-item">
<button type="primary" @click="back">后退</button> <button type="primary" @click="back">后退</button>
</view> </view>
<view class="uni-btn-ml uni-flex-item"> <view class="uni-btn-ml uni-flex-item">
<button type="primary" @click="forward">前进</button> <button type="primary" @click="forward">前进</button>
</view> </view>
</view> </view>
<view class="uni-row uni-btn-v"> <view class="uni-row uni-btn-v">
<view class="uni-flex-item"> <view class="uni-flex-item">
<button type="primary" @click="reload">重新加载</button> <button type="primary" @click="reload">重新加载</button>
</view> </view>
<view class="uni-btn-ml uni-flex-item"> <view class="uni-btn-ml uni-flex-item">
<button type="primary" @click="stop">停止加载</button> <button type="primary" @click="stop">停止加载</button>
</view> </view>
</view> </view>
<view class="uni-btn-v"> <view class="uni-btn-v">
<button type="primary" @click="nativeToWeb">原生和Web通信</button> <button type="primary" @click="nativeToWeb">原生和Web通信</button>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
src: 'https://www.baidu.com', src: 'https://www.baidu.com',
webview_styles: { webview_styles: {
progress: { progress: {
color: '#FF3333' color: '#FF3333'
} }
} },
} webviewContext: null as WebviewContext | null
}, }
methods: { },
back() { onReady() {
(this.$refs['web-view'] as IWebViewNode).back(); this.webviewContext = uni.createWebviewContext('web-view', this)
}, },
forward() { methods: {
(this.$refs['web-view'] as IWebViewNode).forward(); back() {
}, this.webviewContext?.back();
reload() { },
(this.$refs['web-view'] as IWebViewNode).reload(); forward() {
}, this.webviewContext?.forward();
stop() { },
(this.$refs['web-view'] as IWebViewNode).stop(); reload() {
}, this.webviewContext?.reload();
nativeToWeb() { },
(this.$refs['web-view'] as IWebViewNode).evalJS("alert('hello uni-app x')"); stop() {
}, this.webviewContext?.stop();
message(event : WebViewMessageEvent) { },
console.log(JSON.stringify(event.detail)); nativeToWeb() {
}, this.webviewContext?.evalJS("alert('hello uni-app x')");
error(event : WebViewErrorEvent) { },
console.log(JSON.stringify(event.detail)); message(event : WebViewMessageEvent) {
}, console.log(JSON.stringify(event.detail));
loading(event : WebViewLoadingEvent) { },
console.log(JSON.stringify(event.type)); error(event : WebViewErrorEvent) {
}, console.log(JSON.stringify(event.detail));
loaded(event : WebViewLoadedEvent) { },
console.log(JSON.stringify(event.type)); loading(event : WebViewLoadingEvent) {
}, console.log(JSON.stringify(event.type));
confirm(event : InputConfirmEvent) { },
console.log(event.detail.value); loaded(event : WebViewLoadedEvent) {
let url = event.detail.value; console.log(JSON.stringify(event.type));
if (!url.startsWith('https://') && !url.startsWith('http://')) { },
url = 'https://' + url; confirm(event : InputConfirmEvent) {
} console.log(event.detail.value);
this.src = url; let url = event.detail.value;
} if (!url.startsWith('https://') && !url.startsWith('http://')) {
} url = 'https://' + url;
} }
this.src = url;
}
}
}
</script> </script>
<style> <style>
.uni-input-v { .uni-input-v {
padding: 10rpx 0; padding: 10rpx 0;
} }
.uni-btn-ml { .uni-btn-ml {
margin-left: 10rpx; margin-left: 10rpx;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或