<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>

 

接口:

微信小程序 跳转H5页面 webview跳转实例 H5跳回小程序页面

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页面 webview跳转实例 H5跳回小程序页面

 

 

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       

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

 

 

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

相关文章