Rails [微信开发] 开发环境搭建

playmonkey · 发布于 2015年07月11日 · 最后由 xtunnel 回复于 2015年12月27日 · 12874 次阅读
1770
本帖已被设为精华帖!

由于微信开发都是在微信内浏览器运行,不管是登陆还是支付都不能在PC开发端愉快地玩耍,但世界我们还是需要拯救的。

由于自己换了新电脑,第一次做微信开发跟大家分享一下我的开发环境,欢迎拍砖交流。

一般的第三方开发永远离不开两个配置,域名 & 回调,有一些平台支持localhost的域名&回调会方便,更有支持随意更改端口的,微信上面貌似都没有 💢

好了,假定我们的域名是playmonkey.me

域名


微信登陆,JSAPI以及支付都有域名限制,所以需要让手机微信上打开palymonkey.me时,访问到我们本地的development server。

干这个勾当的当属 Charles 神器。

  • 下载安装打开Charles
  • Proxy -> Proxy Setting -> Http Proxy勾选Enable.... 开启http proxy代理,端口默认是8888
  • Tool -> DNS Spoofing Settings 勾选Enable DNS Spoofing
  • 然后把palymonkey.me加到DNS Spoofs,指向本机127.0.0.1

Charles好了,下一步配置手机,确保你的手机网络和电脑在同一局域网,配置手机的HTTP代理到电脑的IP上,端口8888;

访问http://playmonkey.me

什么?挂了?当然,酱紫访问的是本地的80端口。

好了,我们再来用 Nginx 反向代理搞定这个问题,让手机端的playmonkey.me访问到本地development server的3000端口上。

首先安装启动Nginx,用Apache的朋友对不起了,你们要自食其力XD

配置Nginx

server {
      listen 80;
      server_name playmonkey.me;
      charset utf-8;
      location / {
        proxy_pass          http://monkey_servers;
        proxy_redirect      default;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_set_header    Host $http_host;
        proxy_next_upstream http_502 http_504 error timeout invalid_header;

      }

    }
    upstream palymonkey_servers{
      server 127.0.0.1:3000;
    }

再用手机访问http://playmonkey.me ,Nice....这回看到页面了。 到此我们可以在微信上用playmonkey.me访问本地的dev server,可以愉快地调用JSAPI & 微信oauth登陆 & 发起支付。

噢,如果做的是PC端的oauth微博登录怎么办? 在本地host加上 127.0.0.1 palymonkey.com。Nice XD、

异步回调


上面说到发起支付,微信的支付结果是通过异步回调的,所以需要做内网穿透,这里推荐两个工具 ngrok OR localtunnel

localtunnel

localtunnel 是node写的,用起来非常简单

$ npm install -g localtunnel
$ lt --port 3000
your url is: https://gqgh.localtunnel.me

这样外网打开https://gqgh.localtunnel.me 就可以访问到本地的3000端口

但是localtunnel是国外的,公司网络刚刚搭好,经常不稳定果断抛弃转入ngrok;

ngrok(不想折腾的可以忽略XD)


悲催的是ngrok也是国外的,而且服务器给墙了,BUT,问题不大,我们可以pull ngrok 1.X的源码自己编译,2.0会报证书错误如果没有合法的https证书。

好了我们来编译ngrok,噢,对了,ngrok是Go写的,编译出来直接是一个可执行文件,爽歪歪有木有,哈~

在服务器端(每家都有一只staging服务器吧)


NGROK_DOMAIN 设置为您自己拥有的域名,并指向Ngrok server运行的服务器

NGROK_DOMAIN="my.domain.com"
git clone https://github.com/inconshreveable/ngrok.git
cd ngrok

openssl genrsa -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -subj "/CN=$NGROK_DOMAIN" -days 5000 -out rootCA.pem
openssl genrsa -out device.key 2048
openssl req -new -key device.key -subj "/CN=$NGROK_DOMAIN" -out device.csr
openssl x509 -req -in device.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out device.crt -days 5000

cp rootCA.pem assets/client/tls/ngrokroot.crt
# make clean
make release-server release-client

编译完有两个可执行文件 bin/ngrok & bin/ngrokd 将bin/ngrok copy到你本机 在服务器上开启ngrok server bin/ngrokd -tlsKey=device.key -tlsCrt=device.crt -domain="$NGROK_DOMAIN" -httpAddr=":8000" -httpsAddr=":8001"

本地端


NGROK_DOMAIN="my.domain.com"
echo -e "server_addr: $NGROK_DOMAIN:4443\ntrust_host_root_certs: false" > ngrok-config
./ngrok -config=ngrok-config -subdomain=playmonkey 3000 // 配置subdomain到本地3000端口,这样外网通过playmonkey.NGROK_DOMAIN 就可以访问到本地dev server的3000端口

或者用SSH forwarding

./ngrok -config=ngrok-config -subdomain=3000 --proto=tcp 22

以上Ngrok编译&配置出自 How to setup Ngrok with a self-signed SSL cert

至此我们在发起微信支付时回调URL的HOST就可以设置为playmonkey.NGROK_DOMAIN

至此我们可以愉快地开发测试 微信的oauth登录 & JSAPI & 支付 & 支付回调,好吧,很多BUG一点都不愉快。 另外感谢 @ruby_sky这篇微信支付文章 微信支付做起来如丝般顺滑; 内微信文档看起来太蛋疼了,各种配置也是找半天😵,大家有兴趣我可以总结一下微信各个开发的各种配置XD。

共收到 38 条回复
273

Thanks,文章写得不错。

9695

似乎图片挂了?麻烦你调整一下吧。

1770

#1楼 @ruby_sky 😄 谢谢,欢迎交流拍砖

1770

#2楼 @pengedy 看来不让外链....,就两张charles的配置图 XD

9695

#4楼 @PlayMonkey 总之是不错的文章,学习了。

945

非常感谢,说的很细致了!

F916e5

感谢。我先mark以下

9618

先mark

4209

还是挺利索的。

3196

支付推荐ping++

4257

#11楼 @ryan 也在用,简单方便 。

1770

#11楼 @ryan ping++确实好用,一些原因没用,哎~

3196

#13楼 @PlayMonkey 有机会最好迁移啦,关键支付途径他已经支持很多了,尤其对电商网站有用

341

#异步回调# 这部分还是值得参考学习的,支付什么的都会有涉及,需要公网IP,要么就是公网IP机器映射到本地,不过还是文章写的这种方式更优雅。

#移动设备绑定本地域名# 也实用。

感谢分享

7966

mark一下

3910

可以考虑搞个hiwifi活着huawei路由器,PAT,花生壳什么的都直接搞定了。

9917

赞 Mark 一个

19704

Mark 瞬间觉得以前的方法好low

5255

如果用 Ngrok 1.x 可以用 http://www.tunnel.mobi/ 可以解决墙的问题。

1770

#20楼 @allenfantasy tunnel.mobi 是国内某位仁兄搭的ngrok搭的服务器,因为我们有很多交易数据所以自己搭建了XD

6553

#2楼 @pengedy pengpeng的梦想是什么

9695

#22楼 @zzz6519003 歪楼啊... 我的梦想是找个妹子一起骑马走天下

6812

已被微信强奸

96

我的经验是使用二级域名。。

4720

给ngrok的作者写邮件说明了US节点被墙了,他回复说会在新加坡节点再搭个服务,期待下。

不过自己搭有个好处就是如果你的域名是备案的,那js-sdk也能在本机调了

1770

#26楼 @goofansu ngrok只是在异步回调会用到,本机调用js-sdk用Charles做代理搞定域名,在本机就可以调了

9800

微信居然没有开发接口。。。

1770

#28楼 @pynix 支付宝也是一分钱测试 😢

4720

#27楼 @playmonkey 谢谢指出。我是想在开发的时候让别人也能访问微信服务号的功能,用Charles的话还要让别人改代理,增加了些使用成本。自己开发的话用Charles是可以的。

另外请教下,现在是不是只有微信支付才会要处理异步回调?我的服务号是公司的,还没开通支付功能,不知道实际是什么样子的。谢谢

1770

#30楼 @goofansu 对的,只有支付会有异步回调,当然也有主动查询支付结果的API可以用XD

395

这篇文章非常有用!

19837

不错

Abca79

微信企业号的回调模式 : 企业号里面的应用交互首先是应用把消息推送给微信的服务器 。 然后触发回调请求 。 感觉上是必须要经过微信的服务器 。不知道我说错了没有

1770

#35楼 @so_zengtao 微信企业号?

20103

感谢楼主~非常有用~

96

xtunnel开源内网穿透,图形界面,功能更强大 https://github.com/d1sm/xtunnel

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册