微信小程序之内嵌网页(webview)
2024-10-18 21:17:33
设置权限
要在小程序中访问外部网页,需要先设置允许访问的业务网站的域名。让我们先登录小程序平台管理后台页面,进入“设置” => "开发设置",可以看到这边多出来了一块“业务域名”的设置区域:
点击“开始配置”按钮,弹出一个窗口,我们可以在这个窗口中添加一个或多个你要在小程序中访问的域名。当然,不是所有的域名下的网页你的小程序都可以访问,只有那些你可以“掌控”的网站,你才可以访问!你需要在这个窗口里下载“校验文件”,并把这个校验文件上传到你的网站的根目录,供小程序平台进行验证,验证通过了才能成功添加域名。
使用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>
(不过很遗憾,还是没有办法从一个网页中跳转到一个指定的小程序。哈哈,我也就瞎想想~~)
总结
这一内嵌网页的功能,也算顺应了广大开发者的要求,解决了很大一部分开发者的痛点。在混合开发方面的增强,为小程序的功能开发提供了不少灵活性和便利性。
最新文章
- Selenium 2 入门
- html中表格的制作
- Piwik 扩展获取客户端IP地址
- android studio gradle升级
- 【原创】_INTSIZEOF 内存按照int对齐
- [置顶] VB6基本数据库应用(三):连接数据库与SQL语句的Select语句初步
- python 实现单链表
- Algorithm Part I:Priority Queues
- Codeforces Round #216 (Div. 2) E. Valera and Queries (BIT)
- jQuery中wrap、wrapAll和wrapInner用法以及区别
- swift 2.0 与 OC 相比较,标签栏和导航栏书写的差别
- 【Android Developers Training】 103. 查询当前地点
- MySQL性能基准测试对比:5.7 VS 8.0
- CAS实现单点登录
- scrapy 爬虫的暂停与重启
- CSS字体样式属性
- MapReduce过程<;原创>;
- vue 上实现无缝滚动播放文字系统公告
- android 工具大集合
- VeeValidate配置中文的两种方法