根据微信开发文档步骤如下:
1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
JS接口安全域名设置 mi.com(前面不用带www/http,域名必须备案过)
2.引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
3.通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
注:appId从公众号里面获取,timestamp、nonceStr、signature临时通过按微信规定的规则发送url获取
4.通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
JS-SDK网页所有接口代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信JS-SDK Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">
</head>
<body>
<div class="wxapi_container">
<div class="wxapi_index_container">
<ul class="label_box lbox_close wxapi_index_list">
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
</ul>
</div>
<div class="lbox_close wxapi_form">
<h3 id="menu-basic">基础接口</h3>
判断当前客户端是否支持指定JS接口
<button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
<h3 id="menu-share">分享接口</h3>
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
获取“分享给朋友”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
获取“分享到QQ”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
<button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
<h3 id="menu-image">图像接口</h3>
拍照或从手机相册中选图接口
<button class="btn btn_primary" id="chooseImage">chooseImage</button>
预览图片接口
<button class="btn btn_primary" id="previewImage">previewImage</button>
上传图片接口
<button class="btn btn_primary" id="uploadImage">uploadImage</button>
下载图片接口
<button class="btn btn_primary" id="downloadImage">downloadImage</button>
<h3 id="menu-voice