npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-wx

v3.0.3

Published

微信登录、分享、支付模块

Downloads

12

Readme

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方法~rnpm requires node version 4.1 or higher

rnpm link react-native-wx

link成功命令行会提示

rnpm info Linking react-native-wx android dependency 
rnpm info Linking react-native-wx ios dependency

手动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: "",
}