如何开发兼容不同屏幕的微信H5营销活动

最新推荐文章于 2022-08-31 17:36:04 发布

weixin_43968429

最新推荐文章于 2022-08-31 17:36:04 发布

阅读量197

点赞数 1

文章标签： javascript html vue.js css H5网站

本文链接：https://blog.csdn.net/weixin_43968429/article/details/107080440

版权

开发背景

**
由于传统的的可视化编辑h5营销互动，像易企秀这种，会受到很大的限制，很有很多动画和数据的交互无法实现，所以需要用代码来实现h5营销互动。

注意细节

1.需要引入第三方的动画库animate.css，提高开发动画的效率
animation的语法:

animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction:规定是否应该轮流反向播放动画。

简介：animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

npm i animate.css -S

import "../src/public/css/animate.min.css";

动画使用要加类名animated，动画效果是

 <span class="animated" style="animation-delay: 1.7s;" :class="{ fadeInUp: show }"></span>

官网：https://animate.style/

2.每次打开活动页面，需要音乐自动播放，并且右上角可以打开关闭
//–创建页面监听，等待微信端页面加载完毕触发音频播放

  document.addEventListener("DOMContentLoaded", function() {
    console.log("节点已加载");
    function audioAutoPlay() {
      _this.$refs.music.play();
      document.addEventListener(
        "WeixinJSBridgeReady",
        function() {
          _this.$refs.music.play();
          console.log(_this.$refs.music.pause);
          if (_this.$refs.music.pause && !_this.isplay) {
            _this.isplay = true;
          }
        },
        false
      );
    }
    audioAutoPlay();
  });
  //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
  function audioAutoPlay() {
    _this.$nextTick(function() {
      _this.$refs.music.play();
      if (_this.$refs.music.pause && !_this.isplay) {
        _this.isplay = true;
      }
      document.removeEventListener("touchstart", audioAutoPlay);
    });
  }
  document.addEventListener("touchstart", audioAutoPlay);

3.兼容不同尺寸的屏幕，使用rem，设计稿750px宽度;

npm i postcss-px2rem -S

在vue.config.js的文件下

css: {
    requireModuleExtension: true,
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75,
          }),
        ],
      },
    },
  },

4.兼容不同宽高比的屏幕，设计图要按最小尺寸设计iPhone5的320*568
在iphoneX是这样子的
在这里插入图片描述
在iphone5显示是这样子的，

明显看出，在全面屏会多出很多空余空间，所以内部的内容要加上一个div盒子，给他用position定位，顶部和底部要留白
5.由于轮播图有定制化需求，引入第三方的轮播图组件swiper,进行二次开发

npm i swiper -S

官网：https://www.swiper.com.cn/api/index.html
Swiper5 使用方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html><html><head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css"></head><body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...</body></html>

2.HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div></div>导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;}

4.初始化Swiper：最好是挨着标签

...<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script></body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script>window.onload = function() {
  ...
}</script>

或者这样（Jquery和Zepto）(推荐)

<script>
$(document).ready(function () {
 ...
})</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
如果作为CommonJs 或ES 模块引入

//CommonJsvar Swiper = require('swiper');    var mySwiper = new Swiper('.swiper-container', { /* ... */ });
//ES
import Swiper from 'swiper';    var mySwiper = new Swiper('.swiper-container', { /* ... */ });

6.每个动画有先后顺序，对动画进行延迟加载,实现错位的效果
延迟用

style="animation-delay: 1.2s;"
style="animation-delay: 2.2s;"

在这里插入图片描述
7.微信自定义分享
公司框架已经封装好了分享功能，填入参数即可

const shareConfig = (shareLink) => {
  share(
    "生日快乐",
    "亲爱的会员，悦悦祝您生日快乐",
    shareLink,
    "http://chuantu.xyz/t6/739/1593498352x-1224475230.png"
  );
};

weixin_43968429

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何开发兼容不同屏幕的微信H5营销活动

**开发背景**由于传统的的可视化编辑h5营销互动，像易企秀这种，会受到很大的限制，很有很多动画和数据的交互无法实现，所以需要用代码来实现h5营销互动。注意细节1.需要引入第三方的动画库animate.css，提高开发动画的效率animation的语法:animation: name duration timing-function delay iteration-count direction;animation-name: 规定需要绑定到选择器的 keyframe 名称。。anima
复制链接

扫一扫