微信公众号是现在很多互联网公司、商家、媒体之类的必备营销工具，而微信JS SDK则是在网页端开发中用于调用微信的JS开发工具，通过JS-SDK，我们可以在微信中实现很多功能：使用微信的分享、获取位置、录音等等，在各种场景中，JS-SDK都可以帮助我们建立一个更加完善的微信公众号。
一、微信JS-SDK介绍
1、微信JS-SDK使用的优势
微信JS-SDK除了为开发者提供了许多便捷的指令外，还提供了另外一些很必要的效果：通过微信JS-SDK我们可以认证开发者的身份，使网页拥有微信账号的权限，在这个过程中会调用到微信JS SDK中的各种API。
2、微信JS-SDK使用的流程
url = location.href.split('#')[0];
$.ajax({
url: '/wx_config',
data: {
url: url
},
success: function (data) {
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
wx.ready(function () {
var title = 'Learn from Little things练习题',
desc = 'Learn from Little things练习题',
link = "http://" + location.host + location.pathname;
imgurl = "http://" + location.host + "/static/img/icon.png";
wx.onMenuShareTimeline({ //分享到朋友圈
title:title,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareAppMessage({ //分享给朋友
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareQQ({ //分享到QQ
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareWeibo({ //分享到微博
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
});
}
});
二、微信JS-SDK的开发与使用
1、微信JS-SDK基础
微信JS-SDK一般是在微信公众号的网站内部被调用，我们可以直接在客户端部署它们（这通常可以在微信官方文档中找到）。然后我们将授权配置插入到我们的网站代码中，即可调用JS-SDK。
2、微信JS-SDK的使用
可以在JS代码中嵌入HTML代码，从而更好地进行页面效果的展现。例如：我们可以通过JS-SDK将图片上传至服务器之后，通过HTML表单提交表单数据，然后将其与上传图片信息保存到数据库中。
3、微信JS-SDK的具体使用
在我们调用微信JS-SDK后，首先需要初始化微信JS-SDK的配置，然后在该代码中注册一些功能。例如，我们可以调用`onMenuShareTimeline`方法来配置分享到朋友圈功能，然后注册任意数量的分享工具，这些工具可以用`onMenuShareTimeline`来设置，或者它们可以使用`onMenuShareAppMessage`等其它功能并进行调用。最后，我们使用这些API：分享到朋友圈，分享给朋友，分享到QQ，分享到微博。
url = location.href.split('#')[0];
$.ajax({
url: '/wx_config',
data: {
url: url
},
success: function (data) {
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
wx.ready(function () {
var title = 'Learn from Little things练习题',
desc = 'Learn from Little things练习题',
link = "http://" + location.host + location.pathname;
imgurl = "http://" + location.host + "/static/img/icon.png";
wx.onMenuShareTimeline({ //分享到朋友圈
title:title,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareAppMessage({ //分享给朋友
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareQQ({ //分享到QQ
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareWeibo({ //分享到微博
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
});
}
});
三、微信JS-SDK实战
1、微信JS-SDK分享示例代码
我们首先需要获取授权信息，然后将其加载到页面中，这些信息包括appid、timestamp、noncestr、signature。
2、微信JS-SDK，使用微信的API为朋友们分享我们的文章
url = location.href.split('#')[0];
$.ajax({
url: '/wx_config',
data: {
url: url
},
success: function (data) {
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
wx.ready(function () {
var title = 'Learn from Little things练习题',
desc = 'Learn from Little things练习题',
link = "http://" + location.host + location.pathname;
imgurl = "http://" + location.host + "/static/img/icon.png";
wx.onMenuShareTimeline({ //分享到朋友圈
title:title,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareAppMessage({ //分享给朋友
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareQQ({ //分享到QQ
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
wx.onMenuShareWeibo({ //分享到微博
title:title,
desc:desc,
link:link,
imgUrl:imgurl,
success: function () {},
cancel: function () {}
});
});
}
});
上述代码中，我们在获取到授权信息后，通过`wx.config`方法配置好授权信息，预加载需要的JS-SDK，之后在`wx.ready`的回调事件中对要分享给朋友们的标题、描述、链接、以及分享时显示的缩略图进行设置。
四、微信JS-SDK问题解答
由于微信JS-SDK使用没有十分明确的问题。下面是一些我们在使用微信JS-SDK过程中可能会遇到的常见问题：
1、微信JS-SDK在第二次进入网页时，分享按钮会失效
2、使用微信JS-SDK分享时，在分享到朋友圈这一步出现了问题会怎样
3、非微信用户怎样进行支付
4、支付时我的订单状态一直处于未处理，请问我应该怎么办？
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192653.html
微信扫一扫 
支付宝扫一扫 