正文
html5仿微信,仿微信界面
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5网页如何调用浏览器APP的微信分享功能
一、html5手机网站调用微信分享包括 ：
获取网络类型。
调起客户端的图片播放组件。
调用微信扫描二维码。
判断是否安装对应的应用。
发送邮件。
分享到微信朋友圈。
二、代码如下：
[html] view plain copy
!DOCTYPE html
html
head
meta charset="utf-8"
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
titleHTML5网页如何调用浏览器APP的微信分享功能/title
meta name="viewport" content="width=device-width, initial-scale=1" /
link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /
link rel="stylesheet" type="text/css" href="css/test.css" /
style type="text/css"
html,
body {
margin: 0;
padding: 0;
}
/style
/head
body
span class="shareBtn" id="toshare"点击分享到/span
div id="nativeShare"/div
script type="text/javascript" src="js/vendor/jquery-1.11.3.min.js"/script
script type="text/javascript" src="js/nativeShare.js"/script
script type="text/javascript"
$("#toshare").bind("click", function() {
var config = {
url: '', //分享url
title: '', //内容标题
desc: '', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
};
var share_obj = new nativeShare('nativeShare', config);
$(".am-share").addClass("am-modal-active");
if ($(".sharebg").length 0) {
$(".sharebg").addClass("sharebg-active");
} else {
$("body").append('div class="sharebg"/div');
$(".sharebg").addClass("sharebg-active");
}
$(".sharebg-active,.share_btn").click(function() {
$(".am-share").removeClass("am-modal-active");
setTimeout(function() {
$(".sharebg-active").removeClass("sharebg-active");
$(".sharebg").remove();
}, 300);
})
});
/script
/body
/html
三、输出结果：
四、其他分享接口：
A.获取“分享到朋友圈”按钮点击状态及自定义分享内容接口。
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
B.获取“分享给朋友”按钮点击状态及自定义分享内容接口。
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
C.获取“分享到QQ”按钮点击状态及自定义分享内容接口。
wx.onMenuShareQQ({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
D.获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口。
wx.onMenuShareWeibo({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
E.获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
相关问答
Q1: 微信上的html5页面是怎么制作出来的？
你好，微信上的HTML页面一般是用工具做出来的，很少有开发的H5案列，最常见是翻页H5，自由度比较低，只能修改图片换换位子，而专业工具自由度比较高，可以很灵活的设计H5，epub360在专业工具中上手难度适中，值得大家尝试下。
Q2: html5页面打开 微信 并分享
html5手机网站调用微信分享，其中示例包括 1. 获取网络类型 2. 调起客户端的图片播放组件 3. 调用微信扫描二维码 4. 判断是否安装对应的应用 5. 发送邮件 6. 分享到微信朋友圈
Q3: 怎么用html5写出来微信公众平台？
这个比较难，如果你会编程的话，一个10人团队，3个月时间应该可以编号，不如用唯购，省你好多时间跟人力物力。
Q4: 用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 (ismovee.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(oldxnewxoldynewy){
var imgw=$(this).width();//获取图片寛度
resizex=oldx-newx;//缩小多少
var resizey=oldy-newy;//缩小多少
if(imgwimgoldw){
$(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(imgw640){
$(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(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=imglength-1){
$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}else if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=0){
$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}else{
if(ismoveimgneww==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
