Tip: Use uniapp official unipush push for the message push in this example:
Project scenario: This project is a uniapp + uniCloud project, and the message push is used on the APP sidehtml+Interact with native implementation
1. Activate push messages
– in uniapp
Find the App module configuration in the file, check the push message push module
– dcloud developer center background is enabledunipushFunctions and various configuration items
- Android offline message push requires configuration for major manufacturers, IOS offline does not require it, but it requires pushing certificates.
2. Determine the permissions of the mobile phone
- Requirements: determine whether to enable notification permissions, jump to the corresponding settings page
/**
* Set mobile notification permissions
*/
setPermissionsInform() {
// #ifdef APP-PLUS
if ( == 'Android') { //Judge it as Android var main = ();
var pkName = ();
var uid = ().plusGetAttribute("uid");
var NotificationManagerCompat = (".");
//.v4 upgraded to androidx if (NotificationManagerCompat == null) {
NotificationManagerCompat = ("");
}
var areNotificationsEnabled = (main).areNotificationsEnabled();
// If the "Allow Notification" permission is not enabled, the pop-up window reminds you to activate, and after clicking confirmation, jump to the system settings page to set it if (!areNotificationsEnabled) {
({
title: 'Notification permissions are enabled',
content: 'You have not enabled notification permission yet and cannot accept message notifications. Please go to Settings! ',
showCancel: false,
confirmText: 'Go to set',
success: function(res) {
if () {
var Intent = ('');
var Build = ("");
//Android 8.0 boot if (.SDK_INT >= 26) {
var intent = new Intent('.APP_NOTIFICATION_SETTINGS');
('.APP_PACKAGE', pkName);
} else if (.SDK_INT >= 21) { //android 5.0-7.0
var intent = new Intent('.APP_NOTIFICATION_SETTINGS');
("app_package", pkName);
("app_uid", uid);
} else { //(<21)Others--Skip to the details page of this application management (Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = ("package", (), null);
(uri);
}
// Jump to the system notification settings page of the application (intent);
}
}
});
}
} else if ( == 'iOS') { //Judge it is ISO var isOn = undefined;
var types = 0;
var app = ('UIApplication', 'sharedApplication');
var settings = (app, 'currentUserNotificationSettings');
if (settings) {
types = ('types');
(settings);
} else {
types = (app, 'enabledRemoteNotificationTypes');
}
(app);
isOn = (0 != types);
if (isOn == false) {
({
title: 'Notification permissions are enabled',
content: 'You have not enabled notification permission yet and cannot accept message notifications. Please go to Settings! ',
showCancel: false,
confirmText: 'Go to set',
success: function(res) {
if () {
var app = ('UIApplication', 'sharedApplication');
var setting = ('NSURL', 'URLWithString:', 'app-settings:');
(app, 'openURL:', setting);
(setting);
(app);
}
}
});
}
}
// #endif
} ,
/**
This method can be placed in the onShow life cycle of the file or the onShow in the message center to determine whether the user has enabled notification permissions.
-- Android jump system setting various interfaces
3. Push messages to the mobile APP:
Requirements: When there is a message push, push it to the mobile phone status bar
3.1 Get client push identification information cid
// You must obtain the cid before you can receive the push information const cid = ()
(cid);
3.2 Create push messages
//( content, payload, option );
//Create push messages directly locally and add them to the system message center. content: ( String ) Must-choose
The content of the message，Text content displayed in the system notification center。
payload: ( String | Object ) Optional
The data carried by the message，Customize data formats according to business logic。
options: ( MessageOptions ) Optional
Additional parameters for creating a message，refer to
https:///doc/zh_cn/#
('I am your dad! '); // Create local push (1) // Set corner markers3.3 Message Events
- Implement the push function logic of the mobile phone status bar, add push message event listener, and when listening to new messages, use the createMessage API to create messages, add click events, and perform different operations after clicking
- For Android online and offline messages and IOS offline messages, they are all click-listening events. In other words, you can directly push the message to the notification bar of your mobile phone, and then when you click on the message, you can trigger the click event that the application monitors and jump to the corresponding page.
- Receive event, you can listen to messages pushed by the backend, trigger the corresponding callback, and use createMessage to create messages locally
// Add push message event listener click ("click",(msg)=>{
('msg............',msg);
if(){
// Click to jump to the corresponding page ({
url:
})
}
},false)
// Add push message event listener receive ("receive",(msg)=>{
if("LocalMSG" == ){
}else{
if(=='receive'){
var options = {cover:false,title:};
// Create local push (, , options );
}
}
},false)
4. Data and digital corner marks of the message page
- Requirements: When there is a message push, update the data and digital corner marks of the message center page
1. Define the method of requesting message list in the project, store the response data in vuex for use on the Message Center page.
// The data of the message page async getMsgData(){
let res = await this.$callFunction("userContent/getMsgType")
this.$("msgData", );
let msgCount = 0 // Digital corner mark ((item)=>{
if(item._id!=5){
msgCount+=item.no_read_total
}
})
// Assign a value to the tabbar's angle mark let tabbar_data = (())
tabbar_data[3].count = msgCount
this.$("TabbarList", tabbar_data);
2. Listen to the push of messages, and update the message list data and corner mark numbers if received.
// ------------------------------------------------------------------------------------------------------------------------------ ("receive", (msg) => {
(getApp().);
if(.msg_type==501){
uni.$emit('followUpdate','update');
}
let {content, payload, options} = msgCreate(msg)
(content, payload, options);
()
}, false)
- The main focus of the implementation of this function is to pass the global value of the data, and to monitor the changes in the data, and update the data in real time
- You can use vuex or globalData to store data
- You can use $emit $on for global monitoring in nuve page
Summarize
This is the article about the uniapp APP message push solution. For more related uniapp APP message push solution, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!