Naively Programmable Module

    react-native-vso-wx

    1.0.1 • Public • Published

    react-native-wx

    React Native的微信插件, 包括登录、分享

    注意: react-native版本需要0.17.0及以上

    注意:iOS应用只要申请并获取到AppID就可进行调试。Android应用除了获取AppID外,应用还要通过审核,否则无法调起微信进行分享,并且需要在网站上填写包名和签名两个字段,签名需要使用签名生成工具获取。

    如何安装

    1.首先安装npm包

    npm install react-native-wx --save

    2.link

    自动link方法

    react-native link react-native-wx

    手动link~(如果不能够自动link)

    ios

    a.打开XCode's工程中, 右键点击Libraries文件夹 ➜ Add Files to <...> b.去node_modules ➜ react-native-wx ➜ ios ➜ 选择 RCTWeChat.xcodeproj c.在工程Build Phases ➜ Link Binary With Libraries中添加libRCTWeChat.a

    Android
    // file: android/settings.gradle
    ...
    
    include ':react-native-wx'
    project(':react-native-wx').projectDir = new File(settingsDir, '../node_modules/react-native-wx/android')
    
    // file: android/app/build.gradle
    ...
    
    dependencies {
        ...
        compile project(':react-native-wx')
    }
    

    android/app/src/main/java/<你的包名>/MainApplication.java中添加如下两行:

    ...
    import cn.reactnative.modules.wx.WeChatPackage;  // 在public class MainApplication之前import 
     
    public class MainApplication extends Application implements ReactApplication {
     
      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }
     
        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new WeChatPackage(), // 然后添加这一行 
              new MainReactPackage()
          );
        }
      };
     
      @Override
      public ReactNativeHost getReactNativeHost() {
          return mReactNativeHost;
      }
    }

    3.工程配置

    iOS配置

    在工程target的Build Phases->Link Binary with Libraries中加入、libsqlite3.tbd、libc++、libz.tbd、CoreTelephony.framework

    Info->URL Types 中增加微信的scheme: Identifier 设置为weixin(这个拼写不能错哦), URL Schemes 设置为你注册的微信开发者账号中的APPID

    如果react-native版本>=0.17.0, 在你工程的AppDelegate.m文件中添加如下代码:

    #import "../Libraries/LinkingIOS/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版本实在是<0.17.0, 在你工程的AppDelegate.m文件中添加如下代码:

    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
      [[NSNotificationCenter defaultCenter] postNotificationName:@"RCTOpenURLNotification" object:nil userInfo:@{@"url": url.absoluteString}];
      return YES;
    }
    
    
    iOS9的适配问题
    a.对传输安全的支持

    在iOS9中,默认需要为每次网络传输建立SSL,解决方法是在应用plist文件中设置

    <key>NSAppTransportSecurity</key>
    <dict>
    <key>NSAllowsArbitraryLoads</key>
    </true>
    </dict>
    
    b.对应用跳转的支持

    在iOS9中跳转第三方应用需要在应用的plist文件中添加白名单

    <key>LSApplicationQueriesSchemes</key>
    <array>
    	<string>weixin</string>
    	<string>wechat</string>
    </array>
    

    Android配置

    android/app/build.gradle里,defaultConfig栏目下添加如下代码:

    manifestPlaceholders = [
        // 如果有多项,每一项之间需要用逗号分隔
        WX_APPID: "微信的APPID"		//在此修改微信APPID
    ]
    

    如果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();
        }
    }
            

    如何使用

    引入包

    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: 缩略图地址,
    }

    WechatAPI.pay(data)

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

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

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

    Install

    npm i react-native-vso-wx

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • jinnanwang