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

前言

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

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

相关推荐
li35741 天前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj1 天前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel1 天前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel1 天前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵1 天前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld1 天前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷1 天前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军1 天前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离1 天前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库