微信公众号网页开发之旅使用jssdk(踩坑之旅

2020-6-20 15:27:32
学习记录
169

微信公众号网页开发之旅使用jssdk(踩坑之旅)

好久没有写文字,因为最近在学习React 和 RN ,学习过程中也遇到了一些坑,好在网上有很多教程都可以找到。ok话不多说,言归正传,今天来说一下微信公众号 网页开发日常所遇到的问题和解决方案。

正好最近接了一个 微信公众号开发的小单子,所以就看着文档走了一下大致流程,下面一一叙述一下每个步骤会遇到的问题和解决办法,由于要使用微信的jssdk,所以需要配置一些东西

一、公众号配置遇到的坑

下面使用测试账号来演示公众号配置

测试号申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

微信公众号.png

1.接口配置信息

​ 这里没有什么特别说明的,只需要填写一个能够接收微信服务器的 GET 请求,并且进行对比后,返回微信传过来的 echostr 就行。

Koa示例代码:

/*other code...*/
app.use(async (ctx) => {
  if (ctx.url == "/token" && ctx.method == "GET") {
     let { echostr } = ctx.request.query;
  	 ctx.body = echostr;
  }
});
/*other code...*/

这里只是简单配置,实际开发中,请根据消息接口指南 :https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html,进行校验。

注意:Token 自己随意填写

2.JS接口安全域名

域名需要填写前端项目地址的域名,如果想要本地调试微信网页,则需要配置反向代理,如果想要手机也可以预览,则还需要配置代理服务器

二、环境配置遇到的问题

1.mac本地调试公众号网页配置

配置反向代理

​ mac自带了Apache,使用Apache进行反向代理,首先把地址映射到本机

  1. /private/etc/apache2/httpd.conf 找到下面的4条,解开注释

    LoadModule proxy_module libexec/apache2/mod_proxy.so
    LoadModule proxy_connect_module libexec/apache2/mod_proxy_connect.so
    LoadModule proxy_ftp_module libexec/apache2/mod_proxy_ftp.so
    LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
    
  2. /private/etc/apache2/httpd-vhosts.conf 添加一个反向代理规则

    <VirtualHost *:80>
        Header set Access-Control-Allow-Origin *
          <Proxy *>
              Order deny,allow
              Allow from all
          </Proxy>
          <Location />
              ProxyPass http://localhost:8080/
              ProxyPassReverse http://localhost:8080/
          </Location>
          <Location /token>
              ProxyPass http://localhost:3000/token
              ProxyPassReverse http://localhost:3000/token
          </Location>
          <Location /getconfig>
              ProxyPass http://localhost:3000/getconfig
              ProxyPassReverse http://localhost:3000/getconfig
          </Location>
    </VirtualHost>
    
  3. 添加域名映射到本机

127.0.0.1	localhost
127.0.0.1	wx.9cka.cn

这样就可以在本地通过访问 wx.9cka.cn 就会映射到 http://localhost:8080/ 其中wx.9cka.cn/ 就是安全域名

2.手机端拦截代理转发

需要电脑和手机在同一局域网下

**mac 需要安装 Charles **
image20200620151408143.png
WX20200620151615.png
WechatIMG11.jpeg
配置好后 Charles 点提示 allow即刻

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com