微信开发测试环境搭建

2018-07-31 14:39:51 myth13141314 阅读数 16342

Mac环境下

问题的提出

  • Windows环境
  • 方便快捷地搭建小程序的测试服务器
  • 小程序对于网络请求的URL的特殊要求
    • 不能出现端口号
    • 不能用localhost
    • 必须用https

主要步骤

  • 用json-server搭建简单地服务器,搭建出来的服务器地址为localhonst:3000
  • 安装nginx进行反向代理,以便隐藏端口号和替换localhost
  • 搭建https服务
  • 微信小程序设置

用到的工具

  • json-server
  • nginx
  • openssl
  • 微信小程序官方开发工具

首先需要在windows环境下安装node.js

Node.js下载地址

选择对应的系统版本

选择 Windows Installer 下载对应的系统版本就行,然后一路next。这种方式安装好以后会把环境变量也配置好了,直接在命令行下输入:

//出现对应的版本号信息就表示安装成功了
node --version

安装过程出现这个错误直接点击右上角的叉叉关闭就好

json-server的使用

  • 安装
npm install -g json-server
  • 选一个文件目录新建json文件,比如cars.json
{
  "cars": [
    {
      "id": 1,
      "desc": "哈弗H6",
      "completed": false
    },
    {
      "id": 2,
      "desc": "吉利博越",
      "completed": false
    },
    {
      "id": 3,
      "desc": "宝骏560",
      "completed": false
    }
  ]
}
  • 启动json-server服务:在新建的json文件目录,运行命令:json-server + 文件名
json-server cars.json

输出:

Loading cars.json
Done

Resources
http://localhost:3000/cars

Home
http://localhost:3000
  • 浏览器中输入地址http://localhost:3000/cars就能看到输出cars.json的内容
  • 至此,就搭建了一个简单的本地测试服务器,json-server支持get,post等,基本足够开发测试用了,具体的可以参考json-server官网
  • 为了将localhost:3000/todos这样的接口改成www.test.com/todos这样的形式,就需要用nginx进行反向代理

用nginx进行反向代理

  • nginx下载地址

  • nginx安装更简单,从上述地址下载好以后直接解压到自己的目录就行了

  • 到nginx的解压目录,找到nginx.exe文件,双击就启动了。当然也可以用命令行,后面会有常见的命令介绍

  • 浏览器中键入http://localhost:8080,访问到nginx的欢迎界面,即表示nginx安装成功
  • 配置nginx的反向代理:编辑nginx.conf文件。这个文件就在nginx.exe所在的目录中的conf文件夹

  • 修改nginx.conf文件中的server{}内容。这里要注意的是,conf文件里面主要有2个server{},一个是默认监听http请求的8080端口的,另一个是https请求的。其中https server默认是注释掉的

server {
   listen       80;//将原来的8080改成80端口,这样就能隐藏请求中的端口号了
   server_name  www.test.com;//这里改成你想要的测试域名
   location / {
        proxy_pass http://127.0.0.1:3000/;//需要代理的地址,这里是我们json-server的默认地址
    }
    ...
}
  • 重启nginx服务

  • 不要忘记将你的测试域名加入到hosts文件中啊!!!

//hosts文件中添加测试域名
127.0.0.1 www.test.com
  • 经过以上的设置,nginx代理的设置的完成了。启动json-server后可以用一下方式访问浏览器
localhost/cars
localhost
www.test.com
www.test.com/cars
其他问题

nginx常用的命令(需要在nignx.exe所在目录下,当然也可以添加到环境变量里面去)

  • 启动
nginx.exe
或者
start nginx
或者
双击nginx.exe
  • 停止
nginx.exe -s stop
或者
nginx.exe -s quit
  • 重启
nginx.exe -s reload

windows修改hosts

  • hosts文件目录在:C:\Windows\system32\drivers\etc
  • 修改hosts文件需要先拷贝一份hosts文件到非系统盘的目录,比如桌面,然后再修改桌面的hosts文件,最后再把修改的hosts文件拷贝到系统hosts文件的目录,弹出警告后选择确认替换

https服务安装

利用openssl生成证书
生成ssl密钥
  • 设置server.key。过程中需要输入key的密码,这个密码要记住,后面生成私钥会用到
openssl genrsa -des3 -out server.key 1024
  • 参数设置。这个过程中会让我们输入一些信息,比如国家、地区、组织等,直接输入“.”不设置,但是不要一个都不设置,否则会无法生成server.csr文件
openssl req -new -key server.key -out server.csr
  • 写RSA秘钥,密码就是server.key的密码
openssl rsa -in server.key -out server_nopwd.key
  • 获取私钥
openssl x509 -req -days 365 -in server.csr -signkey server_nopwd.key -out server.crt
修改nginx配置文件nginx.conf
server {
   listen       80;//将原来的8080改成80端口,这样就能隐藏请求中的端口号了
   server_name  www.test.com;//这里改成你想要的测试域名

   //主要是增加下面三行
   ssl on;
   ssl_certificate D:\MyWorkSpace\json-server\server.crt;//你的证书地址
   ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;//私钥地址

   location / {
        proxy_pass http://127.0.0.1:3000/;//需要代理的地址,这里是我们json-server的默认地址
    }
}
  • 以上配置以后,用http://www.test.com/cars访问浏览器会出现400 bad request的问题,用https://www.test.com/cars又会出现net::ERR_CONNECTION_REFUSED
  • 继续修改nginx.conf,主要是修改https server{}模块,主要修改点:
    • 将https server{}模块注释去掉
    • 添加ssl相关配置
    • 添加代理设置
# HTTPS server
#
server {
    listen       443 ssl;
    server_name  localhost;

    ssl_certificate D:\MyWorkSpace\json-server\server.crt;//你的证书地址
    ssl_certificate_key D:\MyWorkSpace\json-server\server_nopwd.key;//私钥地址

    location / {
        proxy_pass http://127.0.0.1:3000/;
                root   html;
          #      index  index.html index.htm;
    }
}
其他问题
  • Chrome中老是访问的不是安全的链接
需要将我们前面生成的证书crt文件添加到系统证书里面,并设置为一直信任
  • 启动nginx报错
nginx: [emerg] bind() to 0.0.0.0:443 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)

后面查出原因是443端口被VMware占用了,直接卸载了VMware就可以了。

微信小程序配置

  • 登陆微信小程序管理页面,设置–>开发设置–>服务器域名–>添加自己的测试域名。需要注意的是一个月只能修改5次
  • 利用微信小程序打开项目,在配置信息中点击刷新,即可看到刚刚修改的域名
  • 在需要网络请求的地方添加log打印,以便查看返回的结果信息
wx.request({
  url: 'https://www.test.com/cars',
  method:'GET',
  header: {
    'content-type': 'application/json'     
  },
  success: function (res) {
    console.log(res.data)
  }
})
showRequestInfo()
  • 如果一切正常的话,在调试界面的conole下会输出json-server服务器返回的objects列表,也就是我们编写的cars.json文件的内容
其他问题
  • 网络请求服务器API的时候报此服务器的证书无效.
在项目页面的基础信息中,勾选下面的“开发环境不校验请求域名以及TLS版本

以上就是windows下搭建小程序服务器的过程



欢迎关注我的公众号,和我一起每天进步一点点!
这里写图片描述

2018-05-05 17:49:12 sinat_36553913 阅读数 3499

说明

公司需要开发微信服务号,要求做有关技术验证,学习了微信公众号的开发,在这里记录总结下。

正文

      学习微信公众号的开发,必须先阅读微信开发文档,通过阅读文档,了解有关微信公众开发的步骤及相关限制,了解其工作原理等。

微信开发之入门指引

      通过阅读入门指引,发现在正式开发之前必须要具备几个条件:1.申请微信公众号 2. 后台服务器 3.开发者配置

申请测试公众号

在微信官网申请公众号时,发现目前公众号只有两类帐号:服务号和订阅号,个人只能申请订阅号。原来的企业号变为企业微信,增加了微信小程序。申请地址为:https://mp.weixin.qq.com/
这里写图片描述

通过阅读微信文档的公众号接口权限说明,发现未经认证的订阅号接口权限十分有限,无法完成接下来的技术验证。
这里写图片描述
这里使用微信提供的在线测试平台,申请一个接口测试号完成有关技术验证。地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
这里写图片描述

使用自己的微信号通过扫码即可申请一个测试号
这里写图片描述
微信会自动为测试号分配appID和appsecret,这两个参数是开发的关键。
测试号申请到这里就结束了,接下来配置服务器。

配置本地服务器

阅读微信开发文档时发现,服务器必须外网可以访问且端口为80。要么需要购买云服务器,但这对我们开发调试有很大的不便,这里我使用了内网穿透工具实现外网访问,将本地的tomcat作为后台的应用服务器。
工具为NATAPP,使用此工具可以自动将它产生的域名映射为本地的ip地址+端口。地址:https://natapp.cn/
这里写图片描述

在下方的客户端下载中选择适合自己电脑的版本
这里写图片描述

下载成功后需要注册登录申请免费隧道,每个用户可以拥有两条不同协议的隧道,免费隧道域名随机分配且会强制更换,这点在开发时需要注意,需要在微信配置中随时更换URL。
这里写图片描述

在申请时注意隧道协议为web,且本地端口为80
这里写图片描述
申请好会为隧道分配一个authtoken,这个token时让NATAPP可以运行起来的关键,接下来在运行前必须配置文件,关于配置文件的下载地址:https://natapp.cn/article/config_ini ,更多教程参考:https://natapp.cn/article/natapp_newbie
配置文件必须与之前解压的natapp.exe在同一级目录,然后将得到的authtoken填入保存。
这里写图片描述

运行结果为:
这里写图片描述
这里可以看到随机分配的域名指向了本地的80端口。这里的域名就是测试号配置URL需要填写的参数。

关于本地服务器的搭建到这里就结束了,接下来在之前申请的测试号中进行配置。

配置测试号

在配置之前必须搭建一个web项目,因为填写配置时微信服务器会向后台进行验证,后台给出正确的响应才会配置成功。这里我使用了SpringBoot构建web项目,关于SpringBoot如何构建web项目,可以在网上查阅相关资料,对于SpringBoot的学习推荐翟永超的博客程序猿DD。关于如果将SpringBoot项目部署到本地Tomcat中请参考另一篇博文《将Spring Boot项目部署到本地Tomcat中》

这里写图片描述
URL即为NATAPP运行时得到的域名,Token随意填写,程序中需要使用。

校验代码:

@RequestMapping(value="hello", method = RequestMethod.GET)
    public void hello(HttpServletRequest request,
                        HttpServletResponse response){
        System.out.println("success");
        String signature = request.getParameter("signature");
        String timestamp = request.getParameter("timestamp");
        String nonce = request.getParameter("nonce");
        String echostr = request.getParameter("echostr");

        PrintWriter out = null;
        try {
            out = response.getWriter();
            if(CheckUtil.checkSignature(signature,timestamp, nonce)){
                out.write(echostr);
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            out.close();
        }

    }

在校验类CheckUtil中对微信服务器传来的参数进行校验

import java.security.MessageDigest;
import java.util.Arrays;

public class CheckUtil {
    public static final String tooken = "testdemo";
    public static boolean checkSignature(String singnature, String timestamp, String nonce){
        String[] arr = {tooken, timestamp,nonce};
        Arrays.sort(arr);
        StringBuilder sb = new StringBuilder();
        for(String s : arr){
            sb.append(s);
        }
        String temp = getSha1(sb.toString());
        return temp.equals(singnature);
    }

    private static String getSha1(String str){
        if(str==null||str.length()==0){
            return null;
        }

        char hexDigits[] = {'0','1','2','3','4','5','6','7','8','9',
                'a','b','c','d','e','f'};

        try {
            MessageDigest mdTemp = MessageDigest.getInstance("SHA1");

            mdTemp.update(str.getBytes("UTF-8"));

            byte[] md = mdTemp.digest();
            int j = md.length;
            char buf[] = new char[j*2];
            int k = 0;

            for (int i = 0; i < j; i++) {
                byte byte0 = md[i];
                buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
                buf[k++] = hexDigits[byte0 & 0xf];
            }

            return new String(buf);

        } catch (Exception e) {
            return null;

        }
    }
}

能正常响应时,就会出现配置成功,接下来就可以进行验证开发了。

2016-09-06 16:07:59 chen517611641 阅读数 4738

##准备工作
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了。

2020-05-11 11:41:24 Xiong_j_L 阅读数 145

0. 适用范围

适合需要在本地测试前后端分离项目,并需要在企业自建应用上访问自己网页的情况

1. 所需软件:

Sunny-Ngrok:局域网软件  http://www.ngrok.cc/

Nginx-1.17.10:反向代理服务 http://nginx.org/en/download.html

2. 本地环境:

Windows10 、 Java 1.8

3. 相关安装与配置:

Java、Nginx的安装忽略不表。 主要说明Ngrok与Nginx的配置

3.1 Sunny-Ngrok安装与配置

在对应网站注册后,配置如下。其中名称和前置域名随意填写,协议可选http、https。

其中https需要你自行使用SSL构建一个本地证书,并设置本地端口为 127.0.0.1:443。

正式服务器建议申请证书。

接下来,下载客户端 http://www.ngrok.cc/download.html , 根据自身的系统环境下载

启动运行脚本

它会要求你输入客户端id,可在刚刚创建代理的网页里查询。

复制粘贴回车。

脚本中显示Online表示启动成功

3.2 Nginx安装与配置

Nginx在Windows下不需要安装,配置后直接启动就可以。

以下是对应的配置文件。


#user  nobody;
#nginx进程数
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		# 设置前端位置
        location / {
            root   D:\\workplace\\wx-cp-html\\HTML;;
            index  index.html index.htm;
        }
		# 设置后端接口URL
		location ~^/wx/cp {
			proxy_set_header Host $host;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://127.0.0.1:8081;
		}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }     
    }
}

启动Nginx

在Windows下,直接运行nginx.exe即可。

在Nginx/logs/  目录下有启动日志,若果启动失败,可以查看error.log中的错误信息,一般来说,启动失败都是端口占用导致的。

启动成功后,logs下会生成nginx.pid文件,里面保存的是Nginx主进程ID号

4.测试

通过域名访问

注意跟上 index.html , 因为代理采用的IIS ,在nginx配置自动访问主页暂不成功。

测试接收企业微信消息

后台启动端口

在应用发送消息 1 

后台接收

后端RequestMapping 请和自己配置的Nginx保持一致,以下是我的配置

@RestController
@RequestMapping("/wx/cp/portal/{agentId}")

 

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