微信公众号是现在很多互联网公司、商家、媒体之类的必备营销工具,而微信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、支付时我的订单状态一直处于未处理,请问我应该怎么办?