个人小程序。可以扫描体验哦。点击广告此博文代码免费赠予
本博文实现了自定义分享朋友圈、转发朋友、获取网络状态、地理位置、扫一扫等JSSDK接口功能
官网文档。请自行仔细阅读 https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.6433997488875112#gaishu
本Demo是基于之前几个例子写的。本Demo相当简单。
JSSDK使用步骤
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用摇一摇周边功能，请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});通过Ajax请求Java后台返回数据
$(function(){
$.ajax({
type:'get',
url:url,//填写自己的后台方法路径
dataType:'jsonp',
jsonpCallback: "js",
success:function(sign){
$("#url").val(sign.url);
$("#tk").val(sign.jsapi_ticket);
$("#appId").val(sign.appId);
$("#nonceStr").val(sign.signature);
$("#timestamp").val(sign.timestamp);
$("#signature").val(sign.signature);
wx.config({
debug: true,//必须开启的debug调试 以便查询错误，快速定位解决
//jsapi_ticket:sign.jsapi_ticket,
//url:sign.url,
appId: sign.appId,
timestamp: sign.timestamp,
nonceStr: sign.nonceStr,
signature: sign.signature,
//接口列表
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard',
'configWXDeviceWiFi'
]
});
}
});
});页面获取网络状态、地理位置按钮代码
<input type="button" id="network" value="获取网络状态" class="button button-khaki"/>
<br/>
<input type="button" id="location" value="获取地理位置" class="button button-khaki"/>
<br/>
<input type="button" id="scan" value="微信扫一扫" class="button button-khaki"/>获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
//分享到朋友圈
wx.onMenuShareTimeline({
title : '自定义内容分享朋友圈', // 分享的标题
link : 'http://xs.kundadahh.club/', // 分享的地址 必须是公众号配置的JS域名 否则不会显示自定义内容
desc : '自定义内容分享朋友圈', // 描述
imgUrl : 'http://xs.kundadahh.club/timg.jpg', // 分享的图标 必须是公众号配置的JS域名 否则不会显示自定义内容
fail : function(res) {
alert(JSON.stringify(res));
}
});“分享到朋友圈”按钮点击状态及自定义分享内容接口截图示意
图1显示为JSSDK接入成功。可以查看我的另一篇博文https://my.oschina.net/xshuai/blog/726459。
图2则是选择分享到朋友圈操作
图3显示点击后是分享到朋友圈还是转发给朋友的信息
图4显示为分享到朋友圈的一个操作
图5显示分享到朋友圈成功。如果取消。则显示取消信息
获取“分享给朋友”按钮点击状态及自定义分享内容接口
// 分享给朋友
wx.onMenuShareAppMessage({
title : '自定义内容转发给朋友', // 分享的标题
desc : '自定义内容转发给朋友', // 描述
link : 'http://xs.kundadahh.club/', // 分享的地址 必须是公众号配置的JS域名 否则不会显示自定义内容
imgUrl : 'http://xs.kundadahh.club/timg.jpg', // 分享的图标 必须是公众号配置的JS域名 否则不会显示自定义内容
fail : function(res) {
alert(JSON.stringify(res));
}
});
});获取“分享给朋友”按钮点击状态及自定义分享内容接口截图示意
图1显示为J选择分享给朋友。
图2则是选择分享到朋友打印的信息
图3显示点击后是分享到指定朋友的一个操作
图4显示为分享到朋友完成后的一个信息
设备信息接口定义
//在这里写微信获取设备状态的接口
$("#network").bind("click",function(){
wx.getNetworkType({
success : function(res) {
alert('您的网络状态为:'+res.networkType);// 返回网络类型2g，3g，4g，wifi
}
});
});接口截图示意
地理位置接口定义
//在这里写微信获取地理位置的接口
$("#location").bind("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; // 位置精度
}
});
});接口截图示意
微信扫一扫接口定义
//在这里写微信扫一扫的接口
$("#scan").bind("click",function(){
wx.scanQRCode({
needResult :1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
success : function(res) {
alert('扫描的内容为:'+res.resultStr);// 当needResult 为 1 时，扫码返回的结果
}
});
});接口截图示意
微信JSSDK分享到 “朋友圈”转发给“朋友”例子就这些。JSSDK接口相对于来说难度较小。
