{"id":533,"date":"2023-02-25T15:53:21","date_gmt":"2023-02-25T07:53:21","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=533"},"modified":"2023-04-29T20:40:55","modified_gmt":"2023-04-29T12:40:55","slug":"react-native-wechat-login-sharing-and-payment","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-wechat-login-sharing-and-payment\/","title":{"rendered":"React Native\u4e4b\u5fae\u4fe1\u767b\u9646\u3001\u5206\u4eab\u4e0e\u652f\u4ed8"},"content":{"rendered":"<p>React Native\u4e4b\u5fae\u4fe1\u767b\u9646\u3001\u5206\u4eab\u4e0e\u652f\u4ed8<code>react-native-wechat<\/code><\/p>\n<p>\u9879\u76ee\u5730\u5740\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/weflex\/react-native-wechat\">https:\/\/github.com\/weflex\/react-native-wechat<\/a><\/p>\n<p><!-- more --><\/p>\n<h2>\u51c6\u5907<\/h2>\n<p>\u5fae\u4fe1\u5f00\u653e\u5e73\u53f0\uff08<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/open.weixin.qq.com\/\">https:\/\/open.weixin.qq.com\/<\/a>\uff09<\/p>\n<ul>\n<li>\u5e94\u7528\u7b7e\u540d\uff1a06b0d7b419ad0bd12844689a2f1a36c1<\/li>\n<li>\u5305\u540d\uff1acn.appblog.mm<\/li>\n<\/ul>\n<p>keystore\u548ckey\u7684\u5bc6\u7801\u90fd\u662f\u4e00\u6837\u7684<\/p>\n<h2>Android Studio \u4fee\u6539\u5305\u540d<\/h2>\n<blockquote>\n<p>React Native \u521d\u59cb\u5316\u7684\u9ed8\u8ba4\u5305\u540d com.wechatdemo \u4e0e \u5fae\u4fe1\u5f00\u653e\u5e73\u53f0\u5e94\u7528\u7684\u5305\u540d \u4e00\u81f4\u7684\u53ef\u4ee5\u8df3\u8fc7\u6b64\u6b65\u9aa4\u3002<\/p>\n<\/blockquote>\n<p>\uff081\uff09\u65b0\u5efa\u4e00\u4e2a\u5305\u540d\uff08\u4e5f\u5c31\u662f\u76ee\u6807\u5305\u540d\uff09<br \/>\n\uff082\uff09\u5c06\u4e4b\u524d\u5305\u4e0b\u7684\u6240\u6709\u6587\u4ef6\u62d6\u5230\u65b0\u5efa\u7684\u5305\u4e0b\uff0cAndroid Studio \u4f1a\u81ea\u52a8\u4fee\u6539\u6587\u4ef6\u4e2d\u5f15\u5165\u7684\u5305\u540d\u3002\u4f46\u662f\u6709\u4e9b\u6ce8\u91ca\u6216\u8005\u4ee3\u7801\u4e2d\u6587\u672c\u5f62\u5f0f\u7684\u9700\u8981\u66ff\u6362\u7684\uff0c\u5219\u9700\u8981\u624b\u52a8\u4fee\u6539\uff0c\u6216\u8005\u5148\u5220\u9664\u6389\u5426\u5219\u662f\u65e0\u6cd5\u62d6\u62fd\u7684\u3002<br \/>\n\uff083\uff09\u4fee\u6539\u6e05\u5355\u6587\u4ef6AndroidManifest.xml\u548cbuild.gradle (applicationId) \u4e2d\u7684\u5305\u540d<br \/>\n\uff084\uff09Bulid Clean\u4e00\u4e0b\uff0c\u63d0\u793a\u627e\u4e0d\u5230R\u6587\u4ef6<br \/>\n\uff085\uff09\u4fee\u6539 R\u6587\u4ef6\u7684\u5f15\u5165\u8def\u5f84 \u4ee5\u53ca BuildConfig (MainApplication.java) \u6587\u4ef6\u7684\u5f15\u5165\u8def\u5f84\uff0c\u8fd9\u4e24\u4e2a\u6587\u4ef6\u90fd\u662f\u81ea\u52a8\u751f\u6210\u7684<\/p>\n<h2>\u5b89\u88c5<\/h2>\n<p>\u5b89\u88c5\u7ec4\u4ef6<\/p>\n<pre><code>npm install react-native-wechat --save<\/code><\/pre>\n<p>\u94fe\u63a5\u7ec4\u4ef6<\/p>\n<pre><code>\/\/ React Native v0.27+\nreact-native link react-native-wechat<\/code><\/pre>\n<pre><code>\/\/ React Native v0.27-\nrnpm link react-native-wechat<\/code><\/pre>\n<p>\u91cd\u65b0\u7f16\u8bd1<\/p>\n<pre><code>react-native run-android\nreact-native run-ios<\/code><\/pre>\n<h2>\u4f7f\u7528<\/h2>\n<p>\uff081\uff09\u521b\u5efa\u5305 net.izengzhi.mmm.wxapi\uff0c\u5e76\u5728\u5305\u4e0b\u521b\u5efa\u7c7b WXEntryActivity\uff0c\u8fd9\u662f\u5411\u5fae\u4fe1\u53d1\u9001\u8bf7\u6c42\u548c\u4ece\u5fae\u4fe1\u63a5\u6536\u54cd\u5e94\u6240\u5fc5\u9700\u7684\u3002<\/p>\n<pre><code class=\"language-java\">package your.package.wxapi;\n\nimport android.app.Activity;\nimport android.os.Bundle;\nimport com.theweflex.react.WeChatModule;\n\npublic class WXEntryActivity extends Activity{\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        WeChatModule.handleIntent(getIntent());\n        finish();\n    }\n}<\/code><\/pre>\n<p>\uff082\uff09\u5728 AndroidManifest.xml \u6e05\u5355\u6587\u4ef6\u4e2d\u6dfb\u52a0\u58f0\u660e<\/p>\n<pre><code class=\"language-xml\">&lt;manifest&gt;\n  &lt;application&gt;\n    &lt;!-- \u5fae\u4fe1Activity --&gt;\n    &lt;activity\n      android:name=&quot;.wxapi.WXEntryActivity&quot;\n      android:label=&quot;@string\/app_name&quot;\n      android:exported=&quot;true&quot;\n      \/&gt;\n  &lt;\/application&gt;\n&lt;\/manifest&gt;<\/code><\/pre>\n<p>\uff083\uff09\u5728 proguard-rules.pro \u6dfb\u52a0\u4ee3\u7801\u6df7\u6dc6\u89c4\u5219<\/p>\n<pre><code>-keep class com.tencent.mm.sdk.** {\n   *;\n}<\/code><\/pre>\n<h2>\u5b9e\u4f8b\u6f14\u793a<\/h2>\n<p>\u4e3b\u8981\u6f14\u793a\u5206\u4eab\u5230\u597d\u53cb\/\u670b\u53cb\u5708\u7684\u94fe\u63a5\u4ee5\u53ca\u6587\u672c\uff0c\u5173\u4e8e\u66f4\u591a\u7684\u5206\u4eab\u5b9e\u4f8b\uff0c\u4f8b\u5982\u6587\u4ef6\u3001\u56fe\u7247\u3001\u89c6\u9891\u3001\u8bed\u97f3\u7b49\u7b49\u53ef\u4ee5\u67e5\u770b\u9879\u76ee\u7684\u8bf4\u660e\u6587\u4ef6\u5373\u53ef\u3002<\/p>\n<p>\u5206\u4eab\u5b9e\u4f8b\u6b65\u9aa4\uff1a<\/p>\n<ul>\n<li>\u6ce8\u518c\u5e94\u7528<\/li>\n<li>\u672c\u6587\/\u670b\u53cb\u5708\u5206\u4eab<\/li>\n<li>Android\u6d4b\u8bd5\u5e94\u7528\u9700\u8981Release\u6253\u5305\u6d4b\u8bd5<\/li>\n<li>iOS\u7248\u672c\u76f4\u63a5\u6d4b\u8bd5\u5373\u53ef<\/li>\n<\/ul>\n<p>\u6e90\u7801\uff1a<\/p>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    TouchableOpacity,\n    View\n} from &#039;react-native&#039;;\n\nimport * as WeChat from &#039;react-native-wechat&#039;;\n\n\/\/\u67d0\u4e2a\u6587\u4ef6\u4e2d\u6709\u591a\u4e2aexport\u7684\u6a21\u5757\n\/\/\u5f15\u5165\u65f6\u7edf\u4e00\u5f52\u96c6\u5230\u4e00\u4e2a\u540d\u4e3aWeChat\u7684\u53d8\u91cf\u540d\u4e0b\n\nclass Mmm extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            apiVersion: &#039;waiting...&#039;,\n            wxAppInstallUrl: &#039;waiting...&#039;,\n            isWXAppSupportApi: &#039;waiting...&#039;,\n            isWXAppInstalled: &#039;waiting...&#039;,\n        };\n    }\n\n    async componentDidMount() {\n        try {\n            await WeChat.registerApp(&#039;wx3c0fca268b5898d5&#039;);\n            this.setState({\n                apiVersion: await WeChat.getApiVersion(),\n                \/\/ wxAppInstallUrl: await WeChat.getWXAppInstallUrl(),\n                isWXAppSupportApi: await WeChat.isWXAppSupportApi(),\n                isWXAppInstalled: await WeChat.isWXAppInstalled()\n            });\n            console.log(this.state);\n        } catch (e) {\n            console.error(e);\n        }\n        console.log(WeChat);\n        \/\/ console.log(&#039;getApiVersion&#039;, typeof WeChat.getApiVersion);\n        \/\/ console.log(&#039;getWXAppInstallUrl&#039;, typeof WeChat.getWXAppInstallUrl);\n        \/\/ console.log(&#039;sendRequest&#039;, typeof WeChat.sendRequest);\n        \/\/ console.log(&#039;registerApp&#039;, typeof WeChat.registerApp);\n        \/\/ console.log(&#039;sendErrorCommonResponse&#039;, typeof WeChat.sendErrorCommonResponse);\n        \/\/ console.log(&#039;sendErrorUserCancelResponse&#039;, typeof WeChat.sendErrorUserCancelResponse);\n        \/\/ console.log(&#039;sendAuthRequest&#039;, typeof WeChat.sendAuthRequest);\n        \/\/ console.log(&#039;getWXAppInstallUrl&#039;, typeof WeChat.getWXAppInstallUrl);\n        \/\/ console.log(&#039;openWXApp&#039;, typeof WeChat.openWXApp);\n        \/\/ console.log(&#039;registerAppWithDescription&#039;, typeof WeChat.registerAppWithDescription);\n        \/\/ console.log(&#039;isWXAppSupportApi&#039;, typeof WeChat.isWXAppSupportApi);\n        \/\/ console.log(&#039;isWXAppInstalled&#039;, typeof WeChat.isWXAppInstalled);\n    }\n\n    render() {\n        return (\n            &lt;View style={styles.container}&gt;\n                &lt;View style={styles.flex} \/&gt;\n\n                &lt;Text style={styles.text}&gt;API\u7248\u672c\uff1a{this.state.apiVersion}&lt;\/Text&gt;\n                &lt;Text style={styles.text}&gt;\u5fae\u4fe1\u6ce8\u518cURL\uff1a{this.state.wxAppInstallUrl}&lt;\/Text&gt;\n                &lt;Text style={styles.text}&gt;\u662f\u5426\u652f\u6301API\uff1a{String(this.state.isWXAppSupportApi) }&lt;\/Text&gt;\n                &lt;Text style={styles.text}&gt;\u662f\u5426\u5b89\u88c5\u5fae\u4fe1\uff1a{String(this.state.isWXAppInstalled) }&lt;\/Text&gt;\n\n                &lt;TouchableOpacity onPress={this._openWXApp}&gt;\n                    &lt;Text style={styles.text}&gt;\u6253\u5f00\u5fae\u4fe1&lt;\/Text&gt;\n                &lt;\/TouchableOpacity&gt;\n\n                &lt;TouchableOpacity onPress={this._sendAuthRequest}&gt;\n                    &lt;Text style={styles.text}&gt;\u53d1\u9001\u9a8c\u8bc1\u8bf7\u6c42&lt;\/Text&gt;\n                &lt;\/TouchableOpacity&gt;\n\n                &lt;TouchableOpacity onPress={this._shareToTimeline}&gt;\n                    &lt;Text style={styles.text}&gt;\u5206\u4eab\u5230\u5fae\u4fe1\u670b\u53cb\u5708&lt;\/Text&gt;\n                &lt;\/TouchableOpacity&gt;\n\n                &lt;TouchableOpacity onPress={this._shareToSession}&gt;\n                    &lt;Text style={styles.text}&gt;\u5206\u4eab\u5230\u5fae\u4fe1\u597d\u53cb\u6216\u7fa4&lt;\/Text&gt;\n                &lt;\/TouchableOpacity&gt;\n\n                &lt;View style={styles.flex} \/&gt;\n                &lt;Text style={styles.author}&gt;Powered by RNAPP.CC&lt;\/Text&gt;\n            &lt;\/View&gt;\n        );\n    }\n\n    async _openWXApp() {\n        await WeChat.openWXApp();\n    }\n\n    \/*\n    async _sendAuthRequest() {\n        await WeChat.sendAuthRequest();\n    }\n    *\/\n\n    async _shareToSession() {\n        let result =await WeChat.shareToSession({\n            title: &#039;\u5fae\u4fe1\u597d\u53cb\u6216\u7fa4\u7ec4\u5206\u4eab\u6d4b\u8bd5(\u94fe\u63a5)&#039;,\n            description: &#039;React Native APP \u5f00\u53d1\u793e\u533a - \u9760\u8c31\u7684 RN APP \u548c Android\/iOS \u5f00\u53d1\u793e\u533a RNAPP.CC&#039;,\n            thumbImage: &#039;http:\/\/www.ouloon.com\/images\/RNAPP.png&#039;,\n            type: &#039;news&#039;,\n            webpageUrl:&#039;http:\/\/www.rnapp.cc&#039;\n        });\n        console.log(&#039;\u5206\u4eab\u5230\u5fae\u4fe1\u597d\u53cb\u6216\u7fa4\u7ec4\u662f\u5426\u6210\u529f\uff1a&#039;, result);\n    }\n\n    async _shareToTimeline() {\n        let result =await WeChat.shareToTimeline({\n            title: &#039;\u5fae\u4fe1\u670b\u53cb\u5708\u5206\u4eab\u6d4b\u8bd5(\u94fe\u63a5)&#039;,\n            description: &#039;React Native APP \u5f00\u53d1\u793e\u533a - \u9760\u8c31\u7684 RN APP \u548c Android\/iOS \u5f00\u53d1\u793e\u533a RNAPP.CC&#039;,\n            thumbImage: &#039;http:\/\/www.ouloon.com\/images\/RNAPP.png&#039;,\n            type: &#039;news&#039;,\n            webpageUrl:&#039;http:\/\/www.rnapp.cc&#039;\n        });\n        console.log(&#039;\u5206\u4eab\u5230\u5fae\u4fe1\u670b\u53cb\u5708\u662f\u5426\u6210\u529f\uff1a&#039;, result);\n    }\n\n    \/*\n    _shareToSession = () =&gt; {\n        WeChat.isWXAppInstalled()\n        .then((isInstalled) =&gt; {\n            console.log(&#039;\u5fae\u4fe1\u662f\u5426\u5df2\u7ecf\u5b89\u88c5\uff1a&#039; + isInstalled);\n            if (isInstalled) {\n                WeChat.shareToSession({\n                    title: &#039;\u5fae\u4fe1\u597d\u53cb\u6216\u7fa4\u7ec4\u5206\u4eab\u6d4b\u8bd5(\u94fe\u63a5)&#039;,\n                    description: &#039;React Native APP \u5f00\u53d1\u793e\u533a - \u9760\u8c31\u7684 RN APP \u548c Android\/iOS \u5f00\u53d1\u793e\u533a RNAPP.CC&#039;,\n                    thumbImage: &#039;http:\/\/www.ouloon.com\/images\/RNAPP.png&#039;,\n                    type: &#039;news&#039;,\n                    webpageUrl: &#039;http:\/\/www.rnapp.cc&#039;\n                })\n                .catch((error) =&gt; {\n                    alert(error.message);\n                });\n            } else {\n                alert(&#039;\u6ca1\u6709\u5b89\u88c5\u5fae\u4fe1\u8f6f\u4ef6\uff0c\u8bf7\u60a8\u5b89\u88c5\u5fae\u4fe1\u4e4b\u540e\u518d\u8bd5&#039;);\n            }\n        });\n    }\n    *\/\n\n    \/*\n    _shareToTimeline = () =&gt; {\n        WeChat.isWXAppInstalled()\n        .then((isInstalled) =&gt; {\n            if (isInstalled) {\n                WeChat.shareToTimeline({\n                    title: &#039;\u5fae\u4fe1\u670b\u53cb\u5708\u5206\u4eab\u6d4b\u8bd5(\u94fe\u63a5)&#039;,\n                    description: &#039;React Native APP \u5f00\u53d1\u793e\u533a - \u9760\u8c31\u7684 RN APP \u548c Android\/iOS \u5f00\u53d1\u793e\u533a RNAPP.CC&#039;,\n                    thumbImage: &#039;http:\/\/www.ouloon.com\/images\/RNAPP.png&#039;,\n                    type: &#039;news&#039;,\n                    webpageUrl: &#039;http:\/\/www.rnapp.cc&#039;\n                })\n                .catch((error) =&gt; {\n                    alert(error.message);\n                });\n            } else {\n                alert(&#039;\u6ca1\u6709\u5b89\u88c5\u5fae\u4fe1\u8f6f\u4ef6\uff0c\u8bf7\u60a8\u5b89\u88c5\u5fae\u4fe1\u4e4b\u540e\u518d\u8bd5&#039;);\n            }\n        });\n    }\n    *\/\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n        backgroundColor: &#039;#F5FCFF&#039;,\n    },\n    welcome: {\n        fontSize: 20,\n        textAlign: &#039;center&#039;,\n        margin: 10,\n    },\n    text: {\n        fontSize: 20,\n        marginTop: 10,\n    },\n    instructions: {\n        textAlign: &#039;center&#039;,\n        color: &#039;#333333&#039;,\n        marginBottom: 5,\n    },\n    flex: {\n        flex: 1,\n    },\n    author: {\n        justifyContent: &#039;flex-end&#039;,\n        alignItems: &#039;center&#039;,\n        marginBottom: 10,\n        textAlign: &#039;center&#039;,\n        fontSize: 16,\n        color: &#039;#3BC1FF&#039;,\n    },\n});\n\nAppRegistry.registerComponent(&#039;WechatDemo&#039;, () =&gt; Mmm);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React Native\u4e4b\u5fae\u4fe1\u767b\u9646\u3001\u5206\u4eab\u4e0e\u652f\u4ed8react-native-wechat \u9879\u76ee\u5730\u5740\uff1ahttps:\/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-533","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}