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

微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌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" />

就这样,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>

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

总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PHP在线

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

336100
来自专栏zaking's

走进webpack(3)-- 小结

  写这一系列的文章,本意是想要梳理一下自己凌乱的webpack知识,只是使用过vue-cli,修改过其中的一部分代码,但是对于一个简单项目从0开始搭建webp...

36270
来自专栏河湾欢儿的专栏

pc移动中常用的meta标签

字符编码:声明文档使用的字符编码 相对于这种方式,更推荐你(推荐使用HTML5的声明方式)。

10950
来自专栏Golang语言社区

golang基于redis lua封装的优先级去重队列

作者: 峰云 博客: http://xiaorui.cc 前言: 前两天由于某几个厂商的api出问题,导致后台任务大量堆积,又因为我这边任务流系统会重试超时任务...

42990
来自专栏崔庆才的专栏

代理的基本原理

48030
来自专栏腾讯云服务器团队的专栏

如何利用SCF实现定时开关机的功能

随着腾讯云的企业用户越来越多,而企业的场景也是多样化的,一方面作为云服务商需要不断地完善产品能力以满足更多业务需求,另一方面作为云用户其实也是可以利用已有的一些...

5.7K150
来自专栏王大锤

github for Mac 教程

39660
来自专栏葡萄城控件技术团队

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

209100
来自专栏Golang语言社区

golang基于redis lua封装的优先级去重队列

前言: 前两天由于某几个厂商的api出问题,导致后台任务大量堆积,又因为我这边任务流系统会重试超时任务,所以导致队列中有大量的重复任务。这时候我们要临时解决两个...

363110
来自专栏软件测试经验与教训

ADB命令集锦

在测试APP时,我们常常会用到adb命令来协助测试,那么adb命令到底是什么?有什么用?怎么用?

28150

扫码关注云+社区

领取腾讯云代金券