Requirements/Background

Recently, the project needs to make an H5, which requires a preview on the PC page (specific requirements will not be expanded), similar to the effect below. Do H5 and embed H5 in a page on PC via iframe

H5用到的技术是Vue+Vant

This article is mainly about how to achieve the PC side page preview H5, record some pits stepped

Ps: This requirement is a common and common one, and you are welcome to discuss the implementation in the comments section 🙌

Key points

  • How to embed H5 in PC page
  • PC does not support sliding events, how to slide H5 round cast graph
  • How to distinguish between swipe and click events on PC

The specific implementation

Step1: iframe embedded in H5

Embed H5 through iframe on PC page, as shown in the following figure

<template>
  <div class="preview">
    <! -- Other modules of the page -->
    <div>
      <h2>pageId: {{ pageData ? pageData.pageId : '' }}</h2>
      <h3>Page data structure:</h3>
      <json-viewer
        class="preview-pagedata"
        :value="pageData"
        :expand-depth="99"
        copyable
      />
    </div>
    
    <! -- Analog phone preview -->
    <div class="preview-wrapper">
      <div class="preview-header">
        <div class="preview-statbar">
          <img
            class="preview-statbar-img"
            alt="presentation"
            :src="phoneUrl"
          >
        </div>
      </div>

      <section>
        <iframe
          class="preview-content"
          src="#/home"
          frameborder="0"
        />
      </section>
    </div>
  </div>
</template>
<script>
import JsonViewer from 'vue-json-viewer';
export default {
  components: { JsonViewer },
  data() {
    return {
      pageData: {},
      phoneUrl: require('@/assets/images/phone.png')}; },created() {
    // Listen for closure event messages for child components
    window.addEventListener('message'.this.getPageData, false);
  },
  beforeDestroy() {
    window.removeEventListener('message'.this.getPageData, false);
  },
  methods: {
    getPageData(e) {
      if (e.data.pageId) {
        this.pageData = e.data; ,}}}};</script>

<style scoped lang="less">
.preview {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  color: # 404040;

  &-pagedata {
    width: 800px;
    height: 520px;
    overflow: auto;
    border: 1px solid #ddd;
  }

  &-wrapper {
    width: 377px;
    height: 620px; } & -header {
    height: 20px;
    margin-top: 20px;
    text-align: center;
    background:
      -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(rgba(55.55.55.0.98)),
        to(# 545456));background: -webkit-linear-gradient(rgba(55.55.55.0.98), # 545456);
    background: linear-gradient(rgba(55.55.55.0.98), # 545456);
    border-radius: 4px 4px 0 0;
  }

  &-statbar {
    height: 20px;
    margin-bottom: 4px; & -img {
      width: 96%;
      height: 80%;
      margin: 0 2%;
      vertical-align: middle;
      border-style: none; & -}}content {
    width: 377px;
    height: 600px;
    overflow: auto;
    border-top: none;
    border-right: 1px solid rgb(247.247.247);
    border-bottom: 1px solid rgb(247.247.247);
    border-left: 1px solid rgb(247.247.247);
    border-image: initial;
    box-shadow: rgb(235 235 235) 0 2px 4px; }}</style>

Copy the code

The effect picture is as follows:

Step2: How does the PC support sliding events

After embedding, it is found that there are sliding events in H5 page are invalid

The normal slide of H5 is as follows:

After embedding the PC side of the page into the following, sliding failure 😰

The reason is:

The H5 has no mouse and uses touch events to achieve the sliding function. Touch events include TouchStart, TouchMove, touchEnd, and so on

Most of the action on a PC web page is done with a mouse, responding to mouse events, including mousedown, Mousemove, Mouseup, and Click events

How to solve it? Direction: let PC page can recognize left and right sliding; Write a PC side sliding event to simulate their own manual code for a long time, found that Vant has a solution to support desktop adaptation:

After following the above scheme, it can slide, but there is a problem, the slide is not accurate, and the slide and click cannot be distinguished, slide will also trigger the click event (the specific reason is unknown, later check @vant/touch-emulator source code).

  • Incorrect slide problem: add attribute “pointer-events: None” to the image

  • Issue: Listen on mouseDown and Mousemove to determine if it is a swipe or click event

    • Mouse click triggers: mousedown, mouseup

    • Mouse sliding triggers: mousedown, Mousemove, mouseup

The specific implementation code is as follows:

<template>
  <van-swipe>
    <van-swipe-item
      v-for="(item, index) in templateData.banners"
      @click="isClick ? $dialog(item.jumpUrl) : ''"
      @mousedown="mousedown"
      @mousemove="mousemove"
    >
      <van-image
        :src="$common.handlerPicSrc(item.imageUrl)"
        :style="{ pointerEvents: 'none', }"
      />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
export default {
  name: 'PocBanner'.props: {
    templateData: {
      default: function () {},
      type: Object,}},data() {
    return {
      isClick: true}; },methods: {
    mousedown() {
      this.isClick = true;
    },
    mousemove() {
      this.isClick = false; ,}}};</script>
Copy the code