微信公眾號H5頁面--JqueryWeui元件使用

WeUI jQuery · 發表 2018-09-10 13:58:31

摘要：最近在做一個微信公眾號的h5頁面，使用Jquery Weui元件實現專案中需要的功能。做個筆記，方便後期使用。若有不好的地方，歡迎給出寶貴建議哦。功能滾動載入更多 [Jquery Weui] 本例中以 body 為參考物件，以下是程式碼的展示： html部分 ...

最近在做一個微信公眾號的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:這個專案還在開發中，後期遇到的問題或新增的功能，此文也會不斷的更新。