微信sdk的本地开发

1.前置知识点

1.1 默认端口为80

localhost === localhost:80
www.baidu.com === www.baidu.com:80
微信安全域名不能带上端口号 所以我们得将前端项目在80端口上访问
即监听80端口然后转发到npm run dev 时真正的端口

1.1.1 这里要解决两个问题

1. 80端口
2. 跨域

这里提供两个解决方法，本篇教程将使用nginx的方法解决

1. 将webpack的devServer配置成 在80端口上访问然后在node后台上设置 cros *
2. 前端和后台不做额外配置 将nginx监听80端口然后转发前端页面和后台接口到相应的端口

1.2 微信sdk在配置了安全域名后才能使用

1.2.1 解决方法

natapp可以将本地访问前端项目的地址穿透到外网

1.2.2 注意点

因为我们使用了nginx转发 所以我们前端项目下在本地的访问地址的端口号80

image

2.主要有一下几步

1. 安装微信sdk
2. 配合natapp配置微信安全域名
3. 使用nodejs编写微信后台
4. 使用nginx转发接口
5. 微信开发者工具上测试
6. 将配置微信分享的代码发布到npm包

2.1 安装微信sdk

  yarn add weixin-js-sdk

2.2 配合natapp配置微信安全域名

natapp可以穿透本地端口
将http://iamtyt.natappfree.cc/ 穿透到本地前端开发时的端口 127.0.0.1:80
这边<b>注意</b>要将本地端口号改为<b>80</b>因为在“4.使用nginx转发接口”中项目将在80端口上进行开发

2.3 使用nodejs编写微信后台

2.4 使用nginx转发接口

这里说一下为什么要使用nginx

1. 微信安全域名不能带上端口号（默认为80）所以要讲默认端口号转发到开发时（npm run dev）的端口

2. 当项目在80端口上打开时发生请求会出现跨域问题，所以将/api/开头的地址也转发到node服务（node index.js）的端口

nginx的配置

    server {
        # 监听80端口号
        listen 80;

        location / {
            # 把页面的请求转发到前端服务所在的端口
            proxy_pass http://192.168.4.13:8081;
        }

        location /api/ {
            # 把接口的请求转发到后端服务所在的端口
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_pass http://192.168.4.13:3000;
        }
    }