精华内容
下载资源
问答
  • 小程序打开h5
    千次阅读
    2018-09-13 11:06:40

    第一个页面,点击这个页面,跳转到h5的页面

    <view class="jumprow" bindtap='jumpToUcard'>
      <text class="jump-title">苏鹰卡的使用规则</text>
      <view class="arrow-right"></view>
    </view>
    
    
    jumpToUcard: function() {
      App.WxService.navigateTo('../ucard/ucard');
    },

    第二个页面,因为web-view组件可以承载网页,并且会自动铺满整个小程序页面,所以需要第二个页面来支持它

    跳转的地址是要配置业务域名的,必须是https开头的

    <view class="container">
      <view class="pageH5">
        <web-view src="https://此处是链接地址.html"></web-view>
      </view>
    </view>

     

     

     

    更多相关内容
  • 业务场景: 小程序内嵌了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
    直接就能跳转返回了,有问题可以留言,一起解决

    展开全文
  • 如题,微信小程序业务域名配置上限是200个,微信小程序中需要打开的广告H5链接太多了,有没有办法在不配置业务域名的情况下打开这些h5呢,有经验的大拿请赐教,感激不尽
  • 小程序打开H5页面,需要使用web-view组件 web-view组件是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。 会自动铺满屏幕,意思就是说你的页面只要有了web-view组件,其他内容就...

    在小程序中打开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>
    

     

    展开全文
  • 主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 有时候小程序会引用一些wap页面,但是wap页面里有一些点击跳转的地方还是wap,我想让他在小程序里时点击跳转小程序。 例如:列表页里的一个按钮#clickDetail,在wap站里点击跳转wap详情页,如果在小程序里点击就跳...

    有时候小程序会引用一些wap页面,但是wap页面里有一些点击跳转的地方还是wap,我想让他在小程序里时点击跳转小程序。

    例如:列表页里的一个按钮#clickDetail ,在wap站里点击跳转wap详情页,如果在小程序里点击就跳小程序详情

    具体如下

        $('#clickDetail').on('click',function(){
            if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
                document.addEventListener('WeixinJSBridgeReady', ready, false)
                window.location.href="https://www.baidu.com";//wap页要跳转的地址
            } else {
                ready()
            }
            function ready() {
                console.log(window.__wxjs_environment === 'miniprogram') // true
                wx.navigateTo({ //小程序要跳转的地址
                    url: '../community_detail/comDetail?communityId=' + communityid + '&cityId=' + cityId
                });
            }
        });

    通过上述代码就可以实现wap和小程序分别跳转了,貌似看着没问题,但是,当在微信搜索里搜这个wap页 在点击跳转的时候,发现点击按钮不跳转了,

    原来,在微信浏览器里打开时也默认走了else的方法,就是小程序的点击方法,所以,这时候需要在判断页面是在小程序打开,还是微信浏览器打开

    最终代码如下

    $('#clickDetail').on('click',function(){
        if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
            document.addEventListener('WeixinJSBridgeReady', ready, false)
            window.location.href="https://www.baidu.com";//wap页要跳转的地址
        } else {
            ready()
        }
    
    });
    
    function ready() {
        console.log(window.__wxjs_environment === 'miniprogram') // true
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
        //ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
        wx.miniProgram.getEnv((res)=>{
                if (!res.miniprogram) {//不在小程序
                    window.location.href="https://www.baidu.com";//wap页要跳转的地址
                }else { //小程序要跳转的地址
                    wx.navigateTo({
                        url: '../community_detail/comDetail?communityId=' + communityid + '&cityId=' + cityId
                    });
                }
            })
        }
    }
    

     

    或者直接判断

    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        //ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
        wx.miniProgram.getEnv((res)=>{
            if (res.miniprogram) {
                console.log("在小程序里");
            } else {
                console.log("不在小程序里");
                window.location.href="https://m.5i5j.com/bj/xiaoqu/345556.html";
            }
        })
    }else{
        console.log('不在微信里');
    }

    最后,注意不要忘了引用

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

    展开全文
  • 这种需求在小程序中很常见,如下图所示: 第一步 首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。 在 page 目录新建一个页面(与创建普通页面方法一致),如下图所示: ...
  • 现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我…… whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成。 最后和产品商量之后的决定是...
  • 微信小程序H5页面

    2021-03-29 17:13:33
    web-view中设置跳转h5的链接,可以加上需要的参数: (此图片来源于网络,如有侵权,请联系删除! ) tips: 1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的...
  • 微信小程序跳转到H5(打开H5页面)

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

    千次阅读 2021-09-14 19:17:40
    ​​​​​​​获取 URL Scheme | 微信开放文档微信开发者平台文档...《URL Scheme打开小程序》 2. 《获取 access_token》 请求地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&am
  • 背景有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢?实例效果前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联使用小程序开放...
  • 小程序跳转H5页面

    千次阅读 2021-08-26 14:15:14
    小程序不能直接跳转到H5页面,需要内嵌H5页面连接 1、A页面做一个点击事件,触发时间执行方法,由方法跳转到一个新的空页面。 2、空页面如下 <template> <view> <web-view src="https://****....
  • 小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付 目前的流程,外链发送订单请求拿到预支付的prepay_id和其他参数,小程序这边只需要将它传过来...
  • 微信小程序跳转h5页面的方式

    千次阅读 2021-11-23 14:08:32
    通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1、使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二步是 或者 2、通过bindtap方法在js文件中使用wx的api...
  • 微信小程序:从小程序打开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://...
  • 一、小程序内嵌H5 1、前期准备:在微信公众平台小程序开发 --> 开发管理 --> 开发设置中配置业务域名。 2、语句: <web-view src=""></web-view> 3、官方链接:web-view | 微信开放文档 ...
  • 小程序H5页面的相互跳转

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

    千次阅读 2022-01-01 06:16:09
    最近有个需求,需要将微信小程序中一些页面和功能改成h5,这次功能开发的时间有点紧,而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处,所以打算直接转成uni-app。uni-app官网上也有从微信...
  • h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有...
  • 小程序嵌入h5并传值

    千次阅读 2020-12-04 17:50:10
    1、小程序嵌入h5页面使用web-view,这就不多说了,详看小程序官网 2、小程序传值给h5,在web-view的src属性中直接拼接,例如:小程序传token给h5 // 小程序端 <web-view src='h5网址链接?tokenId={{token}}'>&...
  • 2017年1月9日,微信发布小程序,历经3年发展,在今年主题为”未完成 AlwaysBeta“的微信公开课PRO上,微信团队披露,2019年小程序日活跃用户超过3 亿,全年累计成交额达8000亿,同比增长超160%。看到小程序如此惊人...
  • 1.新建一个webview页面,用来展示h5页面 <template> <view> <view> <!-- url为要跳转外链的地址--> <web-view :src="url"> </web-view> </view> </...
  • 项目是一个内嵌在小程序中的H5页面,所有的业务逻辑都在H5页面中. 利用微信小程序提供的web-view进行内嵌 微信小程序相关文档 实现: 1.h5业务代码中先跳转到自己小程序的一个页面,带上参数,包括用户的信息及所要跳转...
  • 这接口是我熬夜写出来的,可以用于ECtouch的H5发起小程序调用微信收货地址,如果看不懂的话,可以进微信>>发现>>小程序搜索:“春意谷成人用品商城”进“春意谷成人用品商城”这个小程序可以看我做的接口演示,...
  • 小程序中有很多好用的API,整个项目我们是用vue实现的,使用小程序的内嵌网页功能完成交互。使用小程序的< web-view >标签将vue项目在小程序中运行。大概的背景就是这样。接下来介绍具体怎么完成微信小程序与...
  • 有两种方法: 1、第一种方法就是直接点击手机的返回键返回,但是在H5页面比较多的情况下,这种方法就不怎么实用了。 2、第二种:可以用JSSDK的接口返回小程序,我们需要在H5...我们在小程序跳转H5H5跳转小程序的时

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,428
精华内容 9,771
关键字:

小程序打开h5

友情链接: 新唐N76E003点亮LED.rar