React native微信分享插件

2016-07-31 本文已影响4041人风染墨

今天在项目中修改之前微信分享调用微信后闪退的bug。上一个项目做微信分享的时候没有遇到这个问题。

开源项目地址:https://github.com/reactnativecn/react-native-wx

还有另一个微信插件没有测试过，有兴趣的同学可以试试react-native-wechat

使用方法(使用之前请确保在微信开放平台注册了账号并且创建App并通过审核。没有审核情况下没有试过，不知道能不能成功)

注意事项：react-native >0.17

安装
```
    npm install react-native-wx --save
```

配置(Android)

//  项目下  android/settings.gradle 添加以下配置 
    
include ':react-native-wx'
project(':react-native-wx').projectDir = new File(settingsDir, '../node_modules/react-native-wx/android')

```js
//  项目下  android/app/build.gradle 添加以下配置 
    
dependencies {
    ...
    compile project(':react-native-wx')
}
```

``` android/app/src/main/java/<你的包名>/MainActivity.java``` 添加引入的包名```import cn.reactnative.modules.wx.WeChatPackage;```


```java
//MainActivity.java根据版本不同添加
//.addPackage(new WeChatPackage())

,new WeChatPackage()

```

3.添加微信分享APP_ID配置信息

```js
//项目下  android/app/build.gradle 添加以下配置

android {
...
...
defaultConfig {
manifestPlaceholders = [
...
WX_APPID: "XXXXXX",//添加的配置微信APP_ID

    ]
}

```

如果react-native版本<0.18.0,确保你的MainActivity.java中有onActivityResult的实现：

private ReactInstanceManager mReactInstanceManager;
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data){
    super.onActivityResult(requestCode, resultCode, data);
    mReactInstanceManager.onActivityResult(requestCode, resultCode, data);
}

在你的包名相应目录下新建一个wxapi目录，并在该wxapi目录下新增一个WXEntryActivity类，该类继承自Activity（例如应用程序的包名为net.sourceforge.simcpux，则新添加的类的包名为net.sourceforge.simcpux.wxapi）

package net.sourceforge.simcpux.wxapi; // net.sourceforge.simcpux处为你的包名

import android.app.Activity;
import android.os.Bundle;

import cn.reactnative.modules.wx.WeChatModule;

public class WXEntryActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WeChatModule.handleIntent(getIntent());
        finish();
    }
}

note:Android还需要对keystore文件进行md5签名之后，在开放平台的应用设置中设置相应签名才可以成功使用，具体方法见开放平台说明

签名必须要填对不正确的话分享不成功。

附上微信android签名的获取方式的一种:签名请使用该工具点我下载

注意事项

关于微信失败错误

1.分享闪退（确定Android的证书签名填写无误）。
2.尝试删除微信重新安装。（不要问我为什么，我也不知道,返回的错误码：-6）

其他错误

    //node_modules/react-native-wx/android/src/main/java/cn/reactnative/modules/wx/WeChatModule.java
 private String _getErrorMsg(int errCode) {
        Log.e("errCode",""+errCode);//添加打印信息查看错误码
        ....
    }

如何使用

引入包

import * as WechatAPI from 'react-native-wx';

API

WechatAPI.isWXAppInstalled()

返回一个Promise对象

WechatAPI.isWXAppSupportApi()

返回一个Promise对象

WechatAPI.login(config)

// 登录参数 
config : {  
    scope: 权限设置, // 默认 'snsapi_userinfo'
}

返回一个Promise对象。成功时的回调为一个类似这样的对象：

{
    "code": "",
    "appid": "",
    "lang": "",
    "country": "",
}

WechatAPI.shareToTimeline(data)

分享到朋友圈

WechatAPI.shareToSession(data)

分享到好友

// 分享文字
{   
    type: 'text', 
    text: 文字内容,
}

// 分享图片
{   
    type: 'image',
    imageUrl: 图片地址,
    title : 标题,
    description : 描述,
}

// 分享网页
{   
    type: 'news',
    title : 标题,
    description : 描述,   
    webpageUrl : 链接地址,
    imageUrl: 缩略图地址,  //缩略图的大小作了限制，大小不能超过32K。
}

WechatAPI.pay(data)

// 登录参数 
data : {    
    partnerId: "",
    prepayId: "",
    nonceStr: "",
    timeStamp: "",
    package: "",
    sign: "",
}