react-wechat-api's Introduction

react-wechat-api

React Wechat JSSDK component for SPA

Installation

$ yarn add react-wechat-api

Usage

This example is using react-router v4, but it's not required by reacth-wechat-api

Wechat.js

import React from "react";
import { Route } from "react-router-dom";
import { WechatAPIProvider } from "recat-wechat-api";
import wx from "weixin-js-sdk";

const getConfig = ({ url }) =>
  fetch(`https://aweso.me/api/wx?url=${url}`).then(res => res.json());
/* should return an object like {
  appId: "wx05d8cb9deee3c05c",
  nonceStr: "nw0y6jnq1ie",
  signature: "e50d96cb73c09ba1e5848456d1ae90ec1b7ccf43",
  timestamp: 1541346529448
} */

const defaultShareData = {
  title: "Wechat API",
  desc: "Wechat API component for react",
  link: () => window.location.href, // will return latest URL dynamically
  imgUrl: `${window.location.origin}/icon.png`
};

const defaultJsApiList = [
  "onMenuShareTimeline",
  "onMenuShareAppMessage",
  "onMenuShareQQ",
  "onMenuShareQZone"
];

export default function Wechat(props) {
  return (
    <Route>
      {({ location }) => (
        <WechatAPIProvider
          {...props}
          location={location} // <-- `location` is required
          wx={wx} // <-- `wx` is required
          getConfig={getConfig}
          jsApiList={defaultJsApiList}
          shareData={defaultShareData}
        />
      )}
    </Route>
  );
}

App.js

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Wechat from "./Wechat";
import HomePage from "./containers/HomePage";

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Wechat>
          <Route path="/" component={HomePage} />
          {/* other routes... */}
        </Wechat>
      </BrowserRouter>
    );
  }
}

HomePage.js

import React, { Component } from "react";
import { WechatAPI } from "recat-wechat-api";

export default class HomePage extends Component {
  state = {
    shareData: {
      title: "Awesome!!!"
    }
  };

  render() {
    return (
      <WechatAPI shareData={this.state.shareData}>
        <div>
          <h1>Awesome</h1>
        </div>
      </WechatAPI>
    );
  }
}

License

MIT

react-wechat-api's People

Contributors

Stargazers

Watchers

react-wechat-api's Issues

使用中的一些问题

非常感谢Cap32的贡献，帮我的开发节省了很多时间。我根据自己的使用情况，做了以下修正

Readme里有一些拼写错误 react拼成recat
检查微信环境，考虑给开发环境一个设置isWechat=true
我想在create-react-app创建的工程里直接使用源代码，发现编译有些问题，主要集中在index.js中export的用法。这块对项目配置可以做一些说明，比如需要自己再加哪些依赖
iOS和Android处理调用getConfig和wx.config的时机不一样，这块最好兼容支持一下，iOS把第一个页面的url和config数据保存在sessionStorage里就好了。

使用过程中，参考了
yongheng2016/blog#78

另外总结了一些微信分享和微信支付的经验，放在了自己仓库里

Recommend Projects