React Native之微信分享(iOS Android)

React Native之微信分享(iOS Android)

   在使用React Native开发项目的时候，基本都会使用到微信好友或者微信朋友圈分享功能吧，那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能。

一,应用申请审核

 大家需要去微信开发平台去注册账号并且创建一个移动应用。(地址:https://open.weixin.qq.com)，然后根据流程申请即可。但是需要注意的是Android需要获取签名信息：

  下载安装上面的签名信息包apk,然后在上面输入android项目的包名，点击获取签名信息即可。android项目的包名路径:android/app/build.gradle中的applicationId标签数据。

二,Android安装配置

    react-native-wechat库不仅支持微信分享，还支持微信登录，收藏以及微信支付的。但是登录，支付之类的功能需要开通开发者认证权限，需要300元一年。

    2.1,npm install react-native-wechat --save

    2.2,配置方法

     1,在android/settings.gradle文件中添加如下代码:

 include ':RCTWeChat'
 project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')

    2,在android/app/build.gradle文件中的dependencies标签中添加模块依赖:

 ...
  
dependencies {
 
   ...
 
   implementation project(':RCTWeChat')    // Add this line only.
 
}

    3,在MainActivity.java文件中添加如下代码:

import com.theweflex.react.WeChatPackage; // Add this line before public class MainActivity

  ...

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage()
        , new WeChatPackage()        // Add this line
    );
}

以上是手动配置的方法，当然也可一键配置:npm link react-native-wechat

4,在android项目中创建wxapi包名,com目录下创建wxapi，在该包名底下创建WXEntryActivity.java类，该类用于去微信获取请求以及响应。

package your.package.wxapi;
 
import android.app.Activity;
import android.os.Bundle;
 
import com.theweflex.react.WeChatModule;
 
public class WXEntryActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WeChatModule.handleIntent(getIntent());
        finish();
    }
}

5,在AndroidManifest.xml文件中添加刚刚创建的Actiivty的配置

<manifest>
  ...
  <application>
    ...
    <!-- 微信Activity -->
    <activity
      android:name=".wxapi.WXEntryActivity"
      android:label="@string/app_name"
      android:exported="true"
      />
  </application>
</manifest>

6,混淆设置,在proguard-rules.pro中添加如下代码，当然如果不混淆就不安全啦

-keep class com.tencent.mm.sdk.** {
   *;
}

三,ios安装配置

    1,在xcode中添加部分库依赖(Link Binary With Libraries) 在没有这些库的情况下:

• SystemConfiguration.framework
•  CoreTelephony.framework
•  libsqlite3.0
•  libc++
•  libz

    2,选中Targets-info配置中URL Types中配置刚申请下来的appid

     3,为了iOS9.0的支持，在Targets-info中的Custom iOS Traget Properties标签中添加LSApplicationQueriesSchemes字段，值分别为wechat和weixin

     4,接下来需要在APPDelete.m文件中做一下Linking的处理配置

#import <React/RCTLinkingManager.h>
...

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}

四,react-native-wechat分享实例

上面我们已经把基本安装配置完成了，下面我们通过实例来进行演示一下，主要演示分享到好友/朋友圈的链接以及图片，关于更多的分享实例例如文件，图片，视频，语言,文本等等可以查看项目的说明文件即可。

分享实例步骤:

• 注册应用
• 好友/朋友圈分享

• Android测试应用需要打包测试

• iOS版本直接测试即可,代码和下面一样

   3.1,注册应用

//应用注册
 WeChat.registerApp(appid);

   3.2,好友/朋友圈分享

      1,图片分享

       提到图片分享 在这儿就不得不讲到屏幕截图组件react-native-view-shot的简单使用       

import * as WeChat from 'react-native-wechat';
import ViewShot, { captureScreen, captureRef } from "react-native-view-shot";

...

captureScreen({
                format: "jpg",
                quality: 0.8
            }).then(
                uri => {
                    let Imageuri = (uri.toLowerCase()).includes('file://')?uri:'file://'+uri
                    self.setState({ Imageuri: Imageuri })
                },
                error => console.log("Oops, snapshot failed==" + error)
            );

      分享给好友/群聊

sharetoFrends = () => {
        let self = this; 
        WeChat.isWXAppInstalled()
            .then((isInstalled) => {
                if (isInstalled) {
                    WeChat.shareToSession({
                        type: 'imageFile',
                        title: '邀请好友',
                        description: '',
                        imageUrl: self.state.Imageuri // require the prefix on both iOS and Android platform                          
                    })
                        .catch((error) => {
                            console.log(JSON.stringify(error));
                        });
                } else {
                    Toast.show('您还没有安装微信，请安装微信之后再试');
                }
            });
    }

         分享到朋友圈

sharetoPyq = () => {
        let self = this;
        WeChat.isWXAppInstalled()
            .then((isInstalled) => {
                if (isInstalled) {
                    WeChat.shareToTimeline({
                        type: 'imageFile',
                        title: '邀请好友',
                        description: '',
                        imageUrl: self.state.Imageuri // require the prefix on both iOS and Android platform                          
                    })
                        .catch((error) => {
                            console.log(JSON.stringify(error));
                        });
                } else {
                    Toast.show('您还没有安装微信，请安装微信之后再试');
                }
            });

    }

 2,图文链接分享

      分享给好友/群聊

 // 分享到好友与群聊
    sharetoFrends = () => {
        WeChat.isWXAppInstalled()
            .then((isInstalled) => {
                if (isInstalled) {
                    WeChat.shareToSession({
                        title: 'React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)',
                        description: 'TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。',
                       
 thumbImage:'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
                        type: 'news',
                        webpageUrl: 'https://www.cnblogs.com/jackson-zhangjiang/p/9524842.html'
                    })
                        .catch((error) => {
                            console.log(JSON.stringify(error));
                        });
                } else {
                    Toast.show('您还没有安装微信，请安装微信之后再试');
                }
            });
    }

      分享到朋友圈

// 分享到朋友圈
    sharetoPyq = () => {
        WeChat.isWXAppInstalled()
            .then((isInstalled) => {
                if (isInstalled) {
                    WeChat.shareToTimeline({
                        title: 'React Native之FlatList的介绍与使用实例',
                        description: 'FlatList高性能的简单列表组件',
                        thumbImage: http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg'',
                        type: 'news',
                        webpageUrl: 'https://www.cnblogs.com/jackson-zhangjiang/p/9523927.html'
                    })
                        .catch((error) => {
                            console.log(JSON.stringify(error));
                        });
                } else {
                    Toast.show('您还没有安装微信，请安装微信之后再试');
                }
            });

    }

  监听状态：addListener(eventType, listener[, context])

//监听分享状态
        // 'SendMessageToWX.Resp' 分享监听字段
        // 'PayReq.Resp'          支付监听字段
        // 'SendAuth.Resp'        登录监听字段
        wechat.addListener(
            'SendMessageToWX.Resp',
            (response) => {
                if (parseInt(response.errCode) === 0) {
                    alert('分享成功');
                } else {
                    alert('分享失败');
                }
            }
        );

pay(data) ： 微信支付

const result = await WeChat.pay(
  {
    partnerId: '',  // 商家向财付通申请的商家id
    prepayId: '',   // 预支付订单
    nonceStr: '',   // 随机串，防重发
    timeStamp: '',  // 时间戳，防重发
    package: '',    // 商家根据财付通文档填写的数据和签名
    sign: ''        // 商家根据微信开放平台文档对数据做的签名
  }
);

五,react-native打开其他app

1，常用URL Scheme

QQ: mqq:// 

微信: weixin:// 
新浪微博: weibo:// (sinaweibo://) 
腾讯微博: tencentweibo:// 
淘宝: taobao:// 
支付宝: alipay:// 
美团: imeituan:// 
知乎: zhihu:// 
优酷: youku://

2,配置Scheme白名单（仅ios，Android平台不需要）

3,Linking跳转

import { Linking } from 'react-native';
 
 
// 2、跳转代码
Linking.canOpenURL('weixin://').then(supported => { // weixin://  alipay://
     if (supported) {
        return Linking.openURL('weixin://');
     } else {
     }
});