小程序web-view引入h5手机站页面的方法

  • A+
所属分类技术宅

web-view

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

web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

属性名 类型 说明
src String webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。
bindmessage EventHandler 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }

示例代码:

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
Bug & Tip
  1. 网页内iframe的域名也需要配置到域名白名单。
  2. 开发者工具上,可以在 <web-view/> 组件上通过右键 - 调试,打开 <web-view/> 组件的调试。
  3. 每个页面只能有一个<web-view/><web-view/>会自动铺满整个页面,并覆盖其他组件。
  4. <web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。
  5. 在iOS中,若存在JSSDK接口调用无响应的情况,可在<web-view/>的src后面加个#wechat_redirect解决。
mlogo
  • 绝大多数中小微企业因无人员、无技术、资金少而难以实现互联网化或移动营销。如何教会他们使用互联网,帮助他们从互联网尤其是移动互联网中获得更多商机和生意,是我们的使命。
广告位

发表评论

看不清?点击更换

欢迎大家盖楼评论,头像就看运气啦....