微信公众号搭建本地测试环境

原因:
1、由于公司的微信公众号已经在阿里云上运营,如果有任何bug不可能去停掉服务器去调试,这就需要在本地搭建测试环境了。
2、公众号开发涉及到微信的回调,所以你本地搭建的服务器需要外网能够访问,这个时候就需要把运行在内网的服务器映射到外网去给微信访问。

方法:
1、搭建内网穿透环境
如果喜欢自己搭建的话可以多找些关于内网穿透的资料看看,我是由于时间的关系,当时就选择了一个工具来把自己的电脑穿透到外网,(主要是收费不是很贵)。
在这里可以推荐一下:natapp, https://natapp.cn/,网络感觉还不错,虽然不快,但是基本能满足我的微信开发就足够了,我使用的是付费5/月的套餐,因为这样就能固定的外网地址。

2、映射好后,要试着访问以下映射的地址,看看是否能访问到你的服务器,可以的话就说明你的映射是成功的。如图:




3、配置公众号的测试账号:
1)、进入到微信公众号首页左侧导航栏下有个开发者工具,点击进去:

2)、在右边能看到如下的测试账号,点击进入

3)、用个人微信扫一扫进去即可登录个人的测试账号,此时会有如下的东西,这个是公众号开发的时候需要用到的参数。
注:这些最好用配置文件的形式保存,方便以后修改为正式环境的参数!

4)、这个url是微信那边需要发个验证请求过来的,需要你配置一个你服务器的外网地址,即第一步我们将公众号服务器映射到外网的地址,(注意端口号哦)。token的话自己随机设置,并保存到配置文件中。


5)、当你点击提交的时候,微信会立刻试着发个请求到这个地址上去,如果请求成功的话,可以看到如下图;

url尾部的wechat,是因为我本地用了nginx路由转向,这个转向就是转到我的本地公众号服务器。(如果还没有接触nginx的话,可以先试着直接把映射的端口直接跟你公众号服务器端口设置成一样,就是如下图的本地端口。不过一般还是建议搭配nginx使用,这样就不用总是去改端口,只需要配置好你的nginx代理服务器就可以了。


6)、微信发送认证请求到你本地服务器的代码如下,这个是node的代码,这个代码只在微信认证的时候使用,平时注释掉即可:
// 微信url 验证token代码
router.get('/',function function_name(req,res) {
// body...
var state = req.query.state;
//console.log(req);
var Isign = sign.checkSignature(req.query);
console.log('sign',Isign);
if(!Isign){
//如果签名不对,结束请求并返回
res.end('signature fail');
}
if (req.method == "GET") {
//如果请求是GET,返回echostr用于通过服务器有效校验
res.end(req.query.echostr);
}
});
sign文件的检查签名
var crypto = require('crypto');
checkSignature = function (query) {
var signature = query.signature;
var timestamp = query.timestamp;
var nonce = query.nonce;

var shasum = crypto.createHash('sha1');
var arr = [configs.token, timestamp, nonce].sort();
shasum.update(arr.join(''));

return shasum.digest('hex') === signature;
};
7)、当你到这一步的时候,相信你微信扫一扫关注的测试账号就可以给你测试使用了,真机测试如下图:
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
搭建微信公众号前端vue环境之前,首先需要准备一个微信公众平台测试账号。这个测试账号可以通过个人微信扫描二维码登录来获得,不需要注册。接下来,我们可以按照以下步骤来搭建vue环境: 1. 确保你已经安装了Node.js和npm(Node包管理器)。 2. 打开命令行终端,进入你的项目文件夹。 3. 使用以下命令来初始化一个基于vue的项目: ``` npm init -y ``` 4. 接下来,安装vue-cli,它是一个vue脚手架工具,可以帮助我们快速搭建项目: ``` npm install -g @vue/cli ``` 5. 初始化一个新的vue项目: ``` vue create your-project-name ``` 其中,"your-project-name"是你项目的名称,可以自行替换。 6. 在初始化过程中,你可以选择一些项目配置选项,例如使用默认配置或手动选择特定的特性。根据你的需求进行选择。 7. 初始化完成后,进入到项目目录: ``` cd your-project-name ``` 8. 运行以下命令来启动项目: ``` npm run serve ``` 9. 现在,你的vue环境已经搭建完成。你可以根据项目需求进行开发,编写vue组件、路由、数据交互等等。 请注意,以上步骤是搭建基于vue的微信公众号前端环境的一般方法。具体的配置和开发流程可能会根据你的实际应用场景而有所不同。因此,在进行微信公众号前端开发之前,建议你仔细阅读微信公众平台的开发文档,并根据文档中的指引进行配置和开发工作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值