记基于react的一次微信公众号开发

微信公众号开发流程配置

微信公众号的基本配置选项中:

1, 获取appId和appSecret(如果查看不到, 可以选择重置, 获取之前开发项目中查找).
2, 设置白名单: 设置访问接口的ip地址

微信公众号的公众号设置的功能配置下:

1, 设置JS安全回调域名
2, 设置网页授权域名
注: 需要下载安全文件到web工程根目录下, 并且项目发布到服务器中.

React 开发

react脚手架创建项目:

npx create-react-app my-app // npx 并不是拼写错误
cd my-app
npm start

配置package.json, 一下是我常用的需要用的格式

    "antd-mobile": "^2.2.13",
    "axios": "^0.18.0",
    "moment": "^2.24.0",
    "query-string": "^6.5.0",
    "react-loadable": "^5.5.0",
    "react-router-dom": "^5.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"

设置字体:
项目的src目录下 创建fonts文件夹, 将字体文件放入其中
index.css文件下, 设置

@font-face {
  font-family: 'myFont';
  src: url('./fonts/字体名称.tff);
}

内网穿透

在微信端web开发工具调试程序有时候不如直接在真机上来的真实, 毕竟到真机上也会有各种问题, 在开发者工具上看不到
通过ssh端口转发实现内网穿透, 想要实现效果: 本地服务为http://127.0.0.1:3000, 服务器为xx.xx.xx.xx的ip地址, 通过服务器监听8080端口, 通过访问xx.xx.xx.xx:8080直接访问到http://127.0.0.1:3000上面, 也就是说本地访问http://127.0.0.1:3000相当于访问xx.xx.xx.xx:8080这个地址了. 方便调试啊.

ssh -R 8080:127.0.0.1:3000 [email protected]
输入登入密码

常见问题

1, 微信授权获取用户昵称, 头像, 需要通过sessionStorage存储授权状态
2, 授权之后根据window.location.search获取code 获取用户信息
3, 如调用了js-SDK 需要对其进行授权操作, 配置wx.config文件
4, 配置wx.config文件报错: 一般问题有: 后台设置JS完全域名与当前域名不一致.