Skip to content

兼容iOS

zooble edited this page May 19, 2017 · 5 revisions

因为与iOS端提供的API不太一致,在此提供一套解决方案,作为参考:

wechat.js

import { Platform,NativeAppEventEmitter } from 'react-native';
import WeChatIOS from 'react-native-wechat-ios';
import WeChatAndroid from 'react-native-wechat-android';

let shareOptions;

let android = {
    registerApp(appId,callback){
        WeChatAndroid.registerApp(appId,callback);
    },
    openWXApp(callback){
        WeChatAndroid.openWXApp(callback);
    },
    share(options,callback){
        shareOptions = {
            title: options.title,
            desc: options.desc,
            thumbSize: 150,
            scene: options.scene,
            type: 3,
            webpageUrl: options.link,
            thumbImage: options.thumbImage,
        };
        WeChatAndroid.sendReq(shareOptions,callback);
    },
    addAuthListener(callback) {
        NativeAppEventEmitter.addListener('finishedAuth', callback);
    },
    removeAuthListeners(){
        NativeAppEventEmitter.removeAllListeners('finishedAuth');
    },
    addShareListener(callback) {
        NativeAppEventEmitter.addListener('finishedShare', callback);
    },
    removeShareListeners(){
        NativeAppEventEmitter.removeAllListeners('finishedShare');
    },
    addPayListener(callback) {
        NativeAppEventEmitter.addListener('finishedPay', callback);
    },
    removePayListeners(){
        NativeAppEventEmitter.removeAllListeners('finishedPay');
    }
}

let iOS = {
    registerApp(appId,callback){
        WeChatIOS.registerApp(appId,callback);
    },
    openWXApp(callback){
        WeChatIOS.openWXApp(callback);
    },
    share(options,callback){
        WeChatIOS.sendLinkURL(options,callback);
    },
    addAuthListener(callback) {
        NativeAppEventEmitter.addListener('didRecvAuthResponse', callback);
    },
    removeAuthListeners(){
        NativeAppEventEmitter.removeAllListeners('didRecvAuthResponse');
    },
    addShareListener(callback) {
        NativeAppEventEmitter.addListener('didRecvMessageResponse', callback);
    },
    removeShareListeners(){
        NativeAppEventEmitter.removeAllListeners('didRecvMessageResponse');
    },
    addPayListener(callback) {
        NativeAppEventEmitter.addListener('finishedPay', callback);
    },
    removePayListeners(){
        NativeAppEventEmitter.removeAllListeners('finishedPay');
    }
}

let wechat;

if (Platform.OS === 'ios') { 
    wechat = iOS;
} else {
    wechat = android;
}

export default wechat;

使用

import React, {Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text
} from 'react-native';

import WeChat from './wechat';

let appId = 'wx...';   // 你的AppId 

let webpageOptions = {
    title: '分享这个网页给你',
    desc: '我发现这个网页很有趣,特意分享给你',
    thumbSize: 150,
    scene: 0,
    type: 3,

    webpageUrl: 'https://github.com/beefe/react-native-wechat-android',
    thumbImage: 'http://img1.imgtn.bdimg.com/it/u=3924416677,403957246&fm=21&gp=0.jpg',
};

class MyProject extends React.Component{
    _registerApp(){
        WeChat.registerApp(appId,(err,registerOK) => {
            alert(registerOK);
        });
    }

    _openApp(){
        WeChat.openWXApp((err,res) => {

        });
    }

    _share(){
        WeChat.sendReq(webpageOptions,(err,sendOK) => {
        });
    }

    componentWillMount(){
        WeChat. addShareListener(function(event){                            
            if(event.success){
                alert('分享成功');
            }else{
                alert('分享失败');
            }
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text} onPress={this._registerApp} >
                    注册到微信
                </Text>
                <Text style={styles.text} onPress={this._openApp} >
                    打开微信
                </Text>
                <Text style={styles.text} onPress={this._share} >
                    分享网页到微信
                </Text>
            </View>
        );
    }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#333333',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);
Clone this wiki locally