微信小程序之内嵌网页(webview)

简介: 微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个组件来链接我们的HTML页面了。

微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量。

下面我们来看一下具体如何使用。

设置权限

要在小程序中访问外部网页,需要先设置允许访问的业务网站的域名。让我们先登录小程序平台管理后台页面,进入“设置” => "开发设置",可以看到这边多出来了一块“业务域名”的设置区域:

点击“开始配置”按钮,弹出一个窗口,我们可以在这个窗口中添加一个或多个你要在小程序中访问的域名。当然,不是所有的域名下的网页你的小程序都可以访问,只有那些你可以“掌控”的网站,你才可以访问!你需要在这个窗口里下载“校验文件”,并把这个校验文件上传到你的网站的根目录,供小程序平台进行验证,验证通过了才能成功添加域名。

使用web-view组件显示HTML页面

<web-view>组件的使用就比较简单了,类似HTML里面的<iframe>标签:

<web-view src="https://www.xxxxxxxxx.com/index.html" />
AI 代码解读

就这样,HTML页面就可以在小程序中显示了。

但是,和<iframe>可以嵌入到页面的任意部分不同的是,小程序的这个<web-view>总是自动铺满整个页面,且每个页面只能有一个<web-view>,它会覆盖其他组件。也就是说,没有办法实现小程序界面组件和<web-view>页面混排的情况,这点要注意。

在内嵌的HTML页面中跳转回小程序

如果要在已经通过<web-view>嵌入小程序的网页中,跳转到小程序中的其他页面(Page),可以引入微信的一个JSSDK,使用它提供的方法来实现相关跳转功能。网页代码类似如下所示:

<!-- html代码中引入JS SDK -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

<script>
// 跳转到小程序的一个页面
wx.miniProgram.navigateTo({url: '/path/to/page'})
</script>
AI 代码解读

(不过很遗憾,还是没有办法从一个网页中跳转到一个指定的小程序。哈哈,我也就瞎想想~~)

总结

这一内嵌网页的功能,也算顺应了广大开发者的要求,解决了很大一部分开发者的痛点。在混合开发方面的增强,为小程序的功能开发提供了不少灵活性和便利性。

目录
打赏
0
0
0
0
2
分享
相关文章
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
60 1
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
ISO钉钉小程序小程序webview打开nextjs应用异常
ISO钉钉小程序小程序webview打开nextjs应用异常
88 3
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
58 2
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
|
9月前
|
旅游计划定制小程序网页模板源码
旅游计划定制小程序网页模板源码
90 1
基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
163 8
|
9月前
|
【亲测有效】3步实现 微信小程序内接入小程序客服,网页端客服工具与移动端小程序客服工具使用方法,使用入口,并设置当前客服状态
【亲测有效】3步实现 微信小程序内接入小程序客服,网页端客服工具与移动端小程序客服工具使用方法,使用入口,并设置当前客服状态
703 0
基于SpringBoot+Vue+uniapp微信小程序的在线考试与学习交流网页平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线考试与学习交流网页平台的详细设计和实现
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
1424 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等