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

劫大大2025-07-29 15:02

前言

开发公众号或者服务号并不难，用自己熟悉的框架编写页面就行。容易疑惑的点在于，怎么打通前端本地与后台部署的测试服接口，下面就这个点进行讲解。

这里提一嘴，想知道自己的ip，那就win键+R打开CMD，输入ipconfig；或者打开git bash 输入ipconfig，懂？look in my eyes...

正文

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

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

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

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

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

xml 复制代码

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

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

OVER!