微信小程序webView嵌入H5的方法实例

前言

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

tips:个人类型的小程序暂不支持web-viwe引用H5，同时需要在小程序管理后台配置H5的域名为业务域名

方法如下

1.直接引入页面地址；

<web-view :src="url"></web-view>

url为需要跳转的地址，可以用encodeURIComponent对url进行编码,小程序用decodeURIComponent解码，url里面可以用?和&带参,小程序可以直接在onLoad中option接收参数;

2.小程序顶部设置透明；

web-view嵌入的H5页面不能设置透明，只能修改页面顶部的颜色;

  • a.所有页面设置透明（在app.json里面的window增加navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮）;
  • b.单独页面设置透明（在每个单独的json里面增加navigationStyle:custom）；

3.小程序跳转到H5页面

注意：使用redirectTo跳转到H5页面之后，所有嵌入的H5页面没有返回按钮，左侧只有一个返回首页按钮

4.H5跳转到小程序页面

需要引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>才能用参数

wx.miniProgram.switchTab({ url:url}); //跳转到小程序tabbar页，不能传参

wx.miniProgram.navigateTo({ url:url,query:{//填写参数}});//跳转到小程序非tabbar页，可以传参

其他的跳转参考下图

5.H5使用bindmessage向小程序传参

tips：使用bindmessage时只有用户点击了小程序的后退、分享按钮或者是小程序嵌入的H5页面销毁才能触发参数的传递，否则是不会触发。

6.H5使用其他小程序的接口，可以参考API，因为我自己没有涉及到，所以给个链接给大家参考

参考链接：developers.weixin.qq.com/miniprogram…

总结

到此这篇关于微信小程序webView嵌入H5的文章就介绍到这了,更多相关微信小程序webView嵌入H5内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序webview与h5通过postMessage实现实时通讯的实现

    在做 React Native 应用时,如果需要在 App 里面内嵌 H5 页面,那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯,但是在小程序里面,虽然也提供了一个 webview 组件,但是,在进行 postMessage 通讯时,官方文档里面给出了一条很变态的说明: 网页向小程序 postMessage 时,会在特定时机(小程序后退.组件销毁.分享)触发并收到消息.e.detail = { data },data 是多次 postMess

  • 微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    前言 小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了.我们今天来讲一讲.在小程序的webview里实现微信支付功能.因为微信不允许在小程序的webview里直接调起微信支付.所以我们这节课就要涉及到小程序和webview的交互了. 老规矩先看效果. 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来. https://v.qq.com/x/page/t0913ipr

  • 微信小程序webView嵌入H5的方法实例

    微信小程序webView嵌入H5的方法实例

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

  • 微信小程序冒泡事件及其阻止方法实例分析

    微信小程序冒泡事件及其阻止方法实例分析

    本文实例讲述了微信小程序冒泡事件及其阻止方法.分享给大家供大家参考,具体如下: 事件的类别分为几种: 点击事件:tap 长按事件:longtap 触摸事件:touchstart: touchend:touchcancel:touchmove 其他:input:submit.... 其中前三类是冒泡事件,其他的称为非冒泡事件. 写一个简单的例子,代码就不一一贴出来了,WXML的文件如下: <view class='redview' bindtap='redclick'> 红色 <view

  • 微信小程序地图定位的实现方法实例

    微信小程序地图定位的实现方法实例

    目录 前言 方法如下 总结: 前言 地图定位这个功能大家都很熟悉吧,那微信小程序中要怎么实现地图定位呢,其实非常简单,没有大家想象中那么难,看完本篇文章,你也可以轻松实现这个小功能哦. 方法如下 1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦,非常简单的两行代码. <input placeholder="请选择地址..." value="{{mapName}}"></input> <button bindtap="

  • 微信小程序web-view环境下H5跳转小程序页面方法实例代码

    目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="

  • 微信小程序web-view不支持打开非业务域名https //XXXX 请重新配置的解决办法

    微信小程序web-view不支持打开非业务域名https //XXXX 请重新配置的解决办法

    目录 发现问题 解决方法 总结 发现问题 微信小程序提供web-view,可以在小程序中加载网页 我在微信公众平台中的开发管理—>开发设置中对于服务器域名中的request合法域名进行了正确设置,但是在微信开发者工具中仍然无法跳转网页,显示不支持打开非业务域名https //XXXX 请重新配置 解决方法 网上查找了很久资料,后来在官方文档中发现了问题所在,配置服务器域名是不够的,需要管理后台中配置业务域名 官方介绍文档在这里 但是还有一个最大的问题,个人类型的小程序暂不支持使用 orz 我的小

  • 微信小程序之选项卡的实现方法

    微信小程序之选项卡的实现方法

     微信小程序之选项卡的实现方法 前言: 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能. 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: 实现代码: 页面代码: <view class="swiper-tab"> <view class="swiper-

  • 微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x

  • 微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&

随机推荐