How to set push icon in uniapp

If you develop with Uniapp, it is very common to use system, message and advertising notifications in your application. In these notifications, the push icon plays an important role as it is one of the symbols by which users can identify the source of the notification. Therefore, this article will show you how to set push icon in Uniapp.

Steps

1. Prepare the icon

Before setting the push icon, you need an icon file that meets the system requirements. Depending on the operating system, the system requirements are different. In Android, the icon must be in png format; in iOS, the icon must be in transparent png format, and the icon is drawn in white, while the bottom is transparent.

2. Add platform-related icons

Uniapp provides independent application configuration files for iOS and Android operating systems, and packages your application based on these files. In these files you can easily set push icons.

iOS

In Uniapp, the configuration file for iOS applications is /unpackage/_yourapp_/ios/Info.plist . Open this file and find the following code block.

<key>CFBundleIcons</key>
<dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>AppIcon60x60@2x.png</string>
      <string>AppIcon60x60@3x.png</string>
      <string>AppIcon76x76~ipad.png</string>
      <string>AppIcon76x76@2x~ipad.png</string>
      <string>AppIcon83.5x83.5@2x~ipad.png</string>
      <string>AppIcon1024x1024.png</string>
    </array>
    <key>UIPrerenderedIcon</key>
    <false/>
  </dict>
</dict>

Here you can find the CFBundlePrimaryIcon node under the CFBundleIcons node, which contains the primary icon settings for your application. You can add platform-related icon files in the CFBundleIconFiles node to set the push icon. For example, if your push icon file is named pushIcon.png, you can add it to the array.

<key>CFBundleIcons</key>
<dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>AppIcon60x60@2x.png</string>
      <string>AppIcon60x60@3x.png</string>
      <string>AppIcon76x76~ipad.png</string>
      <string>AppIcon76x76@2x~ipad.png</string>
      <string>AppIcon83.5x83.5@2x~ipad.png</string>
      <string>AppIcon1024x1024.png</string>
      <string>pushIcon.png</string>
    </array>
    <key>UIPrerenderedIcon</key>
    <false/>
  </dict>
</dict>

Android

In the xml manifest file of your Android application, you can set the push icon. The location of the manifest file is /unpackage/_yourapp_/android/AndroidManifest.xml. Open this file and find the following lines of code.

<meta-data android:name="com.huawei.hms.client.appid" android:value="App ID" />

Add the following code below this line.

<meta-data android:name="push_scheme" android:value="${packageName}.push.intent.scheme" />
<meta-data android:name="push_icon" android:value="pushIcon" />

Among them, the value of push_icon is your push icon file name.

3. After completing

setting the push icon, repackage your app and run it on the device. You should be able to see the push icon you set appear in the notification.

Conclusion

The above are the steps to set the push icon in Uniapp. Please make sure that your icon file meets the system requirements and add it to the corresponding location in the Info.plist for iOS and the xml manifest file for Android. Good luck rolling out all your push notifications!

The above is the detailed content of How to set push icon in uniapp. For more information, please follow other related articles on the PHP Chinese website!