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

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"
						}
					}
				}
			]
		},