• 1、由于公司的微信公众号已经在阿里云上运营,如果有任何bug不可能去停掉服务器去调试,这就需要在本地搭建测试环境了。 2、公众号开发涉及到微信的回调,所以你本地搭建的服务器需要外网能够访问,这个时候就需要把...
    网上有很多相关的文章跟帖子,大家不妨都跟着玩一下;今天我把我的经验跟坑给填一下,记录一下,以便自己查阅:
    注意:首先你得有个微信公众号。注册的事项另外查阅,不再累赘。

    原因:
    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)、当你到这一步的时候,相信你微信扫一扫关注的测试账号就可以给你测试使用了,真机测试如下图:


    展开全文
  • 1.微信测试号申请:...3.Ngrok,一款国外的内网穿透利器,好处是监听本地端口映射到外网,支持外网访问本地环境【微信官方在QQ浏览器中内嵌了微信的本地测试环境其实就是用的Ngro

    1.微信测试号申请:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

    2.接口配置填写:由于此处URL只支持线上,而我们开发都在本地,所以要用到下面介绍的


    3.Ngrok,一款国外的内网穿透利器,好处是监听本地端口映射到外网,支持外网访问本地环境【微信官方在QQ浏览器中内嵌了微信的本地测试环境其实就是用的Ngrok】这东西被墙了,并且只有注册了【貌似现在要付费?】才支持自定义域名【如果不是自定义域名,那么每次启动域名都随机,第2步中的URL还要每次变,很麻烦】

    4.Natapp.cn-->基于Ngrok的免费内网穿透利器,名如其意。官网下载对应系统安装包,WINDOWS下解压,在对应文件夹内打开cmd然后执行下面的命令

    【Ngrok -config ngrok.cfg -subdomain myqpp 8080】由于咱们用的Tomcat所以监听8080端口,myapp处输入自己需要设定的名称

    5.执行4后下面的域名则为外网地址,访问此域名也就是访问-->127.0.0.1:8080


    6.将此域名填写到第2步中的URL中,TOKEN随便填写即可,先不要点击提交【微信开发文档中有个例子,PHP的,用于验证服务器地址的有效性】

    7.先不要启动咱的项目,先打开一个没有部署任何APP的Tomcat,在webapp/ROOT下面新建一个JSP页面,页面清空【不需要head,body等信息,清空所有】然后粘贴下面的代码

    <%
    out.print(request.getParameter("echostr"));
    %>

    8.点击提交即可绑定成功,然后用自己的微信扫面下方二维码关注测试公众号


    9.由于获取用户userinfo,需要设置授权回调域名页面



    10.现在可以关掉tomcat然后用咱们自己的项目进行开发了,注意替换对应的appID和appsecret

    展开全文
  • 准备工作1.ngrok,微信的接口有一些是被动的接收从微信服务器发送的消息的,所以需要提供一个域名给微信服务器,ngrok可以将本机的指定端口,映射到一个域名。花生壳什么的也可以。 2.微信web开发者工具,微信官方...

    ##准备工作
    1.ngrok,微信的接口有一些是被动的接收从微信服务器发送的消息的,所以需要提供一个域名给微信服务器,ngrok可以将本机的指定端口,映射到一个域名。花生壳什么的也可以。
    2.微信web开发者工具,微信官方的调试工具
    ##测试账号配置
    ###测试账号信息
    在测试账号管理界面,你可以获取到AppID和APPSecret。
    ###接口配置信息
    这里写图片描述

    验证URL有效性成功后即接入生效,成为开发者。如果公众号类型为服务号(订阅号只能使用普通消息接口),可以在公众平台网站中申请认证,认证成功的服务号将获得众多接口权限,以满足开发者需求。

    此后用户每次向公众号发送消息、或者产生自定义菜单点击事件时,开发者填写的服务器配置URL将得到微信服务器推送过来的消息和事件,然后开发者可以依据自身业务逻辑进行响应,例如回复消息等。

    下面的文档描述了这个接口的作用:
    http://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html
    ###JS接口安全域名
    这里写图片描述
    配置在ngrok生成的域名,配置这个配置项的目的是让开发者可以在该域名下调用微信开放的JS接口。
    JS-SDK相关的内容可以看这里:
    http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
    ###测试账号二维码
    这里写图片描述
    用测试账号扫一下这个二维码,就能关注这个测试账号了,回复信息什么的就可以测试了。
    ###体验接口权限列表
    这里写图片描述
    测试账号默认大部分接口都是默认开启的,有几个需要手动开启。
    这里需要注意的是网页授权获取用户基本信息这个。
    这里写图片描述
    如上所示,这里需要配置一个域名,网页授权成功回调的时候,必须是这个域名下的地址才行,不然就报scope参数错误或没有scope权限的错误。
    至此,开发环境就搭建好了,可以按照微信公众平台开发文档里的微信网页开发部分写一个网页授权获取基本信息的demo了。

    展开全文
  • 扫描关注后登录 ...填写JS接口安全域名 ,设置JS接口安全域后,通过关注该测试号,开发者即可在该域名下调用微信开放的JS接口,请阅读微信JSSDK开发文档。 注意:不知道啥原因,用自己的帐号申请测试

    官方链接:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

    扫描关注后登录

    需要填写接口配置,一个公网能访问的域名,推荐用natapp。

    填写JS接口安全域名 ,设置JS接口安全域后,通过关注该测试号,开发者即可在该域名下调用微信开放的JS接口,请阅读微信JSSDK开发文档

    注意:不知道啥原因,用自己的帐号申请测试帐号后貌似不能立即关注,但是同事的微信能关注。自己的帐号是过了两天就能关注了。



    展开全文
  •  各位肯定都知道,做微信开发,我们的开发服务器需要和微信服务器做交互,我们需要准备一台放置在公网的服务器,能够使得我们的服务器可以正常访问微信服务器,并且微信服务器也需要可以正常访问我们的开发服务器。...

    一,为什么要用到ngrok?

           各位肯定都知道,做微信开发,我们的开发服务器需要和微信服务器做交互,我们需要准备一台放置在公网的服务器,能够使得我们的服务器可以正常访问微信服务器,并且微信服务器也需要可以正常访问我们的开发服务器。并且我们做开发时的服务器都是放在内网中的,只能通过内网来访问。然而微信服务器无法和我们的内网服务器做交互,这就导致我们做微信开发在本地调试出现了一定的困难!

         今天就向大家介绍一个非常强大的外网映射工具:ngrok.它可以把你的本地ip(127.0.0.1|localhost)映射成一个公网域名,这样所有人都可以通过这个域名来访问你的项目,这个功能对本地调试,特别是微信公众号开发带来了极大的便利.

    示例:
    http://localhost:8080/项目名/ -> http://**.ngrok.cc/项目名

    提醒:微信接口服务只支持80端口,并不支持其他的端口

    ,准备开发工具

         1.tomcat

         2.ngrok客户端(可以访问官网进行下载,官网地址是:http://www.ngrok.cc)

    三,ngrok版本说明

        

    此处要介绍三个ngrok版本:ngrok,tunnel,sunny-ngrok.

    第一个版本是国外开发的原生ngrok版本,这个版本将我们的本地ip映射到一个二级域名上,这个域名有两种形式:自定义主机名和系统分配主机名(主机名为最左边的部分,比如我们平时经常看到的www).这个版本有两个缺陷:
    1.系统分配的主机名是动态分配的,即每一次开启都会不一样,所以每次访问的时候都要记住不一样的域名,这很蛋疼.
    2.这个域名是在国外的,所以访问速度会相当慢

    第二个版本是国内基于ngrok开发的一个改良版,由于域名在国内,所以解决了访问慢的问题,但是这个版本现在已经无法使用

    第三个版本也是国内开发出的一个版本,可以自定义主机名,还可以自定义域名(前提是你有一条域名),很好的解决了原生ngrok的那两条缺陷.

    ,环境搭建步骤

             我们这里主要来介绍sunny-ngrok版本的搭建方法;

            1、访问ngrok授权管理系统(http://www.ngrok.cc/login),点击注册,注册帐号。

           

            2,注册一个新的账号,如下如所示:

            

     

             3,注册成功以后点击登录进入ngrok授权管理系统的主界面,然后点击左侧菜单栏中的隧道管理----》开通隧道,进入下面的界面,


              

         进入界面以后提供隧道的两种购买方式,一种是付费的,一种是免费(其实两者的区别就是带宽的不同,如果只是做测试用,10M带宽肯定够用)

         然后点击立即购买;将会出现下面的界面

     

          注意:1.隧道协议选择http协议;

                    2.填写隧道名称以及前置域名

                    3.把上面本地端口改成127.0.0.1:8080

        然后点击确定添加

        4.确定添加成功后跳转到新的界面下,继续点击左侧菜单中的隧道管理,出现下面的界面,并且要复制隧道id

      


      5.下载ngrok的客户端

         访问下面的网址http://www.ngrok.cc就可以下载客户端,如下图所示:


             下载到本地的D盘中,然后解压,如下图所示:





    6.输入上文的隧道id,然后回车。如下图所示:



    到此ngrok的环境搭建已经完成,下面就是测试,测试的时候在项目中启动tomcat,用http://127.0.0.1:8080/访问能访问到

    同时用http://****.ngrok.cc/也能访问到;


    7.最后一步就是把该域名配置到微信公众平台上就ok了,大功告成。。。。。。


    展开全文
  • 学习微信公众号的开发,必须先阅读微信开发文档,通过阅读文档,了解有关微信公众开发的步骤及相关限制,了解其工作原理等。 微信开发之入门指引 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
  • 登录微信公众平台 找到开发者工具 点击公众平台测试账号 配置测试账号 填写信息 注意点: URL 对应的服务必须启动状态 Token 可随意填写 往下翻,找到网页服务 点击修改,填写回调地址 注意点: 授权...
  • 1.首先,你需要一个具有公网IP的域名 ...进入 开发-&gt;开发者工具 页面 点击 公众平台测试账号 如下图所示: 3.配置服务器和js接口安全域名 如下图所示: 第一步,配置服务器。点击修...
  • 进入开发者工具:公众号页面左下角 进入公众平台测试账号:开发者工具页面中...注意:本次微信开发专题,全部使用spring boot进行开发。 CODE:servletimport java.io.IOException; import java.io.PrintWriter;im
  • 上一章给大家分享的是开发微信公众号(三) , 今天继续更新第四篇 搭建本地测试环境。 推荐一款软件: Ngrok(内网穿透工具) Ngrok可以实现内网穿透,也就是说我们可以将内网的服务器映射到外网给别人访问,这对于...
  • 最近微信发布了微信小程序内侧,各位程序员们是不是...本系列实战文章为大家介绍微信开发的相关知识,包括公众号申请、接口开发等。并为程序员们提供微信开发开源代码。后期也会出一些教学视频,和大家一起交流学习。
  • 仅适合需要在本地测试前后端分离项目,并需要在企业自建应用上访问自己网页的情况 1. 所需软件: Sunny-Ngrok:内网穿透软件http://www.ngrok.cc/ Nginx-1.17.10:反向代理服务http://nginx.org/en/download.html...
  • 1,首先要布置一个内网穿透,将本地微信项目映射到外网,以便通过外网进行手机端微信项目测试。 内网穿透工具有很多,随意选择,我选择的natapp,附上下载地址(https://natapp.cn/)。用这个好处是拥有免费的通道...
  • 要做微信公众号开发,两样东西不可少,那就是要有一个用来测试的公众号,还有一个用来调式代码的开发环境测试公众号 微信公众号有订阅号、服务号、企业号,在注册的时候看到这样的信息,只有订阅号可以个人申请...
  • 面对以上的问题,微信官方给出了解决的方法,就是咋们这篇文章的沙箱环境,也就是微信支付的官方测试环境,这个环境能做些什么呢?我觉得最重要的一点就是我们可以实时根据官方的例子调用对应的接口,并且接口会马上...
  • 这篇文章是对慕课网mpvue实战项目视频过程中环境配置的总结与更新(因为小程序文档时不时就更新) 项目源码:https://github.com/suhuashan/bookCommentSystem 如果对你有帮助,请赐给我star~. 视频如果需要...
  • 微信支付–在本地弄测试环境
  • 前言: 一、现在越来越多的web项目都集成到微信公众号中,针对小型项目有诸多好处:一是可以免去专门编写一个用处不大的app,缩短...由于微信开发文档要求必须在公网能访问到项目,这就使得我们在开发过程中不得不...
  • 微信测试号接口配置

    2020-02-24 11:17:17
    微信小程序或者微信公众号开发的时候,这个接口配置永远的是微信后台开发的第一步。 1、用你自己的微信公众号或者使用微信测试号,这里我用的是微信测试号,进去后扫描登录即可,测试号拥有正常公众号的大部分...
  • 微信局域网测试环境搭建方法 微信现在越来越火,很多人想自己研究一下微信开发,但在开发平台认证的时候,必须通过80端口认证。 很多的宽带服务商把公司宽带的80端口封了, 而微信开发模式中服务器配置要求填写”...
1 2 3 4 5 ... 20
收藏数 50,973
精华内容 20,389