微信公衆號H5頁面--JqueryWeui組件使用

背景

最近在作一個微信公衆號的h5頁面，使用Jquery Weui組件實現項目中須要的功能。作個筆記，方便後期使用。如有很差的地方，歡迎給出寶貴建議哦。

一個問題

會致使頁面在大屏幕上樣式衝突，文字字體很小，且佈局錯亂。

jquery weui在plus上兼容性問題，致使樣式變形、衝突: blog.csdn.net/lilinoscar/…

功能

滾動加載更多 [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:這個項目還在開發中，後期遇到的問題或新增的功能，此文也會不斷的更新。