前端开发公众号或服务号，本地如何与后端测试服接口打通

前言

开发公众号或者服务号并不难，用自己熟悉的框架编写页面就行。容易疑惑的点在于，怎么打通前端本地与后台部署的测试服接口。
本文介绍了打通微信公众号或服务号本地开发与测试服接口的步骤：
1.修改项目启动文件的host和port；
2.登录微信公众平台测试号管理页面进行配置；
3.在测试号页面修改授权域名；
4.配置弹窗中的服务器信息。
最后提供了前端页面初始化代码示例，通过获取微信授权码code来实现接口对接。整个流程可帮助开发者在本地测试环境顺利对接微信公众号接口。
另外提一嘴，想知道自己的ip，那就win键+R打开CMD，输入ipconfig；或者打开git bash 输入ipconfig，懂？look in my eyes...

正文

第一步，在项目启动服务的文件里修改host和port，如下图

第二步，打开 微信公众平台接口测试帐号申请 这个链接，登录进去进行配置如下图

第三步，依旧在测试号管理这个页面拖到最下方，找到如下图片那一行，点击修改

第四步，在弹窗的框里修改配置如下图

最后，在首页或者启动页代码如下

<template>
    <div class="check-page">加载中，请耐心等待...</div>
</template>
<script>
export default {
    data() {
        return {
            appId: process.env.NODE_ENV == 'development' && "测试号appId" || "正式发布后的appId",
        };
    },
    methods: {
        init() {
            let code = this.$route.query.code;
            if (!code) {
                window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId
                    }&redirect_uri=${encodeURIComponent(
                        location.href
                    )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
                return
            }
            //以下就是获取到code后进行的操作
            你爱咋写咋写
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style lang="scss">
</style>

这样你启动项目后，在微信开发者工具公众号里面输入项目运行地址就行了

结语

要活得开心，活得潇洒，look in my eyes