shenduxian1 · August 5, 2014 07:07
diff --git a/weixin.html b/weixin.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>微信Js API Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        button {
            margin: 10px;
            }
    </style>
    <script type="text/javascript" src="WeixinApi.js"></script>
 </head>
 <body>
 <p>这是一个测试页面！请直接分享到微信好友、朋友圈、腾讯微博看效果吧！</p>

 <p>如果你是扫一扫过来的，可以复制连接，然后发给任何一个微信好友，再点击连接进入测试</p>

 <p>
    <button id="optionMenu">WeixinApi.hideOptionMenu</button>
 </p>
 <p>
    <button id="toolbar">WeixinApi.hideToolbar</button>
 </p>
 <p>
    <button id="networkType">WeixinApi.getNetworkType</button>
 </p>
 <p>
    <button id="imagePreview">WeixinApi.imagePreview</button>
 </p>
 <p>
    <button id="closeWindow">WeixinApi.closeWindow</button>
 </p>

 <script type="text/javascript">

    // 给按钮增加click事件：请不要太纠结这个写法，demo而已
    var addEvent = function (elId, listener) {
        document.getElementById(elId)
                .addEventListener('click', function (e) {
                    if (!window.WeixinApi || !window.WeixinJSBridge) {
                        alert('请确认您是在微信内置浏览器中打开的，并且WeixinApi.js已正确引用');
                        e.preventDefault();
                        return false;
                    }
                    listener(this, e);
                }, false);
    };

    // 两个Flag
    var optionMenuOn = true;
    var toolbarOn = true;

    // optionMenu的控制
    addEvent('optionMenu', function (el, e) {
        if (optionMenuOn) {
            el.innerHTML = "WeixinApi.showOptionMenu";
            WeixinApi.hideOptionMenu();
        } else {
            el.innerHTML = "WeixinApi.hideOptionMenu";
            WeixinApi.showOptionMenu();
        }
        optionMenuOn = !optionMenuOn;
    });

    // toolbar的控制
    addEvent('toolbar', function (el, e) {
        if (toolbarOn) {
            el.textContent = "WeixinApi.showToolbar";
            WeixinApi.hideToolbar();
        } else {
            el.textContent = "WeixinApi.hideToolbar";
            WeixinApi.showToolbar();
        }
        toolbarOn = !toolbarOn;
    });

    // 获取网络类型
    addEvent('networkType', function (el, e) {
        WeixinApi.getNetworkType(function (network) {
            alert("当前网络类型：" + network);
        });
    });

    // 调起客户端的图片播放组件
    addEvent('imagePreview', function (el, e) {
        location.href = "http://www.baidufe.com/wximage?tag=%E7%BE%8E%E5%A5%B3";
    });

    // 关闭窗口
    addEvent('closeWindow', function (el, e) {
        WeixinApi.closeWindow();
    });

    // 需要分享的内容，请放到ready里
    WeixinApi.ready(function (Api) {

 // 微信分享的数据
        var wxData = {
            "appId": "", // 服务号可以填写appId
            "imgUrl": 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
            "link": 'http://www.baidufe.com',
            "desc": '大家好，我是Alien，Web前端&Android客户端码农，喜欢技术上的瞎倒腾！欢迎多交流',
            "title": "大家好，我是赵先烈"
        };

 // 分享的回调
        var wxCallbacks = {
 // 分享操作开始之前
            ready: function () {
 // 你可以在这里对分享的数据进行重组
                alert("准备分享");
            },
 // 分享被用户自动取消
            cancel: function (resp) {
 // 你可以在你的页面上给用户一个小Tip，为什么要取消呢？
                alert("分享被取消");
            },
 // 分享失败了
            fail: function (resp) {
 // 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？
                alert("分享失败");
            },
 // 分享成功
            confirm: function (resp) {
 // 分享成功了，我们是不是可以做一些分享统计呢？
 //window.location.href='http://192.168.1.128:8080/wwyj/test.html';
                alert("分享成功");
            },
 // 整个分享过程结束
            all: function (resp) {
 // 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？
                alert("分享结束");
            }
        };

 // 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
        Api.shareToFriend(wxData, wxCallbacks);

 // 点击分享到朋友圈，会执行下面这个代码
        Api.shareToTimeline(wxData, wxCallbacks);

 // 点击分享到腾讯微博，会执行下面这个代码
        Api.shareToWeibo(wxData, wxCallbacks);

 // 有可能用户是直接用微信“扫一扫”打开的，这个情况下，optionMenu、toolbar都是off状态
 // 为了方便用户测试，我先来trigger show一下
 // optionMenu
        var elOptionMenu = document.getElementById('optionMenu');
        elOptionMenu.click(); // 先隐藏
        elOptionMenu.click(); // 再显示
 // toolbar
        var elToolbar = document.getElementById('toolbar');
        elToolbar.click(); // 先隐藏
        elToolbar.click(); // 再显示
    });

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>微信Js API Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0;">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<style type="text/css">
	button {
	margin: 10px;
	}
	</style>
	<script type="text/javascript" src="WeixinApi.js"></script>
	</head>
	<body>
	<p>这是一个测试页面！请直接分享到微信好友、朋友圈、腾讯微博看效果吧！</p>

	<p>如果你是扫一扫过来的，可以复制连接，然后发给任何一个微信好友，再点击连接进入测试</p>

	<p>
	<button id="optionMenu">WeixinApi.hideOptionMenu</button>
	</p>
	<p>
	<button id="toolbar">WeixinApi.hideToolbar</button>
	</p>
	<p>
	<button id="networkType">WeixinApi.getNetworkType</button>
	</p>
	<p>
	<button id="imagePreview">WeixinApi.imagePreview</button>
	</p>
	<p>
	<button id="closeWindow">WeixinApi.closeWindow</button>
	</p>

	<script type="text/javascript">

	// 给按钮增加click事件：请不要太纠结这个写法，demo而已
	var addEvent = function (elId, listener) {
	document.getElementById(elId)
	.addEventListener('click', function (e) {
	if (!window.WeixinApi \|\| !window.WeixinJSBridge) {
	alert('请确认您是在微信内置浏览器中打开的，并且WeixinApi.js已正确引用');
	e.preventDefault();
	return false;
	}
	listener(this, e);
	}, false);
	};

	// 两个Flag
	var optionMenuOn = true;
	var toolbarOn = true;

	// optionMenu的控制
	addEvent('optionMenu', function (el, e) {
	if (optionMenuOn) {
	el.innerHTML = "WeixinApi.showOptionMenu";
	WeixinApi.hideOptionMenu();
	} else {
	el.innerHTML = "WeixinApi.hideOptionMenu";
	WeixinApi.showOptionMenu();
	}
	optionMenuOn = !optionMenuOn;
	});

	// toolbar的控制
	addEvent('toolbar', function (el, e) {
	if (toolbarOn) {
	el.textContent = "WeixinApi.showToolbar";
	WeixinApi.hideToolbar();
	} else {
	el.textContent = "WeixinApi.hideToolbar";
	WeixinApi.showToolbar();
	}
	toolbarOn = !toolbarOn;
	});

	// 获取网络类型
	addEvent('networkType', function (el, e) {
	WeixinApi.getNetworkType(function (network) {
	alert("当前网络类型：" + network);
	});
	});

	// 调起客户端的图片播放组件
	addEvent('imagePreview', function (el, e) {
	location.href = "http://www.baidufe.com/wximage?tag=%E7%BE%8E%E5%A5%B3";
	});

	// 关闭窗口
	addEvent('closeWindow', function (el, e) {
	WeixinApi.closeWindow();
	});

	// 需要分享的内容，请放到ready里
	WeixinApi.ready(function (Api) {

	// 微信分享的数据
	var wxData = {
	"appId": "", // 服务号可以填写appId
	"imgUrl": 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
	"link": 'http://www.baidufe.com',
	"desc": '大家好，我是Alien，Web前端&Android客户端码农，喜欢技术上的瞎倒腾！欢迎多交流',
	"title": "大家好，我是赵先烈"
	};

	// 分享的回调
	var wxCallbacks = {
	// 分享操作开始之前
	ready: function () {
	// 你可以在这里对分享的数据进行重组
	alert("准备分享");
	},
	// 分享被用户自动取消
	cancel: function (resp) {
	// 你可以在你的页面上给用户一个小Tip，为什么要取消呢？
	alert("分享被取消");
	},
	// 分享失败了
	fail: function (resp) {
	// 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？
	alert("分享失败");
	},
	// 分享成功
	confirm: function (resp) {
	// 分享成功了，我们是不是可以做一些分享统计呢？
	//window.location.href='http://192.168.1.128:8080/wwyj/test.html';
	alert("分享成功");
	},
	// 整个分享过程结束
	all: function (resp) {
	// 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？
	alert("分享结束");
	}
	};

	// 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
	Api.shareToFriend(wxData, wxCallbacks);

	// 点击分享到朋友圈，会执行下面这个代码
	Api.shareToTimeline(wxData, wxCallbacks);

	// 点击分享到腾讯微博，会执行下面这个代码
	Api.shareToWeibo(wxData, wxCallbacks);

	// 有可能用户是直接用微信“扫一扫”打开的，这个情况下，optionMenu、toolbar都是off状态
	// 为了方便用户测试，我先来trigger show一下
	// optionMenu
	var elOptionMenu = document.getElementById('optionMenu');
	elOptionMenu.click(); // 先隐藏
	elOptionMenu.click(); // 再显示
	// toolbar
	var elToolbar = document.getElementById('toolbar');
	elToolbar.click(); // 先隐藏
	elToolbar.click(); // 再显示
	});

	</script>
	</body>
	</html>