微信JS SDK 精讲

发布时间：2023-05-20

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

推荐文章