微信公众号H5页面--JqueryWeui组件使用

背景

最近在做一个微信公众号的h5页面，使用Jquery Weui组件实现项目中需要的功能。做个笔记，方便后期使用。若有不好的地方，欢迎给出宝贵建议哦。

功能

滚动加载更多 [Jquery Weui]

本例中以 body 为参考对象，以下是代码的展示：

• html部分

<div id="list">
</div>

/*滚动加载 start*/
<div class="weui-loadmore" style="display: none;">
   <i class="weui-loading"></i>
   <span class="weui-loadmore__tips">正在加载</span>
</div>
/*滚动加载 end*/
复制代码

备注：滚动加载的代码块，放在要滚动加载的容器中，本例的滚动加载容器是：body

• js部分

$(document.body).infinite().on("infinite",function(){
   if(dom.loading){
      return;
   }
   $('.weui-loadmore').show();
   dom.loading = true;
   setTimeout(function(){
      //parentDom = $('#list');
      Loadmore.loadDom(parentDom,data);
      $('#list').append('<p>我是新加载的内容</p>');
      dom.loading = false; //销毁滚动插件
   },1500);
}); //初始化加载滚动插件
复制代码

下拉刷新 [Jquery Weui]

• html部分

<!--下拉刷新 start-->
<div class="weui-pull-to-refresh__layer">
   <div class='weui-pull-to-refresh__arrow'></div>
   <div class='weui-pull-to-refresh__preloader'></div>
   <div class="down">下拉刷新</div>
   <div class="up">释放刷新</div>
   <div class="refresh">正在刷新</div>
</div>
<!--下拉刷新 end-->
复制代码

放在需要被下拉的容器中，此例子中，body为被需要下拉的容器

• js部分

//下拉刷新
$(document.body).pullToRefresh(function(){
    // console.log('下拉刷新');
    //下拉刷新的操作代码块

    setTimeout(function(){
       $(document.body).pullToRefreshDone(); //下拉刷新完成后
    },1500);
});
复制代码

select [Jquery Weui]

个人很喜欢这个组件。

• html部分

<input class="weui-input" id="unitId" type="text" readonly value="">
复制代码

• js部分

$('#unitId').select({
    title:'选择单位',
    items:items,
    input:items[0].title,
    onClose:function(e){
        console.log(e);
        console.log('弹出关闭'); 
        $.toast("弹出层关闭", "text");
        //内容修改后的操作可以在这里操作
    },
    beforeClose:function(){
       console.log('弹层关闭前。。。');
       //内容修改后 也 可以在这里操作
    }
});
复制代码

全屏查看图片[Jquery Weui]

• html部分

<button class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="showPic(imgUrl)">查看</button> 
复制代码

• js部分

showPic:function(imgUrl){
   //Jquery Weui start
   var pb1 = $.photoBrowser({
       items:[imgUrl]
   });
   pb1.open();
   //Jquery Weui end
}
复制代码

items是一个数组，里面可以存放多个图片路劲，效果像朋友圈的查看照片功能

以下几个是项目中使用到的功能【不是 jquery Weui 组件】，在这里也做个总结，方便日后项目开发的使用。

视频播放

项目中使用ckplayer插件实现视频的播放功能，但是此项目是要在微信浏览器中运行，所以有一个问题：在手机端的微信浏览器看视频时，视频总是在页面的最前面，即使修改 z-index 也是无济于事。【PS：项目中有一个功能需要视频上悬浮文字说明文字，但是目前没有实现，大家有没有好的做法，可以推荐一下呀。】

• html部分

<div id="videoDom">
                
</div>
复制代码

• js部分

var url = 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-sample/mydream_zh_768-432.mp4';
var videoObject = {                                container:'#videoDom',                         variable:'player',
	autoplay:true,
    video:url
};
var player=new ckplayer(videoObject);
复制代码

图片下载

项目中使用html中的 <a> 标签，实现图片的下载功能

• html 部分

<a href="javaScript:;" class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="downLoadPic(item.url, $event)">下载</a>
复制代码

• js部分

downLoadPic:function(imgUrl,event){
  //a 标签的图片
  event.target.href = imgUrl;
  event.target.download = imgUrl;
}
复制代码

日期插件

项目中使用 laydate 插件，实现日期功能

• html 部分

 <input class="weui-input" id="startDateTimeId" type="text" readonly value="">
复制代码

• js部分

<script>
  //执行一个laydate实例
  laydate.render({
      elem: '#startDateTimeId', //指定元素
      type: 'datetime'
  });
  //插件学习地址：https://zhidao.baidu.com/question/2122174631660864107.html   和  https://www.layui.com/laydate/
</script>
复制代码

laydate日期插件地址：www.layui.com/laydate/

demo地址：gitee.com/echopcn/Jqu…

遇到的问题

控制台抛出以下错误： [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

• 问题描述

使用 JQuery WEUI 组件实现下拉刷新功能，代码如下。但是触发下拉事件时，浏览器的控制台抛出 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 这个错误

• 解决方法

在css中加上这句 * { touch-action: none; } 就可以了。 但是，鼠标可以滚动，在移动端就不能滚动了。然后这么问题没解决成功，大家有没有好的做法呢？

ps:这个项目还在开发中，后期遇到的问题或新增的功能，此文也会不断的更新。