uniapp web-view示例(微信小程序)

周周池

已于 2022-02-08 10:49:26 修改

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签：前端微信小程序 webview

于 2022-02-08 10:21:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45444562/article/details/122818908

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在uniapp中使用web-view组件嵌套H5网页，应用于微信小程序。通过web-view，可以将网页内容无缝集成到小程序中，实现页面间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp web-view示例(微信小程序)

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

需求：需要把H5网页嵌套入uniapp开发的微信小程序。

用vuex当做仓库保存web-view路径,跳转到pages/webview/index

navigateToMineDay(url, type) {
				if (type == 'webView') {
					let myurl_ = appUrl + `/h5/#/pages/Stfj/wxgz_logln/wxgz_login?uid=${this.UserInfo.id}`
					this.$store.dispatch('SUpdatewebViewUrl',myurl_)
					setTimeout(() => {
						uni.navigateTo({
							url: `../webview/index`
						})
					}, 0)
				} else {
					uni.navigateTo({
						url: `${url}`
					})
				}
			}

pages/webview/index:

<template>
	<view class="Page">
		<web-view :src="webViewUrl"></web-view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {}
		},
		computed: {
			...mapState({
				webViewUrl: state => state.webViewUrl
			})
		}
	}
</script>

<style lang="scss">
</style>

pages.json:

{
			"root": "pages/webview",
			"pages": [{
					"path": "index",
					"style": {
						"navigationBarTextStyle": "black",
						"navigationBarBackgroundColor":"#FFFFFF",
						"backgroundColor":"#f7f7f7",
						"app-plus": {
							"bounce": "none"
						}
					}
				}
			]
		},