微信jsdk
2018-02-26 本文已影响0人
blank的小粉er
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>JSSDK</title>
<link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
<style>
.container{
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<button class="weui-btn weui-btn_primary" id="btn1">查看位置</button>
<button class="weui-btn weui-btn_primary" id="btn2">查看网络状态</button>
<button class="weui-btn weui-btn_primary" id="btn3">选择图片</button>
<button class="weui-btn weui-btn_primary" id="btn4">查看图片</button>
<hr>
<div id="box" style="width:100%"></div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<!--jssdk-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!-- weui.js-->
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.1/weui.min.js"></script>
<script>
$.ajax({
url:"jssdk.php",
dataType:"json",
success:execute
})
function execute(res){
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx96c5fcf2aea9c8f3', // 必填，公众号的唯一标识
timestamp:res.timestamp , // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名，见附录1
jsApiList: ["getLocation","openLocation","getNetworkType", "checkJsApi","onMenuShareTimeline","onMenuShareAppMessage", "chooseImage","previewImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
//查看图片
$("#btn4").click(function(){
wx.previewImage({
current:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497423865220&di=7a5b9b17c538f19b039f34815a6f7763&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2015%2F214%2F48%2FK58QA8ZOZ0IA.jpg", // 当前显示图片的http链接
urls: ["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497423865504&di=2be4f6e6babc237b3eb6e8f8428fa15c&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2015%2F214%2F40%2F485O0O682EHO.jpg","","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497423865503&di=1795046eb83e71c168c6a96fc739ce34&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2015%2F214%2F43%2FER6TS3SV641K.jpg"] // 需要预览的图片http链接列表
});
})
//选择相册图片
$("#btn3").click(function(){
wx.chooseImage({
count: 2, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var img = new Image();
img.src = res.localIds[0].localId;
//console.log(res.localIds[0]);
img.width = "100%";
box.appendChild(img);
//console.log(res);
}
});
})
//判断当前版本微信是否支持该API
wx.checkJsApi({
jsApiList: ["getLocation","openLocation","getNetworkType"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
//console.log(res);
}
});
wx.onMenuShareTimeline({
title: '女人看了会流泪，男人看了会沉默', // 分享标题
//link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2850299946,3213722286&fm=26&gp=0.jpg', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: '每天起床做这三件事可以活到100岁', // 分享标题
desc: '养生秘诀', // 分享描述
//link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2850299946,3213722286&fm=26&gp=0.jpg', // 分享图标
//type: '', // 分享类型,music、video或link，不填默认为link
//dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//获取网络状态
$("#btn2").click(function(){
wx.getNetworkType({
success: function (res) {
weui.alert(res.networkType );
}
});
})
//获取地理定位
$("#btn1").click(function(){
//获取地理位置
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
// var speed = res.speed; // 速度，以米/每秒计
//var accuracy = res.accuracy; // 位置精度
//调用地图接口
wx.openLocation({
latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
name: '', // 位置名
address: '', // 地址详情说明
scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
}
});
})
});
wx.error(function(res){
console.log(res);
});
};
</script>
</body>
</html>
