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

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

    展开全文
  • 小程序中,单独准备一个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(...

      最近笔者研究技术发现如何使用外部跳转微信小程序的技术都是利用urlscheme的调用技术来实现的,如何去微信小程序去跳转到外部微信浏览器webview打开网页,而且不需要验证业务域名的方法呢,笔者通过大量的逆向微信测试调试,总结以下代码技术。

    我们先来配置微信开放环境,代码截图如下。

    核心代码如下,如何去是实现跳转外部微信webview的技术。

     

     代码如下:

    // www.wxticket.com 微信小程序跳转外部h5技术webview方法代码 qq904999988
    
    Page({
    return wx.navigateTo({
            url: `/pages/webView/webView?url=${defaultUrl}`
          })
    
      data: {
        weRunResult: '',
        userInfoResult: '',
      },
    
      onGetWeRunData() {
        wx.getWeRunData({
          success: res => {
            wx.cloud.callFunction({
              name: 'echo',
              data: {
                // info 字段在云函数 event 对象中会被自动替换为相应的敏感数据
                info: wx.cloud.CloudID(res.cloudID),
              },
            }).then(res => {
              console.log('[onGetWeRunData] 收到 echo 回包:', res)
    
              this.setData({
                weRunResult: JSON.stringify(res.result),
              })
    
              wx.showToast({
                title: '敏感数据获取成功',
              })
            }).catch(err => {
              console.log('[onGetWeRunData] 失败:', err)
            })
          }
        })
      },
    
      onGetUserInfo(e) {
        console.log(e)
        wx.cloud.callFunction({
          name: 'openapi',
          data: {
            action: 'getOpenData',
            openData: {
              list: [
                e.detail.cloudID,
              ]
            }
          }
        }).then(res => {
          console.log('[onGetUserInfo] 调用成功:', res)
    
          this.setData({
            userInfoResult: JSON.stringify(res.result),
          })
    
          wx.showToast({
            title: '敏感数据获取成功',
          })
        })
      }
    })
    

    展开全文
  • 微信小程序页面跳转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 页面内部跳来跳去,顶部返回按钮也只是一步步返回你 H5 访问历史记录,没有什么方式能一步返回小程序的,所以这边添加了一个悬浮按钮,只在小程序环境下显示,为的就是不管...
  • 微信小程序跳转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> <...
  • 微信小程序跳转H5网页

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

    千次阅读 2020-11-27 16:07:01
    微信小程序怎么跳转H5页面 在微信小程序内要跳转至外部的H5页面,做法比较简单。可以看到微信官方文档中,微信小程序提供了承载网页的容器: web-view,通过这个容器,其实可以实现在小程序内打开一个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
  • 最近项目有个需求,在微信小程序跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面。1、跳转外部链接(官方文档)1)入口//跳转到入口wx.navigateTo({url: '../out/out'})2)app.json{"pages": ["pages...
  • 微信小程序H5页面

    2021-03-29 17:13:33
    web-view中设置跳转h5的链接,可以加上需要的参数: (此图片来源于网络,如有侵权,请联系删除! ) tips: 1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的...
  • 一、从小程序跳转webview 二、从webview(h5)跳转小程序 1.先引入微信JS-SDK /*方式一*/ const script = document.createElement('script') script.type = 'text/javascript' script.src = '...
  • 根据微信开发文档的微信网页开发,下面的开放标签说明文档。引入js文件。<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>然后在 wx.config里面根据...
  • uni-app微信小程序跳转外部H5链接

    千次阅读 2020-10-08 17:15:00
    可以先看一下官网链接web-view ...2.跳转H5需要个触发的点击事件,通过点击跳转 <template> <view> <button class="submit-btn" @click="toExecute">执行</button> </view>
  • 微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消息,但同时也有人说这是H5。那么,微信小程序H5的区别在哪里?只有2M代码的微信小程序,在功能上也许不如...
  • 微信小程序推出以后,尽管微信团队做了很多关于小程序的普及,但是还是有很多人不太理解,很多的误解就是把它等同于H5。小程序由于刚推出来时开放的能力十分有限,所以在功能展示上会让普通用户感觉和H5一样,并没有...
  • 微信小程序 需要看到滑动效果: scroll-into-view:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 <scroll-view v-if="showPage" scroll-y :scroll-into-view=...
  • 微信小程序跳转到第三方H5网页

    千次阅读 2020-12-20 16:42:23
    我开发过程中有小程序跳转到网页的需求,下面分享一下我的实现过程: 使用官方文档web-view组件:...备注:微信小程序跳转到第三方网页需要获取第三方网站的同意,想要跳转到别人的网站,得获取别人的同意,吧把校验文
  • 微信客服消息点击跳转H5: <a href="https://www.baidu.com">打开百度</a> 微信客服消息点击跳转小程序: 文本内容<a href=...

空空如也

空空如也

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

微信小程序跳转h5

微信小程序 订阅