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

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

1.写在前面

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

详情，可以查看上一编：文章

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

那我们今天就继续，往下讲！！！

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

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

那就开干！！！^_^

2.js-sdk的api使用

2.1引入js文件

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

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

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

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

• 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>

官方地址：可查看这里

官方文档：可查看这里

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

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

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

就是上面这里！！！

然后我们定义一个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定义

• 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 时，扫码返回的结果
            
            // 处理相关的业务逻辑
            ...
        }
    });
});

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

好了，测试无问题，扫一扫正常调用！！！^_^

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

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

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

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

好了，今天就先到这里了！！！^_^

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