Dear friends, I have done a little research on uniPush recently, and now I have some experience, and now I will share it with you, hoping to help you in your uniapp journey. This tutorial is to teach you how to use uniPush to customize message notifications, and it also comes with adding message notification sounds, so let me share my experience with you.
1. First, we need to go to the Dcloud Developer Center to configure uniPush for your project
The next step is the operation steps
1. Select uniPush
2. Select message push
3. Select the item you need to use
Finally fill in the relevant information
At this time, some friends will definitely ask, how did you get your app signature? Don’t worry, I will teach you how to get it.
1. Find the application management at the top of the sidebar and select my application
2. Click on your application
Then click the edit button
Don't talk nonsense, click it
click it
Then scroll down and you will find what you want, and fill them in the corresponding positions in the application information in turn
After you return to the message push just now, you will find that the missing information is all there, and then turn on uniPush.
2. Next, we need to enable the permission of uniPush
After entering our project directory, find the manifest.json file, and follow the steps below to enable uniPush permission. Here you can choose the old version 1.0 or the new version 2.0. I used 1.0 and I have never used 2.0. It is recommended to follow my tutorial and use 1.0 like me, otherwise you cannot guarantee your success.
2. Customize the message prompt icon
If you don't want to use the green message prompt icon that comes with uniapp, then I suggest you follow my steps to find the folder unpackage->res first and then create the following folder like me under res, and then see step 4 from The path from top to bottom is a PNG image with an alpha transparency channel in the image size of 18x18, 24x24, 36x36, 48x48, and 72x72. The background must be transparent (if it is not transparent, it will be displayed as a white square).
3. Create a local message prompt to add a prompt sound
We see the following picture and I have a text description
The code is as follows, I am lazy, just copy mine directly, you can modify it by yourself
var options = {
cover: false,
sound: 'system',
title: this.newNotices[i].noticeTitle,
//
};
let str = ""
str = this.newNotices[i].noticeContent
let body = {
data: this.newNotices[i]
}
let payload = JSON.stringify(body);
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src =
'https://you.induschain.cn/audio/y913.mp3';
plus.push.createMessage(str, payload, options);
}4. Listen to the click of the message prompt to obtain the data in the payload
I think some friends may need to get the data from the payload like me, and then jump to the corresponding details page or other pages according to the data, so the next step is to do it with me.
1. Find the App.vue file
2. Use the onLaunch lifecycle hook
3. Pay attention to conditional compilation
4. Click and monitor the prompt information
5. Obtain the data in the payload from msg
6. Perform relevant operations based on your data
The code is as follows, please modify it according to your needs
// #ifdef APP-PLUS
plus.push.addEventListener('click', function(msg) {
//
// 分析msg.payload处理业务逻辑
// let message = JSON.parse(msg)
let data = msg.payload.data
uni.navigateTo({
url: `/pages/notice-detail/notice-detail?noticeInfo=${encodeURIComponent(JSON.stringify(data))}`
})
// console.log("消息弹框被点击", msg.payload.data);
});
//#endifThis is the end of the tutorial, and friends who have questions can ask questions in the comment area!