前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序中 web-view 组件渲染外部 h5页面如何使用?

微信小程序中 web-view 组件渲染外部 h5页面如何使用?

作者头像
跟着飞哥学编程
发布2022-12-02 15:47:20
1.7K0
发布2022-12-02 15:47:20
举报

目录

官方文档说明

web-view

功能描述

1、先创建一个空白 webview 页面

2、小程序内部的跳转按钮

3、当前小程序需要设置业务域名白名单,否则会提示你不支持打开外部地址。

4、重新测试小程序跳转 H5 页面


官方文档说明

web-view | 微信开放文档

web-view

基础库 1.6.4 开始支持,低版本需做兼容处理

小程序插件:不支持 微信 Windows 版:支持 微信 Mac 版:支持

功能描述

承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。

客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效

 具体如何使用呢?

应用场景,我现在需要在当前小程序内部打开一个如下链接的 h5 页面

授权认证采集平台

这个连接中有一个get传参 param1=test

1、先创建一个空白 webview 页面

preview.vue页面 

代码语言:javascript
复制
<template>
	<view class="content">
		<web-view :src="url"></web-view>
		<button @click="wx.miniProgram.reLaunch({url: '/pages/ucenter/ucenter'})">返回小程序</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 最终显示在web-view中的路径
			url: '',
			biz_token:''
		};
	},
	onLoad(e) {
		console.log("h5url:"+e.url);
		console.log("h5 get biz_token:"+e.biz_token);
		this.url=e.url+"?biz_token="+e.biz_token;
		// h5 和 安卓 都使用,使用h5访问的时候记得跨域
		// this.url = `${this.viewerUrl}?nsrsbh=${encodeURIComponent(this.nsrsbh)}`;
	},
	methods: {}
};
</script>

<style>
</style>

2、小程序内部的跳转按钮

这里我只是演示,您可根据自身需要通过按钮或导航等方式实现跳转h5链接。

代码语言:javascript
复制
<view class="item"><navigator url="/pages/webview/preview?url=https://tax.btonline365.com/api/domain&biz_token=013D323BC613A517C69BEE4AE9718EE9" class="btn"><image src="/static/img/personal/user_b3.png"></image>跳转外部H5</navigator></view>

注意这里我的跳转url 是 web-view 组件所在的页面,

参数url = https://tax.btonline365.com/api/domain&biz_token=013D323BC613A517C69BEE4AE9718EE9

才是我们要打开的 h5 页面地址和所带的参数。

3、当前小程序需要设置业务域名白名单,否则会提示你不支持打开外部地址。

接下来添加域名白名单,登录小程序后台,开发管理》开发设置》 

 下拉页面,找到 业务域名设置

 这里我想配置 跟着飞哥学编程的博客_CSDN博客-java,计算机基础,微信小程序领域博主 这个地址是无法配置的,因为服务器上需要放置校验文件,所以我还是用我能访问到的服务器来做测试。

4、重新测试小程序跳转 H5 页面

这次就可以正常打开了。 

后续我再分享关于 微信小程序 和 H5 页面之间更多高阶用法,喜欢博主的,可以榜博主点个免费的关注,持续关注博主关于小程序的案例分享。感觉小编的分享对您有帮助的话,麻烦动动您发财的小手,点赞、收藏+评论哦^_^

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 官方文档说明
  • web-view
    • 功能描述
    • 1、先创建一个空白 webview 页面
    • 2、小程序内部的跳转按钮
    • 3、当前小程序需要设置业务域名白名单,否则会提示你不支持打开外部地址。
    • 4、重新测试小程序跳转 H5 页面
    相关产品与服务
    云开发 CloudBase
    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档