js仿微信圖片瀏覽

1. js判斷是否是微信瀏覽器方法總結

if(navigator.userAgent.indexOf("MicroMessenger")>-1){
alert("這是微信內置瀏覽器");
}else{
alert("這不是微信內置瀏覽器");
}

2. 用HTML5做一個類似於微信聯系人的一個demo，遇到一點問題

touchMove 要結合使用touchstar,touchend進行判斷的。
沒有做過類似的東西，但是下面的是仿微信圖片瀏覽的代碼，寫了注釋，希望對你有點幫助！
<script>

function imgreset(){
$(this).css3Animate({
width: imgoldw+"px",
//x:0,
//y:0,
time: "0ms",
callback: function () {
pagex1_s=null;pagey1_s=null;pagex2_s=null;pagey2_s=null;pagex1_e=null;pagey1_e=null;
pagex2_e=null;pagey2_e=null;pagexm1_s=null;pageym1_s=null;pagexm1_e=null;pageym1_e=null;
dm=0;dn=0;
imgneww=imgoldw
}
});
}
var imgoldw=320;//獲取圖片寛度
var imglength=$(".imgbox").length;//獲取圖片個數
var demos = document.getElementById("container"),
spirit, startScale, startRotation;
var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0;
var body_w=$("body").width();
var body_h=$("body").height();
var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e;
function touchStart(e) {
//e.stopPropagation();
e.preventDefault();
if(e.touches.length == 1){
ismove=true;
var touch1 = e.touches[0];
pagexm1_s = touch1.pageX;
pageym1_s = touch1.pageY;

}
if (e.touches.length == 2){

var touch1 = e.touches[0];
pagex1_s = touch1.pageX;
pagey1_s = touch1.pageY;
var touch2 = e.touches[1];
pagex2_s = touch2.pageX;
pagey2_s = touch2.pageY;
left = Math.min(pagex1_s, pagex2_s),
top = Math.min(pagey1_s, pagey2_s),
width = Math.abs(pagex1_s - pagex2_s),
height = Math.abs(pagey1_s - pagey2_s);
}

}
function touchMove(e){
//e.stopPropagation();
e.preventDefault();
if (ismove&&e.touches.length == 1){
//單點觸摸

var touch1 = e.touches[0],
pagexm1_e = touch1.pageX,
pageym1_e = touch1.pageY,

//移動了多少
dx=pagexm1_e-pagexm1_s,
dy=pageym1_e-pageym1_s;
//是多少
dm=dx+dm;
dn=dy+dn;

if(imgneww==imgoldw){

$(this).css3Animate({
x:dm,
//y:dn,
time: "0ms",
callback: function () {
}
});

//如果圖未放大，則執行翻頁
}else{
//如果圖片已經被放大，則可以拖動
$(this).css3Animate({
x:dm,
y:dn,
time: "0ms",
callback: function () {
//記錄新位置
}
});
}
pagexm1_s=pagexm1_e,pageym1_s=pageym1_e;
}
if (e.touches.length == 2){
//多點觸摸
var touch1 = e.touches[0];
pagex1_e = touch1.pageX;
pagey1_e = touch1.pageY;
var touch2 = e.touches[1];
pagex2_e = touch2.pageX;
pagey2_e = touch2.pageY;
//計算兩點開始距離 old
var oldx=Math.abs(pagex1_s-pagex2_s),
oldy=Math.abs(pagey1_s-pagey2_s),
//計算兩點開始距離 new
newx=Math.abs(pagex1_e-pagex2_e),
newy=Math.abs(pagey1_e-pagey2_e);

if(oldx>newx&&oldy>newy){
var imgw=$(this).width();//獲取圖片寛度
resizex=oldx-newx;//縮小多少
var resizey=oldy-newy;//縮小多少
if(imgw>imgoldw){
$(this).css3Animate({
width: imgneww-resizex+"px",
x:dm,
y:dn,
time: "0ms",
callback: function () {
}
});
imgneww=imgneww-resizex;
};
}else{

var imgw=$(this).width();//獲取圖片寛度
var resizex=Math.abs(oldx-newx);
var resizey=Math.abs(oldy-newy);//縮小多少
if(imgw<640){
$(this).css3Animate({
width: imgneww+resizex+"px",
x:dm,
y:dn,
time: "0ms",
callback: function () {
}
});
imgneww=imgneww+resizex;
}
}
}

pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e;

}

function touchEnd(e) {
e.preventDefault();
var imglength=$(".imgbox").length;
var id=parseInt($(this).attr("id").substr(9));
if(ismove&&imgneww==imgoldw&&dm<0&&Math.abs(dm)>body_w/2&&id!=imglength-1){

$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});

}else if(ismove&&imgneww==imgoldw&&dm>0&&Math.abs(dm)>body_w/2&&id!=0){
$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}else{
if(ismove&&imgneww==imgoldw){

$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}

}
ismove=false;

}

function gestureEnd(e) {
e.preventDefault();
if (!spirit) return;
canvas.removeChild(spirit);
spirit = null;
startScale = null;
startRotation = null;
}
/* $(".imgbox img").bind("touchstart", touchStart, false);
$(".imgbox img").bind("touchmove", touchMove, false);
$(".imgbox img").bind("touchend", touchEnd, false);
$(".imgbox img").bind("gestureend", gestureEnd, false);
$(".imgbox img").bind("tap", imgreset, false);
*/
</script>

3. 在微信中打開的網頁里的js怎麼能正常執行

正常執行具體如下：

1. 以下是一段示例代碼，注釋中表明了通過JS如何判斷是否在微信瀏覽器打開，是否在QQ空間瀏覽器，是否在新浪微博打開。當然可以做得更完善一點，再加上判斷是在移動設備打開還是在PC端瀏覽器打開的，更加細分一點，可以判斷是在安卓系統的瀏覽器打開的還是IOS系統瀏覽器打開的。
   

   

4. 前端框架實戰：使用Vue.js實現微信界面

微信（wechat）是騰訊公司於2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序，微信支持跨通信運營商、跨操作系統平台通過網路快速發送免費（需消耗少量網路流量）語音簡訊、視頻、圖片和文字，同時，也可以使用通過共享流媒體內容的資料和基於位置的社交插件「搖一搖」、「漂流瓶」、「朋友圈」、」公眾平台「、」語音記事本「等服務插件。

截止目前為止，微信的活躍用戶已超九億，成為現在人們日常生活中必不可缺的通訊工具。

而Vue.js是前端開發中一套構建用戶界面(user interface)的漸進式框架。Vue 從根本上採用最小成本、漸進增量(incrementally adoptable)的設計。Vue 的核心庫只專注於視圖層，並且很容易與其他第三方庫或現有項目集成。

今天，Hope老師就帶大家使用Vue.js實現微信界面！

Hope：5年H5開發經驗，擅長webApp，混合開發，項目管理。目前任職於某大數據公司，負責前端平台架構和混合開發。

《 前端實戰：Vue.js實現微信界面 》

預習資料
源碼

直播時間：2017年8月6日（周日）晚上8點

加 Q 群（613796295），加群暗號：「vue仿微信界面-」。已經在群里的同學關註上課通知就可以哦~

5. iOS Swift 仿微信朋友圈實現圖片點擊放大查看

效果圖：

scrollView 具有放大縮小的功能，實現圖片的放大與縮小的思路就是將imageView放在scrollView上，雙擊時調用scrollView的

來實現imageView的放大與縮小
Demo地址

1.兩個初始化方法

在初始化方法中初始化backScrollView 和承載imageView的scrollView,並給imageView和scrollView添加點擊手勢
2.承載imageView的scrollView設置代理方法

3.圖片的點擊放大手勢

4.出現時的動畫

5.消失時的動畫

6.調用

Demo地址

6. 用JS和html怎麼做出一個簡單的聊天窗口（類似微信）

單純js和html無法實現通訊，需要搭建後台服務與前端WebSocket比較容易實現。

7. 在微信內置瀏覽器里，為什麼有的圖片能雙擊打開，有的圖片則不行

雙擊可以打開的是調用了微信的內置圖片瀏覽器，比如在微信推送的圖文中。如果是自己開發的網頁如果不使用js調用微信內置圖片瀏覽器的話是無法雙擊打開查看的。