vue公众号项目打包成html5并通过ngrok进行内网穿透充值

一 使用前说明:

1. 需要安装Hbuilder,并且在里面配置svn
2. 需要安装微信开发者工具
3. 需要有内网和线上服务器，内网和线上服务器中都安装了docker
4. 线上服务器中安装ngrok，并且有对应的域名，如果是需要微信支付还需要AppId、Secret，WebUrl、充值消息模板
5. 本地下载了ngrok
6. 有对应的商务号、微信公众号（充值需要，其余的时候不需要）
7. 能看懂vue、html5
8. 能使用vim编辑配置文件

二使用svn下载vue项目

svn的路径	windows存放安装位置	内网服务器存放安装位置
http://192.168.20.101/svn/tw/projects/saas_platform/web/wechat-web-customer-vant	F:\work\project\nenghaotong_new\unpackage\dist\build\h5	/docker/nginx/www/deploy/nenghaotong_new

三hbuilder中导入vue项目

四修改配置文件

注意：将内网和线上的配置文件都改为本地地址

本地配置

线上配置

五启动公众号代码，查看公众号代码是否正常

本地进行验证公众号是否可以正常运行

之后会在微信开发者工具中打开公众号
一般是localhost:8080

把ip换成本地ip

六将公众号打包为h5

七将打包好的代码通过xftp传到内网环境中

八 在内网的环境中配置nginx的配置

cd   /docker/nginx/conf
vim nginx.conf

server {
        listen 8107;
        server_name localhost;
        location ^~ /user_api/{
                proxy_pass   http://192.168.20.113:8073/;
                proxy_set_header   Host             $host;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                add_header From www.weixin4j.org;
                proxy_set_header Cookie $http_cookie;
        }

        location ^~ /term_api/{
                proxy_pass   http://192.168.20.113:8074/;
                proxy_set_header   Host             $host;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                add_header From www.weixin4j.org;
                proxy_set_header Cookie $http_cookie;
        }

        location ^~ /rech_api/{
                proxy_pass   http://192.168.20.113:8072/;
                proxy_set_header   Host             $host;
                proxy_set_header   X-Real-IP        $remote_addr;
                proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                add_header From www.weixin4j.org;
                proxy_set_header Cookie $http_cookie;
      }

 location / {
           charset utf-8;
           root  html/deploy/nenghaotong_new/;
           index  index.html;
           if ($request_filename ~* .*\.(?:htm|html)$)  {
             add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
           }

           if ($request_filename ~* .*\.(?:js|css)$)  {
             expires      30m;
           }

           if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)  {
              expires      30m;
           }
        }
    }

九 重启nginx

docker restart nginx

十启动线上的ngrok

docker restart ngrok

十一配置本地的ngrok服务

ngrok.cfg

server_addr: "ngrok.tw-iot.cn:4443"
trust_host_root_certs: false

tunnels:
  test:
    proto:
      http: 192.168.20.112:8107

start.bat

ngrok.exe -config=ngrok.cfg start test

双击start.bat

十三 微信公众号访问

注意：绑定房间的时候，用户的openId必须完整
通过网址访问：
http://test.ngrok.tw-iot.cn/?orgId=anyone&openId=abcd

十四 充值

如果希望充值成功，需要启动recharge服务，并且在113中修改它的配置

cd /docker/config/saas-service-recharge
vim saas-service-recharge

#callback.host=http://test.ngrok.tw-iot.cn
callback.host=http://test.ngrok.tw-iot.cn/rech_api