精华内容
下载资源
问答
  • 微信小程序跳转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链接进行解析、截取

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

    展开全文
  • WXML: hotrecommend 是接口返回的数组 0}}'> 热门推荐 bindtap="routerview" class="pick_item_wrap" wx:for="{{hotrecommend}}" wx:key=... */ } 效果:点击跳转,左右可以滑动 H5页面 打开小程序 的坑: 待完成

    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页面 wx.navigateTo({ url: '/chat/pages/chat/chat?id=helper', }) html <viewclass="page-box"> <web-viewsrc="{{urlAll}}"></web-view> </view> js Page({...

     微信小程序页面跳转到H5页面

    wx.navigateTo({
       url: '/chat/pages/chat/chat?id=helper',
    })

    html
    <view class="page-box">
         <web-view src="{{urlAll}}" ></web-view>
    </view>
    
    js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        urlAll: ''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        let vm = this
          vm.setData({
            urlAll: 'https://www.baidu.com'
          })
        }  
    })

     微信小程序页面跳转到H5页面

    import wx from 'weixin-js-sdk' //必须引入jdk,其他版本也可以
    let vm = this
    wx.miniProgram.navigateTo({
      url: `/shopdetail/pages/lucyDraw/winningRecordList/winningRecordList?userId=${vm.userInfo.userId}`,
        success: function () {
             console.log('success')
         },
        fail: function () {
             console.log('跳转回小程序的页面fail')
        }
    })

     

    展开全文
  • 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序...
  • h5页面内 引入 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 最好是下载到本地,引用本地文件。直接使用线上的话,可能会报错 d

    最近遇到一个功能,是在小程序中获取用户在公众号中的授权,拿到用户在公众号中的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' })
        });
    

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

    展开全文
  • 微信小程序跳转 H5 页面之后,如果你在 H5 页面内部跳来跳去,顶部返回按钮也只是一步步返回你 H5 访问历史记录,没有什么方式能一步返回小程序的,所以这边添加了一个悬浮按钮,只在小程序环境下显示,为的就是不管...
  • 1.在项目中安装微信sdk npm install weixin-js-sdk
  • 微信小程序怎么跳转H5页面

    千次阅读 2020-11-27 16:07:01
    微信小程序怎么跳转H5页面微信小程序内要跳转至外部的H5页面,做法比较简单。可以看到微信官方文档中,微信小程序提供了承载网页的容器: web-view,通过这个容器,其实可以实现在小程序内打开一个H5页面。也...
  • 微信小程序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 域名...
  • 微信内打开H5页面,选择跳转任意微信小程序
  • this.isShowWebView = false // alert('不在小程序里') // return false // } // }) } else { this.isShowWebView = false return false } }, 3.this.getUrlParam(‘intoType’) 方法 // h5页面获取小程序传参 ...
  • 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") >...
  • 相信大家在做小程序的时候有些需求会需要...直接点击分享是不能调用微信小程序分享的 但是可以点击后跳转到小程序页面从小程序的方法中调用分享 wx.miniProgram.navigateTo({url: "/pages/index/sharePosition/index?id
  • 微信小程序嵌入H5页面使用的组件是 web-view, 它很方便, 但是有一定的局限性. 当设置"navigationStyle: custom自定义导航栏"时, 如果想跳转回小程序页面需要在H5页面加一个点击事件来处理, 也就是说...
  • 方法很简单,只需要在wxml里写上 <web-view src="http://www.baidu.com"></web-view> 这样这个小程序页面就会显示链接里的地址内容了
  • 最近笔者研究技术发现如何使用外部跳转微信小程序的技术都是利用urlscheme的调用技术来实现的,如何去微信小程序去跳转到外部...// www.wxticket.com 微信小程序跳转外部h5技术webview方法代码 qq904999988 Page(...
  • 微信小程序内嵌H5页面

    万次阅读 多人点赞 2018-06-05 23:19:38
    标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名一致,否则在真机上是打不开的。如果开发工具上勾选了‘不校验域名’,在开发的时候还是能打开的,但也没用,线上是打不开的。实例:1...
  • 需求:从外部浏览器,点击H5链接跳转打开微信小程序;以及在微信内直接点击H5链接打开微信小程序; 步骤1:小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹; 步骤2:项目开启云开发 ...
  • 小程序代码 wxml文件 js文件 onLoad: function (options) { this.setData({ webUrl: 'http://192.168.1.11:8011/' // 把h5项目...url=' + this.url }) // 要跳转小程序的路径,this.url是需要传的参数 } }) }
  • 根据微信开发文档的微信网页开发,下面的开放标签说明文档。引入js文件。<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>然后在 wx.config里面根据...
  • 最近项目有个需求,在微信小程序跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面。1、跳转外部链接(官方文档)1)入口//跳转到入口wx.navigateTo({url: '../out/out'})2)app.json{"pages": ["pages...
  • 微信小程序H5相互跳转和传递数据

    万次阅读 2018-12-04 19:35:09
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 这是小程序和web-vew的H5相互传参,H5使用小程序的微信支付的代码 H5部分 <!DOCTYPE html> <html> <head> <...

空空如也

空空如也

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

微信小程序跳转h5页面

微信小程序 订阅