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

前言

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

这里提一嘴,想知道自己的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!

相关推荐
回忆哆啦没有A梦2 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__3 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园3 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
cxr8284 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊5 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿7 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊8 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅8 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防9 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html