网络穿透,实现本地开发环境测试微信公众号(2)

·  阅读 16057

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第27天,点击查看活动详情


1.写在前面

在上一编文章,我们已经讲到了,如何对本地网络进行穿透,实现本地开发环境,也能测试微信公众号。

详情,可以查看上一编:文章

image.png

image.png

我们已经实现了,JS-SDK使用步骤的第一步,测试账号,已经绑定了我们的域名。

那我们今天就继续,往下讲!!!

实现JS-SDK相关的api操作。

例如:微信扫一扫拍照或从手机相册中选图接口

那就开干!!!^_^

image.png

2.js-sdk的api使用

2.1引入js文件

image.png

这里,我们讲这个js文件,download下来,放入到我们的项目中。防止出现网络问题,无法访问到该js文件。

image.png

image.png

例如这样,页面直接引用。

2.2通过 config 接口注入权限验证配置

image.png

这里需要生成签名,签名算法见文末的附录1

image.png

  • jsapi_ticket

这里要说明的是,jsapi_ticket会导致 api 调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket

那这里,我们提供一个接口,用于生成签名。

因为我们需要对jsapi-ticket等数据,进行缓存,还需要调用微信的api获取access_token等数据。

所以这里我们提供一个工具类,该工具类,已经帮我们封装好了方法,也有全局缓存的机制。

该工具类,已经上传到maven中央仓库,直接引入pom依赖即可。


<dependency>
    <groupId>com.soecode.wx-tools</groupId>
    <artifactId>wx-tools</artifactId>
    <version>2.1.3-RELEASE</version>
</dependency>

复制代码

官方地址:可查看这里

官方文档:可查看这里

源码,看起来,应该都比较简单了

如果实在不会的小伙伴,可以接着往下看:

image.png

image.png

这里的appId、appSecret、token,和微信测试公众号那边一致即可。

image.png

就是上面这里!!!

然后我们定义一个config接口,用于生成签名:

@RestController
@RequestMapping("/wechat/wx")
public class WechatApiConfigController {
    //实例化 统一业务API入口
    private IService iService = new WxService();
    private Logger log = LoggerFactory.getLogger(this.getClass());

    @PostMapping("/config")
    public WxJsapiConfig getConfig(HttpServletRequest request, String url) {
        log.info("进入getConfig方法 ...");
        List<String> jsApiList = new ArrayList<>();
        //需要用到哪些JS SDK API 就设置哪些
        jsApiList.add("scanQRCode");  //扫一扫接口
        jsApiList.add("previewImage");//预览图片接口
        jsApiList.add("chooseImage"); //拍照或选图接口
        WxJsapiConfig config = null;
        //把config返回到前端进行js调用即可。
        try {
            config = iService.createJsapiConfig(url, jsApiList);
        } catch (Exception e) {
            log.error(e.getMessage());
        }
        log.info("Method getConfig the end :" + config);
        return config;
    }
}
复制代码

其实,就对应这里的 文档说明

可以看到,底层已经帮我们封装好了。

生成JsapiTicket、缓存JsapiTicket、签名算法等等

有兴趣的小伙伴,可以看看源码,也不难,很清晰明了的操作。

  • 前端js操作
<script type="text/javascript">
    var appId = "";
    var timestamp = "";
    var nonceStr = "";
    var signature = "";
    var jsApiList = "";
    
    // url用当前访问路径即可
    var url = location.href.split('#')[0];

    //调用我们刚定义的接口:WechatApiConfigController
    $.ajax({
        cache: true,
        type: "POST",
        url: ctx + "/wechat/wx/config",
        data: {"url": url},
        async: false,  //同步
        dataType: "json",
        error: function (request) {
        },
        success: function (data) {
            //得到相应的签名,参数等
            appId = data.appid;
            timestamp = data.timestamp;
            nonceStr = data.noncestr;
            signature = data.signature;
            jsApiList = data.jsApiList;
        }
    });

    //调用js-sdk的api
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: appId, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: nonceStr, // 必填,生成签名的随机串
        signature: signature,// 必填,签名
        jsApiList: jsApiList // 必填,需要使用的JS接口列表
    });
    
    function isWeChat() {
        var ua = navigator.userAgent.toLowerCase();
        if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {
            $.toast("请在微信端打开此页面", "cancel");
            //$(".bg").css('pointer-events', 'none');
        }
    }

    isWeChat();
</script>
复制代码

2.3 ready 、 error定义

image.png

  • error
// 输出一下config配置,错误的信息,好排除原因
wx.error(function (res) {
    $.toast(res.errMsg, "cancel");
});
复制代码

这里,我们定义一下error,输出错误信息,好排查原因。

  • ready

这里,我没有用到,就不定义了。

2.4 相关api使用(微信扫一扫)

//定义一个按钮,点击事件
$("#scan").click(function () {
    wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
            
            // 处理相关的业务逻辑
            ...
        }
    });
});
复制代码

image.png

详情可查看相关api 文档说明

好了,测试无问题,扫一扫正常调用!!!^_^

image.png

好了,微信公众号js-sdk的使用,大概就是这样了。

中间有遇到问题的,大家伙可以讨论解决一下!!!^_^


好了,以上就是我个人的实操了。

个人理解,可能也不够全面,班门弄斧了。

好了,今天就先到这里了!!!^_^

如果觉得有收获的,帮忙点赞、评论、收藏一下呗!!!

image.png

分类:
后端
收藏成功!
已添加到「」, 点击更改