精华内容
下载资源
问答
  • 微信小程序跳转h5页面

    千次阅读 2019-08-15 20:38:37
    可以打开h5页面微信小程序<web-view>官网地址 属性 类型 默认值 必填 说明 最低版本 src string 否 webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小...

    使用<web-view>  可以打开h5页面  微信小程序<web-view>官网地址

    属性类型默认值必填说明最低版本
    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

    注:src 需要登录小程序管理后台配置业务域名。

    使用:<web-view src = "" ></web-view>

    但是如果要在小程序里面点击,然后跳转h5 的话,需要如下:

    可以新建一个公用的web页面 来写<web-view> </web-view>

    小程序里面------公共web/web.wxml 

    //  pages/web/web.wxml
    
    <web-view src="{{url}}"></web-view>
    
    
    
    //  pages/web/web.js
     onLoad: function (options) {
        console.log(options.url);
        this.setData({
          url: options.url
        })
      },

    小程序里面---------点击页面按钮,跳转h5  

    //  index.wxml
    <span class="to_mall" bindtap="toMall()">积分商城</span>
    
    
    //  index.js
    toMall(){
        wx.navigateTo({
            url:"/pages/web/web?url="+'在小程序后台配置的业务域名/跳转的线上页面地址'
        })
    }

    h5页面里面可以接收通过<web-view></web-view> 跳转过来的url, 然后通过对url 进行参数截取,即可拿到从小程序跳转到h5页面带过来的参数。

    对url参数截图,可以参考:对url链接进行解析、截取

    ----------完。

    展开全文
  • 微信小程序跳转H5网页

    万次阅读 2019-06-17 19:04:54
    小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分...

           小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,小程序还在许多城市实现了支持地铁、公交服务。小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。
           因此小程序与H5网页相互跳转页显得尤为重要,下面我就来给大家分享一下微信小程序跳转到H5网页的方法。
    1、编写跳转按钮相关代码:
           跳转按钮页面代码:

    <view class="container">
      <view class='wrapper'>
        <button class='wepay' bindtap='gooutUrl'>点击跳转到H5页面</button>
      </view>
    </view>
    

           跳转按钮JS代码:

    Page({
      gooutUrl: function () {
        wx.navigateTo({
          url: '../out/out', //
          success: function () {
    
          },       //成功后的回调;
          fail: function () { },         //失败后的回调;
          complete: function () { }      //结束后的回调(成功,失败都会执行)
        })
      }
    })
    
    

    2、跳转页面代码:

    <view class="container">
     <web-view src="https://域名"></web-view>
    </view>
    

    2.1、如果是正式发布需要配置业务域名并上传验证文件。
        1)、域名需要备案好的一级域名。
        2)、配置HTTPS 证书。
        3)、进入到小程序后台 https://developers.weixin.qq.com 设置-开发设置 -业务域名。
    在这里插入图片描述在这里插入图片描述
        4)、下载校验文件,并将文件放置在域名根目录下。
    配置好了以上几步就可以进行正常的跳转了。
    2.2、如果是开发版需要进行一下设置,就可避开域名相关校验。
        1)、如果只是开发测试使用可以避开域名相关校验,避开方法如下所示(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾):

    在这里插入图片描述     2)、设置完成后,点击下图中的真机调试,扫描二维码即可测试跳转效果。
    在这里插入图片描述

    展开全文
  • 小程序中,单独准备一个page 页,使用web-view 放置h5 的url链接,需要提前在小程序后台添加业务域名, h5页面内 引入 <script type="text/javascript" src=...

    最近遇到一个功能,是在小程序中获取用户在公众号中的授权,拿到用户在公众号中的openid
    在小程序中,单独准备一个page 页,使用web-view 放置h5 的url链接,需要提前在小程序后台添加业务域名,
    h5页面内 引入 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    最好是下载到本地,引用本地文件。直接使用线上的话,可能会报错
    在这里插入图片描述

       document.addEventListener("DOMContentLoaded", function (event) {
                wx.miniProgram.switchTab({ url: '/pages/index/index' })
        });
    

    这样就可以跳转回小程序了。

    展开全文
  • console.log(choicetype, listparam) if (choicetype == 2){ //这是根据条件 跳转小程序的, var condition = JSON.stringify(e.currentTarget.dataset.condition); url = "./sale/sale?cityId=" + ...

    WXML:

    hotrecommend 是接口返回的数组

    <view class="helpYouPick" wx:if='{{hotrecommend.length > 0}}'>

        <view class='title'>热门推荐</view>

        <view class="pick_list">

          <scroll-view class="scroll-view_H" scroll-x>

            <view

            bindtap="routerview" 

            class="pick_item_wrap" 

            wx:for="{{hotrecommend}}" 

            wx:key="index"

            data-choiceType='{{item.choice_type}}'

            data-cityId='{{item.city_id}}'

            data-topicCtn='{{item.topic_content}}'

            data-topicType='{{item.topic_type}}'

            data-condition='{{item.condition}}'

            data-targeturl='{{item.targeturl}}'

            data-path='hotrecommend'

            data-index='{{index}}'

            data-title='{{item.title}}'

            >

              <view class="pick_image_wrap">

                <image src="{{item.imgurl}}"></image>

                <view class="title">{{item.title}}</view>

                <view class="title sub_title">{{item.sub_title}}</view>

              </view>

            </view>

          </scroll-view>

        </view>

      </view>

     

    接口:

    js跳转:

      routerview:function(e){

    if(path == 'hotrecommend'){

          var choicetype = e.currentTarget.dataset.choicetype;

          var listparam = e.currentTarget.dataset.topictype;

          console.log(choicetype, listparam)

          if (choicetype == 2){    //这是根据条件 跳转小程序的,

            var condition = JSON.stringify(e.currentTarget.dataset.condition);

            url = "./sale/sale?cityId=" + cityid + "&condition=" + condition

          }else{

            //跳转 H5页面

            var targeturl = JSON.stringify(e.currentTarget.dataset.targeturl);

            targeturl = encodeURIComponent(targeturl)

            url = './webview/webview?url=' + targeturl   

          }

        }

      wx.navigateTo({

              url: url,

        })

    }

     

    WXSS

    .helpYouPick .title,.communitytest .title{

      padding:60rpx 40rpx 42rpx;

      height:40rpx;

      font-size:21px;

      color:rgba(41,43,51,1);

      line-height:20px;

      font-weight: bold;

    }

    .pick_list{

      width:100%;

      height: 350rpx;

    }

    .scroll-view_H{

      /* width:100%; */

      white-space: nowrap;

      height:350rpx;

      display:flex;

      /* align-items:flex-start; */

      /* justify-content: space-between; */

    }

    .scroll-view_H .pick_item_wrap:nth-child(1){

      margin-left:40rpx;

    }

    .community_list .pick_item_wrap:nth-child(1){

      margin-left:0rpx;

    }

    .community_total{

      margin-left:40rpx;

      width:300rpx;

      height:auto;

      display: inline-block;

      /* background:red; */

      margin-right:24rpx;

      position: relative;

    }

    .pick_item_wrap{

      width:300rpx;

      height:312rpx;

      display: inline-block;

      margin-right:24rpx;

      box-shadow:0px 12rpx 30rpx 0px rgba(0, 0, 0, 0.06);

      border-radius:16px;

      overflow: hidden;

    }

    .pick_item_wrap image{

      width:300rpx;

      height:199rpx;

      border-radius:16px 16px 0px 0px;

    }

    .pick_item_wrap .title{

      height:30rpx;

      font-size: 30rpx;

      padding:0 25rpx;

      color:#292B33;

      margin-top: 10rpx;

    }

    .pick_item_wrap .sub_title{

      font-size: 12px;

      color:#9D9DA1;

    }

    .socer{

      padding:0 25rpx;

      font-size: 12px;

      margin-top: 8rpx;

      display:flex;

    }

    .star_wrap{

      display:flex;

      margin-left:14rpx;

    }

    .socer image{

      width:18rpx;

      height:18rpx;

      margin-right:1px;

      /* float:left; */

    }

     

     

    效果:点击跳转,左右可以滑动

     

     

     

    H5页面 跳回小程序 的实例:

    <a οnclick="saleMiniProgramDetail('12323houseid','2323brokerid');launchSecondHouseDetailAction('12323houseid','2323brokerid')">按钮</a>

     

    //h5点击事件

    var t = {动态值} //t 等于1 的时候是h5

    var isiOS = !!u.match(/(iphone|ipod|ipad|mac)/i);

    function launchSecondHouseDetailAction(houseid, cityid) {
            if(t == 1){  //H5
                location.href = '<?=RESOURCES_M_B.$cityDomain?>'+'/ershoufang/' + houseid + '.html';
                return;
            }

            if(isiOS){
                launchSecondHouseDetailActionWithCallBack(houseid, cityid);
            }else{ //android
                window.android.launchSecondHouseDetailActionWithCallBack(houseid, cityid);
            }
        }

     

    //打开小程序 事件

    function saleMiniProgramDetail(housesid,cityid){   //带参数 
                wx.miniProgram.getEnv(function(res) {
                    console.log(res.miniprogram) // true
                    if(res.miniprogram){   //(点击事件先判断是否是小程序打开的H5页面,如果是,就跳回小程序指定的页面)
                        wx.miniProgram.navigateTo({url: '../sale_detail/sale_detail?houseId=' + housesid + '&cityId=' + cityid})
                    }
                })
            }

     官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html       

    这样就可以正常打开小程序了

     

     

    感谢大家的支持,小弟有帮到大家的,可以帮忙 点赞 和关注

    展开全文
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 最近笔者研究技术发现如何使用外部跳转微信小程序的技术都是利用urlscheme的调用技术来实现的,如何去微信小程序去跳转到外部...// www.wxticket.com 微信小程序跳转外部h5技术webview方法代码 qq904999988 Page(...
  • 微信小程序页面跳转H5页面 wx.navigateTo({ url: '/chat/pages/chat/chat?id=helper', }) html <viewclass="page-box"> <web-viewsrc="{{urlAll}}"></web-view> </view> js Page({...
  • 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序...
  • 微信小程序跳转H5(打开H5页面)

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

    万次阅读 2018-12-04 19:35:09
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 这是小程序和web-vew的H5相互传参,H5使用小程序的微信支付的代码 H5部分 <!DOCTYPE html> <html> <head> <...
  • 此项目 webviews 目录中, index.html 是一个简单的实例,可以在外部浏览器和微信浏览器拉起微信小程序 二、项目配置 在cloudfunctions/urlhttp/index.js 的第5行,USER_ID 需要配置在管理后台取小程序原始ID,保存...
  • goto(e) { console.log(e.currentTarget.dataset.item) let item = e.currentTarget.dataset.item if (Object.keys(e.currentTarget.dataset.item).length != 0) { // if (item.url.indexOf("miniapp") >...
  • 微信小程序跳转到第三方H5网页

    千次阅读 2020-12-20 16:42:23
    我开发过程中有小程序跳转到网页的需求,下面分享一下我的实现过程: 使用官方文档web-view组件:...备注:微信小程序跳转到第三方网页需要获取第三方网站的同意,想要跳转到别人的网站,得获取别人的同意,吧把校验文
  • 开放标签使用:id="launch-btn"username="gh_xxxxxxxx"path="/a/b/...e=2#fg">.btn { padding: 12px }打开小程序var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) ...
  • 微信小程序跳转到公众号H5网页

    千次阅读 2020-01-09 14:43:29
    1.跳转按钮代码 <view class="container"> <view class='wrapper'> <button class='wepay' bindtap='gooutUrl'>点击跳转H5页面</button> </view> </view> 跳转js代码 ...
  • 微信小程序怎么跳转H5页面

    千次阅读 2020-11-27 16:07:01
    微信小程序怎么跳转H5页面 在微信小程序内要跳转至外部的H5页面,做法比较简单。可以看到微信官方文档中,微信小程序提供了承载网页的容器: web-view,通过这个容器,其实可以实现在小程序内打开一个H5页面。也...
  • 需求:从外部浏览器,点击H5链接跳转打开微信小程序;以及在微信内直接点击H5链接打开微信小程序; 步骤1:小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹; 步骤2:项目开启云开发 ...
  • 1.引用JS <...<...2.在js里面调用wx.miniProgram.redirectTo,其中url是你要跳转小程序页面地址 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.j
  • 微信小程序跳转 H5 页面之后,如果你在 H5 页面内部跳来跳去,顶部返回按钮也只是一步步返回你 H5 访问历史记录,没有什么方式能一步返回小程序的,所以这边添加了一个悬浮按钮,只在小程序环境下显示,为的就是不管...
  • 1.在项目中安装微信sdk npm install weixin-js-sdk
  • 微信小程序H5之间相互跳转

    千次阅读 2020-03-03 10:51:38
    1.微信小程序跳转小程序 wx.navigateToMiniProgram navigateToMiniProgram(mAppId) {  wx.navigateToMiniProgram({  appId: mAppId,  path: ‘page/index/index?id=123’,  extraData: {  foo: ‘bar’  }, ...
  • 微信小程序H5之间跳转

    千次阅读 2019-06-28 08:57:25
    转载自:https://www.cnblogs.com/achengmu/p/9305473.html
  • H5网页跳转微信小程序

    万次阅读 热门讨论 2020-07-08 16:15:53
    好消息,H5网页接入公众号的JSSDK以后可以跳转小程序了。 开放标签使用步骤 微信开放标签使用步骤与微信JS-SDK类似,也需要绑定安全域名、引入JS文件等步骤。 步骤一:绑定域名 登录微信公众平台进入“公众号...
  • 根据微信开发文档的微信网页开发,下面的开放标签说明文档。引入js文件。<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>然后在 wx.config里面根据...
  • 文章目录H5网页跳转微信小程序效果图一、小程序跳转按钮二、开放标签使用步骤1. 绑定域名2. 引入js文件3. config权限配置及ready处理4. 调用方法解决VUE中警告注意: 官方文档 效果图 请忽略样式, 刚好页面上有...
  • 最近项目有个需求,在微信小程序跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面。1、跳转外部链接(官方文档)1)入口//跳转到入口wx.navigateTo({url: '../out/out'})2)app.json{"pages": ["pages...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,872
精华内容 2,348
关键字:

微信小程序跳转h5网页

微信小程序 订阅