精华内容
下载资源
问答
  • 小程序打开h5页面
    千次阅读
    2020-05-09 11:29:45

    在小程序中打开H5页面,需要使用web-view组件

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

     

    会自动铺满屏幕,意思就是说你的页面只要有了web-view组件,其他内容就显示不出来啦

     

    需要注意的是 src如果有中文会显示白屏 最好使用encodeURIComponent转义一下url

     

    此组件有几个参数分别 如下

    属性类型默认值必填说明最低版本
    srcstring webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。1.6.4
    bindmessageeventhandler 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组1.6.4
    bindloadeventhandler 网页加载成功时候触发此事件。e.detail = { src }1.6.4
    binderroreventhandler 网页加载失败的时候触发此事件。e.detail = { src }1.6.4

     

    web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有:

    接口名说明最低版本
    wx.miniProgram.navigateTo参数与小程序接口一致1.6.4
    wx.miniProgram.navigateBack参数与小程序接口一致1.6.4
    wx.miniProgram.switchTab参数与小程序接口一致1.6.5
    wx.miniProgram.reLaunch参数与小程序接口一致1.6.5
    wx.miniProgram.redirectTo参数与小程序接口一致1.6.5
    wx.miniProgram.postMessage向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件1.7.1
    wx.miniProgram.getEnv获取当前环境1.7.1

     

    Bug & Tip

    1. tip网页内 iframe 的域名也需要配置到域名白名单。
    2. tip:开发者工具上,可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。
    3. tip:每个页面只能有一个 web-viewweb-view 会自动铺满整个页面,并覆盖其他组件。
    4. tipweb-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
    5. tip:在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 web-view 的 src 后面加个#wechat_redirect解决。
    6. tip:避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent

     

    官方链接

    https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

     

     

    案例代码如下

     

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
      </head>
      <body>
        我是H5页面的内容
        <button onclick="sendmsg()">点我可以让小程序切换页面</button>
    
        <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
        <script>
          function ready() {
            console.log(window.__wxjs_environment === 'miniprogram') // true
          }
          if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
            document.addEventListener('WeixinJSBridgeReady', ready, false)
          } else {
            ready()
          }
          function sendmsg () {
            console.log('点击发送消息')
            wx.miniProgram.navigateTo({url: '/pages/logs/logs'}) // 跳转小程序的页面
            // 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。
            // e.detail = { data },data是多次  postMessage 的参数组成的数组
            // wx.miniProgram.postMessage({ data: { foo: 'bar' } }) 
          }
        </script>
      </body>
    </html>

     

    <!--index.wxml-->
    <view class="container">  
      <web-view src="http://192.168.3.86:8000/" bindmessage="bindMessage"></web-view>
    </view>
    

     

    更多相关内容
  • 这种需求在小程序中很常见,如下图所示: 第一步 首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。 在 page 目录新建一个页面(与创建普通页面方法一致),如下图所示: ...

    前言

    本文将从 0 到 1,一步步拆分,详细介绍如何实现该功能。

    这种需求在小程序中很常见,如下图所示:

    在这里插入图片描述

    第一步

    首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。

    page 目录新建一个页面(与创建普通页面方法一致),如下图所示:
    在这里插入图片描述

    第二步

    设置 webview 页面,用于接收业务跳转的网页链接。

    打开刚刚创建的文件,您只需动 wxml / js 文件即可,复制以下代码:

    <web-view
    src
    展开全文
  • 微信小程序跳转到H5(打开H5页面

    万次阅读 2020-07-28 10:33:18
    在我们实际开发的过程中,有些场景需要从微信小程序跳转到H5页面,使用web-view组件就可以了; 实现的方式也很简单,具体实现方式如下: 1 小程序如果要正式发布的话,需要配置业务域名并上传验证文件。 a 域名...

    在我们实际开发的过程中,有些场景需要从微信小程序跳转到H5页面,使用web-view组件就可以了;

    实现的方式也很简单,具体实现方式如下:

    1  小程序如果要正式发布的话,需要配置业务域名并上传验证文件。

        a  域名需要备案好的一级域名。
        b  配置HTTPS 证书。
        c  进入到小程序后台 https://developers.weixin.qq.com 设置-开发设置 -业务域名

        d 载校验文件,并将文件放置在域名根目录下。配置好了以上几步就可以进行正常的跳转了

    相关配置项,在开发选项中都可以配置,这个根据你项目开发的实际需要配置即可;

    2 需要注意的是,我们在开发的过程中,要在开发者工具中,设置不校验合法域名、web-view(业务域名)等

    以上工作完成后,就可以实现跳转了;

    代码如下:

    新建一个page(link.wxml)页面,用来放web-view组件

    点击跳转的页面js逻辑:

    link.wxml代码

    link.js

    以上就是实现跳转的方式,希望对你有所帮助。

     

    展开全文
  • 主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 业务场景: 小程序内嵌了H5页面,现在有业务需要跳回到小程序。 1.页面需要登陆、没有登录跳到登录页。(login)。 2. 没有该块业务权限跳转到tabbar主页。(index)。 首先需要在H5页面里引入js <script type=...

    业务场景: 小程序内嵌了H5页面,现在有业务需要跳回到小程序。
    1.页面需要登陆、没有登录跳到登录页。(login)。
    2. 没有该块业务权限跳转到tabbar主页。(index)。

    首先需要在H5页面里引入js

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    

    需要跳转的某一步直接写 wx…

    注意:跳转到tab页面 和 跳转到其他页面用的方法不一样。用错的话会不跳转。

    1. 跳转到其他页面非tabbar
      在这里插入图片描述
      wx.miniProgram.navigateTo({url : ‘您需要跳转的小程序地址’});

    2.跳转到tabbar

    在这里插入图片描述

    wx.miniProgram.switchTab({url : ‘/pages/index/index’});

    附上官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
    直接就能跳转返回了,有问题可以留言,一起解决

    展开全文
  • 微信小程序H5页面

    2021-03-29 17:13:33
    web-view中设置跳转h5的链接,可以加上需要的参数: (此图片来源于网络,如有侵权,请联系删除! ) tips: 1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的...
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 最后和产品商量之后的决定是:小程序中特有的营销推广的页面,用小程序编写,剩下的黄金流程,内嵌H5解决。 听起来好像很简单,but,没有想象中那么简单。 判断是否在小程序中 这个问题,网上一搜,答案很多,有说用...
  • 小程序跳转H5页面

    千次阅读 2021-08-26 14:15:14
    小程序不能直接跳转到H5页面,需要内嵌H5页面连接 1、A页面做一个点击事件,触发时间执行方法,由方法跳转到一个新的空页面。 2、空页面如下 <template> <view> <web-view src="https://****....
  • 背景有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢?实例效果前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联使用小程序开放...
  • 小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付 目前的流程,外链发送订单请求拿到预支付的prepay_id和其他参数,小程序这边只需要将它传过来...
  • h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有...
  • 这篇文章主要介绍了微信小程序H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram ...
  • 小程序web-view调用H5页面发起小程序抽取微信地址示例代码。 这接口是我熬夜写出来的,可以用于ECtouch的H5发起小程序调用微信收货地址,如果看不懂的话,可以进微信>>发现>>小程序搜索:“春意谷成人用品商城”进...
  • 有时候小程序会引用一些wap页面,但是wap页面里有一些点击跳转的地方还是wap,我想让他在小程序里时点击跳转小程序。 例如:列表页里的一个按钮#clickDetail,在wap站里点击跳转wap详情页,如果在小程序里点击就跳...
  • 微信小程序怎么跳转H5页面

    千次阅读 2020-11-27 16:07:01
    可以看到微信官方文档中,微信小程序提供了承载网页的容器: web-view,通过这个容器,其实可以实现在小程序打开一个H5页面。也就是可以在小程序中设置一个空白页面,专门用于打开此类外部H5页面。具体做法如下: ...
  • 微信小程序嵌入 H5 页面(web-view)

    千次阅读 2022-05-13 15:53:38
    页面中的 iframe ,方便我们在微信小程序打开一个 H5 页面; 官网描述: 承载网页的容器;会自动铺满整个小程序页面,个人类型的小程序暂不支持使用;所以使用这个组件,必须是在企业号小程序里面; 使用: 1、...
  • 一、小程序内嵌H5 1、前期准备:在微信公众平台小程序开发 --> 开发管理 --> 开发设置中配置业务域名。 2、语句: <... 4、注意点:1、src打开网页的域名必须跟小程序的业务域名保持一致。 ...
  • 项目是一个内嵌在小程序中的H5页面,所有的业务逻辑都在H5页面中. 利用微信小程序提供的web-view进行内嵌 微信小程序相关文档 实现: 1.h5业务代码中先跳转到自己小程序的一个页面,带上参数,包括用户的信息及所要跳转...
  • 如题,微信小程序业务域名配置上限是200个,微信小程序中需要打开的广告H5链接太多了,有没有办法在不配置业务域名的情况下打开这些h5呢,有经验的大拿请赐教,感激不尽
  • H5页面打开微信小程序

    千次阅读 2022-04-27 20:56:44
    背景:用于实现外部H5页面中实现打开微信小程序的功能(微信内打开请使用微信开放标签方式),用户在网页中一键唤起小程序,能够给用户提供更好的体验。采用的技术是URL Scheme,是微信小程序后台生成一种地址,适用于...
  • 微信小程序跳转h5页面的方式

    千次阅读 2021-11-23 14:08:32
    通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1、使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二步是 或者 2、通过bindtap方法在js文件中使用wx的api...
  • 小程序内嵌H5刷新

    2022-07-05 22:40:42
    小程序内嵌H5实现强制刷新
  • taro小程序跳转h5页面

    千次阅读 2019-12-02 11:37:08
    微信小程序跳转h5页面 项目架构-tarojs+react+sass+微信开发者工具 项目使用taro官网上面的步骤构建起来的项目架构,之后生成微信端的小程序,由于项目与车险有关,需要多个渠道融合在一起,所以避免不了要调用...
  • 扫描二维码 打开 小程序或是H5网页

    千次阅读 2021-01-21 16:23:06
    最近在做一个的项目,有一个需求是扫码查看信息详情 扫描的情况可能是使用微信扫描,或是其他扫描 ...方案二:H5+微信小程序的普通二维码跳转小程序 方案三:使用微信小程序生成无限制二维码 首先去.
  • 微信小程序:从小程序打开H5页面

    万次阅读 2019-07-11 11:25:10
    1.样式 2.两个wxml 第一个wxml <view > <navigator url="../testH5/... 点击跳转到H5页面 </navigator> </view> 第二个wxml <view> <view> <web-view src="https://...
  • 但由于微信小程序本身的限制,企业主体的小程序必须配置业务域名,才能在web-view中跳转H5页面。因此当小程序使用落地页时产生外部请求,就会遇到无法打开非业务域名链接的问题。从微信公众平台...
  • 小程序打开h5链接

    千次阅读 2018-09-13 11:06:40
    第一个页面,点击这个页面,跳转到h5页面 &lt;view class="jumprow" bindtap='jumpToUcard'&gt; &lt;text class="jump-title"&gt;苏鹰卡的使用规则&lt;/text&gt; ...
  • 小程序如何跳转h5页面

    千次阅读 2020-12-29 06:51:32
    小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面。1.配置业务域名小程序账号必须是企业账号,个人和海外账号暂不支持,只有企业账号才能看到业务域名...
  • 小程序H5页面的相互跳转

    千次阅读 2021-02-12 01:27:16
    一、小程序h5页面小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面,也就是说h5页面的跳转是在小程序的环境下打开的。需要在小程序里建立一个空白页...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,701
精华内容 7,880
关键字:

小程序打开h5页面