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