美文网首页
React native微信分享插件

React native微信分享插件

作者: 风染墨 | 来源:发表于2016-07-31 19:38 被阅读4041次

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

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

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

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

    注意事项:react-native >0.17

    1. 安装

          npm install react-native-wx --save
      
    2. 配置(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: "",
    }
    

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

    {
        errCode: "",
        errMsg: "",
        appid: "",
        returnKey: "",
    }
    

    相关文章

      网友评论

          本文标题:React native微信分享插件

          本文链接:https://www.haomeiwen.com/subject/mmqxsttx.html