手把手教你微信公众号开发

很多人肯定会疑惑，为什么人家有文档不看，非要看你这个？本来也不打算写这篇文章，那天在掘金上有个掘友发了个沸点，大体意思就说公众号开发也能算一门技术(因为公众号网页开发文档可读性比较差)。有时候见技术群好多人也提问；所以还是写一下微信授权登录和微信分享以及微信支付。

开发前的准备

工欲善其事，必先利其器，我们先准备一些必备东西，然后才可以正式进入开发环节。首先需要注册企业微信公众号账号，然后绑定开发人员，下载开发工具。

注册账号

• 注册微信公众号，一般选择服务号(具体看业务场景),输入相关信息提交即可，这个比较简单，就不展开叙述了。

绑定开发者账号

• 1.登录微信开发者平台，左侧菜单栏找到开发-->开发者工具，点击进入。

• 2.点击web开发者工具，这个就是绑定我们的开发者微信账号，方便后面调试。

下载开发调试工具

• 点击进入微信开发调试工具下载页面，选择版本下载即可，到现在，我们的开发前准备工作就算完成了。

微信授权登录

准备工作做完以后，我们就可以开始着手开发了，一般公众号开发肯定要做微信网页授权、分享给好友、分享到朋友圈，部分会做微信支付功能。下面就分享一下微信网页授权开发流程。

安全域名设置

• 1.登录公众号后台，左侧菜单栏找到：设置-->公众号设置，进入页面后选择功能设置，配置一下JS接口安全域名和网页授权域名，配置规则如下：

登录流程

• 微信登录流程：

• 前端关键代码如下(为书写方便，这里请求使用jquery的$ajax):

<script>
     //获取地址栏参数
    function GetURL(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    };

    //获取url中code参数
    let code = GetURL('code');

    //如果没有code，转跳到授权页进行授权
    if(!code){
         let url = window.location.href;
         let appid = 'abckdeh129292'; //公众号appid，在微信公众号后台中可以查看
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri=' + url + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect';
    }

    //如果有code
    $.ajax({
        url: "https://test.abcd.com/api/WXUserInfo",
        data: { code,},
        type: "get",
        dataType: "json",
        success: function (res) {
            //code可用，拿到用户信息
            if (res.status) {  
                userInfo = res.data;
            }else{
                //code过期，需要重新授权
                 window.location.href = 'http://test.abcd.com/juejin/index.html'
            }
        });  
    });

</script>

• 参数说明：关于转跳到授权页时候拼接的参数，这里就不多说了，感兴趣的可以看一下👉官方文档

• 常见返回错误码：

• 10003 检测后台回调域名配置是不是正确

• 10005 公众号没有开通这个能力

• 10009 操作频繁，这个和前端关系不大，后端检查一下逻辑

用户信息

• 上面获取到微信返回的用户信息对应的描述如下，其中有几点需要注意一下，后端保存用户昵称时候需要进行转码，因为有些用户微信昵称为表情，其次是如果公众号网页想要与小程序网页用户信息互通，则需要拿unionid来当唯一id，同时小程序获取用户信息也需要保存unionid。

分享给好友，分享到朋友圈

大家肯定见过微信发给朋友的网页中有标题、介绍以及缩略图，这样有利于用户未进入页面时候大概了解页面的一些信息。这里就写一下分享给微信好友和分享到朋友圈，其他的可以看👉官方文档。js-sdk示例可以在微信内访问👉示例demo。

开发流程

• 1.配置js安全域名(在上面已经说明了具体配置方法)

• 2.引入js-sdk

    //页面中引入js-sdk
     <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    //vue或者react 也可以插件安装
    npm install weixin-js-sdk 或 yarn add weixin-js-sdk

• 3.通过config接口注入权限验证配置，处理成功or失败

    //拿到config接口注入权限验证参数，这些参数都由后端返回
    $.ajax({
        url: "https://test.abcd.com/api/wxconfig",
        data: { url:window.location.href},
        type: "get",
        dataType: "json",
        success: function (data) {
            //
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',] // 必填，需要使用的JS接口列表 如果要做分享给好友和分享到朋友圈就写这两个
            });

            //配置验校成功处理函数
            wx.ready(function(){
                  const link = "www.test.com/index.html",
                        title = '掘金邀请你参加打卡活动',
                        desc = '掘金邀请你参加打卡活动，奖品丰富，快来看看吧！',
                        imgUrl = 'http://www.test.com/images/share.jpg';

                //分享给好友
                wx.updateAppMessageShareData({ 
                    title, // 分享标题
                    desc, // 分享描述
                    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl, // 分享图标
                    success: function () {
                      // 设置成功处理函数
                    }
                });
                //分享到朋友圈
                wx.updateTimelineShareData({ 
                    title, // 分享标题
                    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl, // 分享图标
                    success: function () {
                      // 设置成功处理函数
                    }
                })
            });
            //配置失败函数
            wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });

        });  
    });

⚠️注意事项

• 调试过程中要打开debug,不然失败后看不到返回信息，常见错误大部分是因为后端签名计算问题，如有问题直接把报错信息复制到搜索引擎看一下处理方式就行。

• 微信js-sdk与微信网页授权没任何关联，不授权也可以使用js-sdk。

• 微信分享成功处理函数仅代表用户点击了分享按钮，并不代表真正分享给了好友，只要点击了右上角分享，success函数就会执行。一般做激励式分享都是分享后携带参数，当用户分享后好友进入后进行相关业务处理。

结尾

本来打算写一下微信支付，但文章会比较长，留着下次写吧。有问题可以评论区与我交流。欢迎关注👉关注前端365：分享前端小技巧以及开发过程中的一些问题。看完记得欢迎关注+收藏+点赞，马上就到LV3了，感谢支持～