微信小程序极光推送怎么做？
微信小程序极光推送怎么做?微信小程序怎么做极光推送呢?用 jpush-react-native 插件快速集成推送功能怎么做?下面小编就来为大家讲解一下微信小程序极光推送怎么做?
打开终端，进入项目文件夹，执行以下命令：
npm install jpush-react-native --save
npm install jcore-react-native --save
react-native link
执行完 link 项目后可能会出现报错，这没关系，需要手动配置一下 build.gradle 文件。在 Android Studio 中打开你的项目，然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块，打开此模块下的 build.gradle 文件，做以下改动：
app/build.gradle
android {
...
defaultConfig {
applicationId "com.pushdemo" // 此处改成你在极光官网上申请应用时填写的包名
...
manifestPlaceholders = [
JPUSH_APPKEY: "d4ee2375846bc30fa51334f5", //在此替换你的APPKey
APP_CHANNEL: "developer-default" //应用渠道号
]
}
}
检查一下在 dependencies 中有没有加入 jpush-react-native 以及 jcore-react-native 这两个依赖，如果没有，则需要加上：
dependencies {
...
compile project(':jpush-react-native')
compile project(':jcore-react-native')
...
}
接下来打开项目的 settings.gradle，看看有没有包含 jpush-react-native 以及 jcore-react-native，如果没有，则需要加上：
include ':app', ':jpush-react-native', ':jcore-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
做完以上步骤，这时可以同步(sync)一下项目，然后应该可以看到 jpush-react-native 以及 jcore-react-native 作为 Library 项目导进来了。
接下来打开模块的 MainApplication.Java 文件，加入 JPushPackage：
app/src.../MainApplication.java
private boolean SHUTDOWN_TOAST = false;
private boolean SHUTDOWN_LOG = false;
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
//加入 JPushPackage
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
);
}
};
然后在 MainActivity 中加入一些初始化代码即可：
app/src.../MainActivity.java
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
JPushInterface.init(this);
}
@Override
protected void onPause() {
super.onPause();
JPushInterface.onPause(this);
}
@Override
protected void onResume() {
super.onResume();
JPushInterface.onResume(this);
}
}
这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。
使用
收到推送
添加了此事件后，在收到推送时将会触发此事件。
example/react-native-android/push_activity.js
...
import JPushModule from 'jpush-react-native';
...
export default class PushActivity extends React.Component {
componentDidMount() {
JPushModule.addReceiveNotificationListener((map) => {
console.log("alertContent: " + map.alertContent);
console.log("extras: " + map.extras);
// var extra = JSON.parse(map.extras);
// console.log(extra.key + ": " + extra.value);
});
}
点击推送
在用户点击通知后，将会触发此事件。
...
componentDidMount() {
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log("Opening notification!");
console.log("map.extra: " + map.key);
});
}
高级应用
修改 JPushModule 中收到点击通知的事件，可以自定义用户点击通知后跳转的界面(现在默认是直接启动应用)，只需要修改一点点原生的代码：
jpush-react-native/src.../JPushModule.java
// 这里点击通知跳转到指定的界面可以定制化一下
} else if (JPushInterface.ACTION_NOTIFICATION_OPENED.equals(data.getAction())) {
...
// judge if application is running in background, opening initial Activity.
// You can change here to open appointed Activity. All you need to do is create
// the appointed Activity, and use JS render the appointed Activity.
// Please reference examples' SecondActivity for detail,
// and JS files are in folder: example/react-native-android
if (isApplicationRunningBackground(context)) {
Intent intent = new Intent();
// 修改此处跳转的界面，比如改成 demo 中的 SecondActivity
intent.setClassName(context.getPackageName(), context.getPackageName() + ".MainActivity");
intent.putExtras(bundle);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK
| Intent.FLAG_ACTIVITY_CLEAR_TOP);
context.startActivity(intent);
// application running in foreground, do nothing
}
}
如果修改了此处跳转的界面，需要在 Native 中声明一个 Activity，如 demo 中的 SecondActivity，而 SecondActivity 的界面仍然用 JS 来渲染。只需要改动一下 SecondActivity，让它继承自 ReactActivity 即可：
example/android/app/src.../SecondActivity.java
public class SecondActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "SecondActivity";
}
}
然后使用上面返回的字符串注册一个 Component 即可：
example/react-native-android/second.js
import React from 'react';
import ReactNative from 'react-native';
const {
AppRegistry,
Text,
} = ReactNative;
export default class second extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Welcome !
);
}
}
AppRegistry.registerComponent('SecondActivity', () => second);
这样就完成了用户点击通知后的自定义跳转界面。
接收自定义消息
在用户收到自定义消息后触发。
example/react-native-android/push_activity.js
...
componentDidMount() {
JPushModule.addReceiveCustomMsgListener((map) => {
this.setState({
pushMsg: map.message
});
console.log("extras: " + map.extras);
});
...
得到 RegistrationId
用户注册成功后(一般在用户启动应用后)，如果订阅了这个事件，将会收到这个 registrationId。
...
componentDidMount() {
JPushModule.addGetRegistrationIdListener((registrationId) => {
console.log("Device register succeed, registrationId " + registrationId);
});
}
清除所有通知
建议在用户退出前台后调用。
...
componentWillUnmount() {
console.log("Will clear all notifications");
JPushModule.clearAllNotifications();
}
设置标签
example/react-native-android/set_activity.js
...
setTag() {
if (this.state.tag !== undefined) {
/*
* 请注意这个接口要传一个数组过去，这里只是个简单的示范
*/
JPushModule.setTags(["VIP", "NOTVIP"], () => {
console.log("Set tag succeed");
}, () => {
console.log("Set tag failed");
});
}
}
设置别名
...
setAlias() {
if (this.state.alias !== undefined) {
JPushModule.setAlias(this.state.alias, () => {
console.log("Set alias succeed");
}, () => {
console.log("Set alias failed");
});
}
}
以上就是插件提供的主要接口的示例。总的来说，配置和使用都比较简单，适合开发者快速集成推送功能。
以上就是小编为大家整理的关于微信小程序极光推送怎么做的内容。更多更精彩的内容请持续关注小程序商店。
相关阅读：
微信店铺小程序怎么添加？
微信小程序服务类目有有哪些？
微信小程序输入框样式大全
下一篇：微信小程序如何向用户推送消息？