1.微信登录返回openid

pages/components/SharedDialog.js

@@ -6,236 +6,229 @@
  * @flow
  */
 
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import {
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-  Image,
-  TouchableOpacity,
-  ImageBackground,
-  TextInput,
-  Button,
-  StatusBar,
-  Modal,
-  TouchableHighlight,
-  DeviceEventEmitter
-} from "react-native";
-import wechat from "../utils/wechat";
+	Platform,
+	StyleSheet,
+	Text,
+	View,
+	Image,
+	TouchableOpacity,
+	ImageBackground,
+	TextInput,
+	Button,
+	StatusBar,
+	Modal,
+	TouchableHighlight,
+	DeviceEventEmitter
+} from 'react-native';
+import wechat from '../utils/wechat';
 type Props = {};
 export default class SharedDialog extends Component<Props> {
-  state = {
-    modalVisible: false
-  };
+	state = {
+		modalVisible: false
+	};
 
-  setModalVisible(visible) {
-    this.setState({
-      modalVisible: visible
-    });
-  }
+	setModalVisible(visible) {
+		this.setState({
+			modalVisible: visible
+		});
+	}
 
-  render() {
-    return (
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={this.state.modalVisible}
-        onRequestClose={() => {
-          this.setState({ modalVisible: false });
-        }}
-      >
-        <View
-          style={{
-            flex: 1,
-            flexDirection: "column"
-          }}
-        >
-          <TouchableOpacity
-            style={{
-              flex: 3.5,
-              backgroundColor: "rgba(0, 0, 0, 0.5)",
-              width: "100%"
-            }}
-            activeOpacity={1}
-            onPress={() => this.setState({ modalVisible: false })}
-          >
-            <View
-              style={{
-                flex: 3.5,
-                width: "100%"
-              }}
-            />
-          </TouchableOpacity>
-          <View
-            style={{
-              flex: 1,
-              width: "100%"
-            }}
-          >
-            <View
-              style={{
-                flex: 1.5,
-                width: "100%",
-                flexDirection: "row",
-                backgroundColor: "white"
-              }}
-            >
-              <View
-                style={{
-                  flex: 1,
-                  width: "100%",
-                  alignItems: "center",
-                  justifyContent: "center"
-                }}
-              >
-                <View
-                  style={{
-                    height: 2,
-                    left: 40,
-                    backgroundColor: "#979797",
-                    width: "60%"
-                  }}
-                />
-              </View>
-              <View
-                style={{
-                  flex: 1,
-                  width: "100%",
-                  alignItems: "center",
-                  justifyContent: "center"
-                }}
-              >
-                <Text
-                  style={{
-                    fontSize: 18,
-                    color: "black"
-                  }}
-                >
-                  分享
-                </Text>
-              </View>
-              <View
-                style={{
-                  flex: 1,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "100%"
-                }}
-              >
-                <View
-                  style={{
-                    height: 2,
-                    right: 40,
-                    backgroundColor: "#979797",
-                    width: "60%"
-                  }}
-                />
-              </View>
-            </View>
-            <View
-              style={{
-                flex: 2,
-                backgroundColor: "white",
-                flexDirection: "row",
-                justifyContent: "center",
-                width: "100%"
-              }}
-            >
-              <View
-                style={{
-                  flex: 1,
-                  alignItems: "center"
-                }}
-              >
-                <TouchableOpacity
-                  activeOpacity={1}
-                  onPress={this.wechat.bind(this)}
-                >
-                  <View
-                    style={{
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      left: 40
-                    }}
-                  >
-                    <Image
-                      style={{
-                        height: 43,
-                        width: 43
-                      }}
-                      source={require("../images/share/wechat.png")}
-                    />
-                    <Text
-                      style={{
-                        fontSize: 16,
-                        color: "black"
-                      }}
-                    >
-                      发给到群/好友
-                    </Text>
-                  </View>
-                </TouchableOpacity>
-              </View>
-              <View style={{ flex: 0.3 }} />
-              <View
-                style={{
-                  flex: 1
-                }}
-              >
-                <TouchableOpacity
-                  activeOpacity={1}
-                  onPress={this.circle.bind(this)}
-                >
-                  <View
-                    style={{
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      right: 40
-                    }}
-                  >
-                    <Image
-                      style={{
-                        height: 43,
-                        width: 43
-                      }}
-                      source={require("../images/share/circle.png")}
-                    />
-                    <Text
-                      style={{
-                        fontSize: 16,
-                        color: "black"
-                      }}
-                    >
-                      发朋友圈
-                    </Text>
-                  </View>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </View>
-        </View>
-      </Modal>
-    );
-  }
+	render() {
+		return (
+			<Modal
+				animationType="slide"
+				transparent={true}
+				visible={this.state.modalVisible}
+				onRequestClose={() => {
+					this.setState({ modalVisible: false });
+				}}
+			>
+				<View
+					style={{
+						flex: 1,
+						flexDirection: 'column'
+					}}
+				>
+					<TouchableOpacity
+						style={{
+							flex: 3.5,
+							backgroundColor: 'rgba(0, 0, 0, 0.5)',
+							width: '100%'
+						}}
+						activeOpacity={1}
+						onPress={() => this.setState({ modalVisible: false })}
+					>
+						<View
+							style={{
+								flex: 3.5,
+								width: '100%'
+							}}
+						/>
+					</TouchableOpacity>
+					<View
+						style={{
+							flex: 1,
+							width: '100%'
+						}}
+					>
+						<View
+							style={{
+								flex: 1.5,
+								width: '100%',
+								flexDirection: 'row',
+								backgroundColor: 'white'
+							}}
+						>
+							<View
+								style={{
+									flex: 1,
+									width: '100%',
+									alignItems: 'center',
+									justifyContent: 'center'
+								}}
+							>
+								<View
+									style={{
+										height: 2,
+										left: 40,
+										backgroundColor: '#979797',
+										width: '60%'
+									}}
+								/>
+							</View>
+							<View
+								style={{
+									flex: 1,
+									width: '100%',
+									alignItems: 'center',
+									justifyContent: 'center'
+								}}
+							>
+								<Text
+									style={{
+										fontSize: 18,
+										color: 'black'
+									}}
+								>
+									分享
+								</Text>
+							</View>
+							<View
+								style={{
+									flex: 1,
+									alignItems: 'center',
+									justifyContent: 'center',
+									width: '100%'
+								}}
+							>
+								<View
+									style={{
+										height: 2,
+										right: 40,
+										backgroundColor: '#979797',
+										width: '60%'
+									}}
+								/>
+							</View>
+						</View>
+						<View
+							style={{
+								flex: 2,
+								backgroundColor: 'white',
+								flexDirection: 'row',
+								justifyContent: 'center',
+								width: '100%'
+							}}
+						>
+							<View
+								style={{
+									flex: 1,
+									alignItems: 'center'
+								}}
+							>
+								<TouchableOpacity activeOpacity={1} onPress={this.wechat.bind(this)}>
+									<View
+										style={{
+											flexDirection: 'column',
+											alignItems: 'center',
+											justifyContent: 'center',
+											left: 40
+										}}
+									>
+										<Image
+											style={{
+												height: 43,
+												width: 43
+											}}
+											source={require('../images/share/wechat.png')}
+										/>
+										<Text
+											style={{
+												fontSize: 16,
+												color: 'black'
+											}}
+										>
+											发给到群/好友
+										</Text>
+									</View>
+								</TouchableOpacity>
+							</View>
+							<View style={{ flex: 0.3 }} />
+							<View
+								style={{
+									flex: 1
+								}}
+							>
+								<TouchableOpacity activeOpacity={1} onPress={this.circle.bind(this)}>
+									<View
+										style={{
+											flexDirection: 'column',
+											alignItems: 'center',
+											justifyContent: 'center',
+											right: 40
+										}}
+									>
+										<Image
+											style={{
+												height: 43,
+												width: 43
+											}}
+											source={require('../images/share/circle.png')}
+										/>
+										<Text
+											style={{
+												fontSize: 16,
+												color: 'black'
+											}}
+										>
+											发朋友圈
+										</Text>
+									</View>
+								</TouchableOpacity>
+							</View>
+						</View>
+					</View>
+				</View>
+			</Modal>
+		);
+	}
 
-  wechat() {
-    this.setModalVisible(false);
-    wechat.shareToSessionText("测试测试测试shareToSessionText");
-    // wechat.wechatLogin();
-  }
-  circle() {
-    this.setModalVisible(false);
-    wechat.shareToTimelineText("测试测试测试");
-  }
+	wechat() {
+		this.setModalVisible(false);
+		wechat.shareToSessionText('测试测试测试shareToSessionText');
+	}
+	circle() {
+		this.setModalVisible(false);
+		wechat.shareToTimelineText('测试测试测试');
+	}
 
-  setModalVisible(visible) {
-    this.setState({
-      modalVisible: visible
-    });
-  }
+	setModalVisible(visible) {
+		this.setState({
+			modalVisible: visible
+		});
+	}
 }
 
 /***

pages/utils/wechat.js

@@ -1,116 +1,126 @@
-import * as WeChat from "react-native-wechat";
+import * as WeChat from 'react-native-wechat';
+import request from '../utils/request';
 
 /**
     public static String WX_APPID = "wx51acc19c8f7a0f6f";
     public static String WX_SECRET = "e830d45f497025041269ef6221140c3d";
  */
-WeChat.registerApp("wx51acc19c8f7a0f6f");
+WeChat.registerApp('wx51acc19c8f7a0f6f');
 export default class wechat {
-  static wechatLogin() {
-    WeChat.sendAuthRequest("snsapi_userinfo").then(result => {
-      console.log(result);
-    });
-  }
+	//登录方法
+	static wechatLogin(callback) {
+		WeChat.isWXAppInstalled().then((isInstalled) => {
+			if (isInstalled) {
+				WeChat.sendAuthRequest('snsapi_userinfo').then((result) => {
+					var object = JSON.parse(JSON.stringify(result));
+					var loginUrl =
+						'https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx51acc19c8f7a0f6f&secret=e830d45f497025041269ef6221140c3d&code=' +
+						object['code'] +
+						'&grant_type=authorization_code';
+					request(loginUrl).then((res) => {
+						console.log('code请求下一步返回结果：' + res['openid']);
+						callback(res['openid']);
+					});
+				});
+			} else {
+				alert('请安装微信');
+			}
+		});
+	}
 
-  /**
+	/**
    * 好友文字分享
    * @param  {string} descriptiontext      测试微信好友分享的文本内容
    */
-  static shareToSessionText(descriptiontext) {
-    WeChat.isWXAppInstalled().then(isInstalled => {
-      if (isInstalled) {
-        WeChat.shareToSession({
-          type: "text",
-          description: descriptiontext
-        }).catch(error => {
-          console.log(error.message);
-        });
-      } else {
-        alert("请安装微信");
-      }
-    });
-  }
+	static shareToSessionText(descriptiontext) {
+		WeChat.isWXAppInstalled().then((isInstalled) => {
+			if (isInstalled) {
+				WeChat.shareToSession({
+					type: 'text',
+					description: descriptiontext
+				})
+					.then((result) => {
+						console.log(result);
+					})
+					.catch((error) => {
+						error(error.message);
+					});
+			} else {
+				alert('请安装微信');
+			}
+		});
+	}
 
-  /**
+	/**
    * 微信好友分享链接
    * @param  {string} title_text            分享的标题
    * @param  {string} description_text      分享的标题内容
    * @param  {string} thumbImage_url       分享的标题图片
    * @param  {string} webpageUrl_url       分享的链接
    */
-  static shareToSessionNews(
-    title_text,
-    description_text,
-    thumbImage_url,
-    webpageUrl_url
-  ) {
-    WeChat.isWXAppInstalled().then(isInstalled => {
-      if (isInstalled) {
-        WeChat.shareToSession({
-          title: title,
-          description: description,
-          thumbImage: thumbImage,
-          type: "news",
-          webpageUrl: webpageUrl
-        }).catch(error => {
-          alert(error.message);
-        });
-      } else {
-        alert("请安装微信");
-      }
-    });
-  }
+	static shareToSessionNews(title_text, description_text, thumbImage_url, webpageUrl_url) {
+		WeChat.isWXAppInstalled().then((isInstalled) => {
+			if (isInstalled) {
+				WeChat.shareToSession({
+					title: title,
+					description: description,
+					thumbImage: thumbImage,
+					type: 'news',
+					webpageUrl: webpageUrl
+				}).catch((error) => {
+					alert(error.message);
+				});
+			} else {
+				alert('请安装微信');
+			}
+		});
+	}
 
-  /**
+	/**
    * 微信朋友圈分享的文本
    * @param  {string} description_text      测试微信朋友圈分享的文本内容
    */
-  static shareToTimelineText(description_text) {
-    WeChat.isWXAppInstalled().then(isInstalled => {
-      if (isInstalled) {
-        WeChat.shareToTimeline({
-          type: "text",
-          description: description_text
-        }).catch(error => {
-          console.log(error.message);
-        });
-      } else {
-        alert("请安装微信");
-      }
-    });
-  }
+	static shareToTimelineText(description_text) {
+		WeChat.isWXAppInstalled().then((isInstalled) => {
+			if (isInstalled) {
+				WeChat.shareToTimeline({
+					type: 'text',
+					description: description_text
+				}).catch((error) => {
+					console.log(error.message);
+				});
+			} else {
+				alert('请安装微信');
+			}
+		});
+	}
 
-  /**
+	/**
    * 微信好友分享链接
    * @param  {string} title_text            分享的标题
    * @param  {string} description_text      分享的标题内容
    * @param  {string} thumbImage_url       分享的标题图片
    * @param  {string} webpageUrl_url       分享的链接
    */
-  static shareToTimelineNews(
-    title_text,
-    description_text,
-    thumbImage_url,
-    webpageUrl_url
-  ) {
-    WeChat.isWXAppInstalled().then(isInstalled => {
-      if (isInstalled) {
-        WeChat.shareToTimeline({
-          title: title_text,
-          description: description_text,
-          thumbImage: thumbImage_url,
-          type: "news",
-          webpageUrl: webpageUrl_url
-        }).catch(error => {
-          console.log(error.message);
-        });
-      } else {
-        alert("请安装微信");
-      }
-    });
-  }
+	static shareToTimelineNews(title_text, description_text, thumbImage_url, webpageUrl_url) {
+		WeChat.isWXAppInstalled().then((isInstalled) => {
+			if (isInstalled) {
+				WeChat.shareToTimeline({
+					title: title_text,
+					description: description_text,
+					thumbImage: thumbImage_url,
+					type: 'news',
+					webpageUrl: webpageUrl_url
+				}).catch((error) => {
+					console.log(error.message);
+				});
+			} else {
+				alert('请安装微信');
+			}
+		});
+	}
 
-  /**
+	/**
    * 微信支付
    * @param  {string} partnerId          商家向财付通申请的商家id
    * @param  {string} prepayId           预支付订单
@@ -119,29 +129,56 @@ export default class wechat {
    * @param  {string} package            商家根据财付通文档填写的数据和签名
    * @param  {string} sign               商家根据微信开放平台文档对数据做的签名
    */
-  static pay(partnerId, prepayId, nonceStr, timeStamp, packages, sign) {
-    WeChat.isWXAppInstalled().then(isInstalled => {
-      if (isInstalled) {
-        WeChat.pay({
-          partnerId: partnerId, // 商家向财付通申请的商家id
-          prepayId: prepayId, // 预支付订单
-          nonceStr: nonceStr, // 随机串，防重发
-          timeStamp: timeStamp, // 时间戳，防重发.
-          package: packages, // "Sign=WXPay", // 商家根据财付通文档填写的数据和签名
-          sign: sign // 商家根据微信开放平台文档对数据做的签名
-        })
-          .then(requestJson => {
-            //支付成功回调
-            if (requestJson.errCode == "0") {
-              //回调成功处理
-            }
-          })
-          .catch(err => {
-            alert("支付失败");
-          });
-      } else {
-        alert("请安装微信");
-      }
-    });
-  }
+	static pay(partnerId, prepayId, nonceStr, timeStamp, packages, sign) {
+		WeChat.isWXAppInstalled().then((isInstalled) => {
+			if (isInstalled) {
+				WeChat.pay({
+					partnerId: partnerId, // 商家向财付通申请的商家id
+					prepayId: prepayId, // 预支付订单
+					nonceStr: nonceStr, // 随机串，防重发
+					timeStamp: timeStamp, // 时间戳，防重发.
+					package: packages, // "Sign=WXPay", // 商家根据财付通文档填写的数据和签名
+					sign: sign // 商家根据微信开放平台文档对数据做的签名
+				})
+					.then((requestJson) => {
+						//支付成功回调
+						if (requestJson.errCode == '0') {
+							//回调成功处理
+						}
+					})
+					.catch((err) => {
+						alert('支付失败');
+					});
+			} else {
+				alert('请安装微信');
+			}
+		});
+	}
 }
+
+/***
+
+  //github:https://github.com/yorkie/react-native-wechat
+  使用方法：
+  1.登录使用方法,返回openid
+    // wechat.wechatLogin((openid) => {
+		// 	alert(openid);
+		// });
+
+
+    //微信方法传参
+    {
+    type {Number} type of this message. Can be {news|text|imageUrl|imageFile|imageResource|video|audio|file}
+    thumbImage {String} Thumb image of the message, which can be a uri or a resource id.
+    description {String} The description about the sharing.
+    webpageUrl {String} Required if type equals news. The webpage link to share.
+    imageUrl {String} Provide a remote image if type equals image.
+    videoUrl {String} Provide a remote video if type equals video.
+    usicUrl {String} Provide a remote music if type equals audio.
+    filePath {String} Provide a local file if type equals file.
+    fileExtension {String} Provide the file type if type equals file.
+    }
+
+
+
+ */