前段时间用React写了几个微信公众号的网页，遇到的主要阻力就是微信的网页授权问题和JS-SDK使用问题。

1. 网页授权

根据微信官方网页授权介绍，只有在需要获取用户信息时，才需要用到微信网页授权机制。关于如何进行网页授权，官方文档已经介绍很详细了，这里主要记录一下使用过程中遇到的问题以及需要注意的地方。

1.1 网页授权access_token

由于一个公众号的网页授权access_token是所有人共用的，如果每个需要用到授权的服务都自己调用微信提供的获取access_token的接口，每调用一次都会刷新一遍access_token，之前的access_token将会过期，access_token也就无法实现缓存。而access_token默认是2小时内有效的，所以在开发时，需要有一个统一的授权中心，授权中心负责access_token的获取缓存和更新。
统一授权还有一个好处：在开发时，公众号上面的不同菜单的网页可能是部署在不同的服务器，但是公众号后台的网页授权域名设置只能设置一个，用统一授权就可以解决这个问题。网页授权域名设置为授权中心的域名，腾讯后台的回调都会回调到授权中心，由授权中心转发重定向回每个菜单的页面。

1.2 回调

调用授权接口时，要求传入一个回调地址redirect_uri。这个redirect_uri的域名必须要和公众号平台-设置-公众号设置-功能设置-网页授权域名一致。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

回调网页还要一个需要注意的地方：如果调用授权的页面和配置的redirect_uri是同一个页面，会出现从redirect_uri页面后退时，又重新进入到调用授权页，导致无法退出的问题。

这个问题可以通过监听popstate，如果返回到了授权页，则直接调用wx.closeWindow();退出来解决。

    window.addEventListener("popstate", function(e) {console.log("test"); var documentUrl = document.location.href;console.log("documentUrl=" + documentUrl );if (documentUrl.indexOf("weixin.qq.com") !== -1) {wx.closeWindow();} }.bind(this));

2. 微信JS-SDK

微信JS-SDK说明文档里介绍的引入js-sdk的方式是在script标签里引入http://res.wx.qq.com/open/js/jweixin-1.4.0.js。这种方式在react上并不合适。

2.1 React集成JS-SDK

React上集成的方式和文档介绍的方式只有引入方式不一样，react需要先安装weixin-js-sdk的依赖包，再import。

npm install weixin-js-sdk

在需要使用js-sdk的页面引入sdk

import wx from 'weixin-js-sdk';

之后的步骤和文档介绍的就一样了。
附上完整的代码

import React from 'react';
import './DeviceList.css';
import Device from './Device';
import DeviceIcon from '../images/device_icon.png';
import ReactList from 'react-list';
import wx from 'weixin-js-sdk';
import InfiniteScroll from 'react-infinite-scroller';const baseUrl = process.env.PUBLIC_URL;
const serverIp = process.env.REACT_APP_SERVER_IP;
const resourceServerIp = process.env.REACT_APP_RESOURCE_SERVER_IP;
const wxAppId = process.env.REACT_APP_WX_APPID;const jsAuthAddress = process.env.REACT_APP_WX_JS_AUTH_ADDRESS;export default class DeviceList extends React.Component {constructor(props) {super(props);this.state = {tracks: [],hasMoreItems: true,nextHref: null,latitude:-1,longitude:0};}componentWillMount() {this.fetchSignatureAndLocation();}componentDidMount() {}loadItems(page) {var that = this;var url = serverIp + '/devices/' + this.state.longitude + '/' + this.state.latitude + '/'+ page;if (this.state.nextHref) {url = this.state.nextHref;}fetch(url).then((res) => res.json()).then((responseJson) => {if (responseJson.flag == "00") {var tracks = that.state.tracks;responseJson.data.list.map((track) => {tracks.push(track);});if (responseJson.data.hasNextPage) {that.setState({tracks: tracks,nextHref: serverIp + '/devices/' + this.state.longitude + '/' + this.state.latitude + '/' + responseJson.data.nextPage});} else {that.setState({hasMoreItems: false});}} else {alert(responseJson.message);}}); }checkJSApi() {wx.checkJsApi({jsApiList: ['getLocation'],success: function (res) {console.log('wx check js api',res);if (res.checkResult.getLocation === false) {alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');return;}}});
}fetchSignatureAndLocation() {var that = this;var url = jsAuthAddress +'?appid='+ wxAppId + '&url=' + resourceServerIp + baseUrl + "/";//统一授权中心fetch(url).then((res) => res.json()).then((responseJson) => {console.log(responseJson.message)wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: wxAppId, // 必填，公众号的唯一标识timestamp: responseJson.timestamp, // 必填，生成签名的时间戳nonceStr: responseJson.noncestr, // 必填，生成签名的随机串signature: responseJson.signature,// 必填，签名jsApiList: [       'checkJsApi','openLocation','getLocation'] // 必填，需要使用的JS接口列表});wx.ready(function () {console.log('wx config ready');//基础接口判断当前客户端版本是否支持指定JS接口wx.getLocation({type : 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success : function(res) {// alert(JSON.stringify(res));var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90// $("#latitude").val(latitude);var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。// $("#longitude").val(longitude);var speed = res.speed; // 速度，以米/每秒计// $("#speed").val(speed);var accuracy = res.accuracy; // 位置精度// $("#accuracy").val(accuracy);that.setState({longitude: res.longitude,latitude: res.latitude})},cancel : function(res) {alert('用户拒绝授权获取地理位置');}});});wx.error(function(res){console.log('wx error', res);alert('wx config error');// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});}).catch((error) => {console.error(error);});}renderItem(index, key) {var distanceStr = '距离您' + this.state.deviceList[index].distance;var metroStationDes = this.state.deviceList[index].metroLine + '-'+ this.state.deviceList[index].name return (<Device deviceDistance={distanceStr} deviceName={metroStationDes}   imageURL={DeviceIcon}></Device>);}render() {const loader = <div className="loader">Loading ...</div>;var items = [];let scrool;this.state.tracks.map((track, i) => {var distanceStr = '距离您' + track.distance;var metroStationDes = track.metroLine + '-'+ track.name;items.push(<div className="track" key={i}><Device deviceDistance={distanceStr} deviceName={metroStationDes}imageURL={DeviceIcon}></Device></div>);});if (this.state.latitude != -1) {scrool = <InfiniteScrollpageStart={0}loadMore={this.loadItems.bind(this)}hasMore={this.state.hasMoreItems}loader={loader}><div className="tracks">{items}</div></InfiniteScroll>}return (<div class="DeviceListContainer"><div class="DeviceListView">{scrool}</div></div>)}
}

2.2 授权

引入JS-SDK也是需要授权的，我们也可以做一个统一的授权中心。和网页授权不一样的是，即使有这个统一的授权中心，同一个公众号的使用了js-sdk的网页必须部署在同一个服务器下。因为js-sdk的不仅校验回调的域名，还会校验使用js-sdk的网页路径，只有调用腾讯的授权接口时传入的回调url和我们网页部署之后访问的url一致才能通过校验。

React-微信网页开发总结相关推荐

微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
微信网页开发-长按二维码无法识别问题解决
微信网页开发-长按二维码无法识别问题解决参考文章: (1)微信网页开发-长按二维码无法识别问题解决 (2)https://www.cnblogs.com/Tylerrrkd/p/9153949.ht ...
H5微信网页开发总结（授权，分享，地图）
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权分享地图参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
html微信开发样式,微信网页开发样式库
概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一.在微信网页开发中使用 WeUI,有如下优势: 1.同微信客户端一致的 ...
微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...
微信网页开发分享功能剖析
微信网页开发分享功能剖析步骤一:绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
微信昵称乱码 mysql_微信网页开发获取用户昵称乱码微信昵称包含emoji表情乱码的解决方案...
微信网页开发获取用户昵称乱码微信昵称包含emoji表情乱码的解决方案如下: 问题产生原因:由于数据库及属性一致设为utf8,而utf8只支持1-3个字节.当用户昵称为emoji表情时,获取用户基本信 ...
微信网页开发--仿美团、饿了么红包分享
需求这个月,公司做了一个3.8女王节的活动.当时的需求是一个水果接龙的小游戏.比如,我发起了一条接龙,然后我把这个链接分享出去,A点击这个链接就可以看见我输入的水果,然后A再分享这个链接给B,B就可 ...
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...

React-微信网页开发总结