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

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

开发前的准备

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

注册账号

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

绑定开发者账号

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

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

g71x81.png
g71x81.png

g71vCR.png
g71vCR.png

下载开发调试工具

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

微信授权登录

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

安全域名设置

g73FVe.png
g73FVe.png

  • 1.登录公众号后台,左侧菜单栏找到:设置-->公众号设置,进入页面后选择功能设置,配置一下JS接口安全域名网页授权域名,配置规则如下:
配置名 规则 用途
JS接口安全域名 域名须通过ICP备案的验证,需要下载MP_verify_jhf9FhUVRNDnBE96.txt放在所配置域名指向的根目录 在微信内访问该域名下页面时,不会被重新排版。用户在该域名上进行输入时,不出现安全提示
网页授权域名 需要吧MP_verify_jhf9FhUVRNDnBE96.txt放到域名的根目录下 微信网页授权时候必须配置

登录流程

  • 微信登录流程:

g73PbD.png
g73PbD.png

  • 前端关键代码如下(为书写方便,这里请求使用jquery$ajax):
<script>
     //获取地址栏参数
    function GetURL(name{
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != nullreturn 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",
        successfunction (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
参数名称 描述
openid 用户的唯一标识
nickname 用户的昵称
sex 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
province 个人资料填写的省份
city 普通用户个人资料填写的城市
country 国家,如中国为CN
headimgurl 用户头像
privilege 用户特权信息
unionid 用户标识

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

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

g73CDO.jpg
g73CDO.jpg

开发流程

  • 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",
        successfunction (data{
            //
            wx.config({
                debugtrue// 开启调试模式,调用的所有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了,感谢支持~