How to set mobile wallpaper in uniapp

With the popularity of smart phones, more and more people are paying attention to the beauty and personalization of mobile phones. In addition to choosing your favorite phone cases and accessories, setting a beautiful wallpaper is also an important part of making people happy. Today, we will introduce a method to use uniapp to set mobile phone wallpaper to make your phone more personalized.

1. Install the necessary plug-ins

Before we start, we need to install two necessary plug-ins-H5 wallpaper plug-in and Native plug-in. Among them, the H5 wallpaper plug-in is used to convert images into Base64 encoding, and the Native plug-in is used to save Base64 encoding as wallpaper.

1. Installation of H5 wallpaper plug-in

Open the command line and enter the following commands to complete the installation.

npm i h5-wallpaper --save

After the installation is complete, add the following code in the "app-plus" section of the project's manifest.json file.

"plugins": {

"wallpaper": {
  "provider": "@readhelper/h5-wallpaper"
}

}

Note: The value in the above provider is the npm package name corresponding to the plug-in.

2. Native plug-in installation

Native plug-in needs to be downloaded manually. The download address is https://ext.dcloud.net.cn/plugin?id=392.

After the download is completed, copy the unzipped folder to the unpackage folder of the project. Add the following code in the "app-plus" section of your project's manifest.json file.

"uni-root-plugin": {

"name": "wallpaper",
"version": "1.0.0",
"description": "设置壁纸",
"path": "/unpackage/ext_plugin/uni-wallpaper-plugin"

}

Note: The value in the above path is the folder path where the plug-in is located. It should be based on the actual situation of your project. to modify.

2. Code implementation for setting wallpaper

1. Get the Base64 encoding of the image

Before setting the wallpaper, we need to obtain the Base64 encoding of the image. The following is an example of using uniapp's HTML5 file input control to obtain the Base64 encoding of an image.

<script><br> export default {<br> data () {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return {   imgSrc: '' }</pre><div class="contentsignin">Copy after login</div></div> <p>},<br> methods: {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">handleFileChange (event) {   const file = event.target.files[0]   const reader = new FileReader()   reader.readAsDataURL(file)   reader.onload = (event) =&gt; {     this.imgSrc = event.target.result   } }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br>}<br></script>

2. Use the H5 wallpaper plug-in to convert the Base64 encoding of the image into the URI format

After obtaining the Base64 encoding of the image, we need to use the H5 wallpaper plug-in to convert it into the URI format. code show as below.

import Wallpaper from 'h5-wallpaper'
const result = await Wallpaper.base64ToWallpaper({
base64Str: imageBase64Data,
height: 1920,
width: 1080
} )
if (result.errMsg === 'base64ToWallpaper:ok') {
// Base64 encoding conversion successful
console.log(result.filePath)
}

3. Use Native plug-in to set the picture in URI format as wallpaper

The last step is to use Native plug-in to set the picture in URI format as wallpaper. code show as below.

export default {
methods: {

async setWallpaper (imageBase64Data) {
  const wallpaperResult = await uni.requireNativePlugin('uni-root-plugin').wallpaper.setWallpaper({
    uri: 'file://' + imageBase64Data,
    isLockscreen: false
  })
  if (wallpaperResult.errMsg === 'setWallpaper:ok') {
    console.log('壁纸设置成功')
  }
}

}
}

At this point, through the above code, we have implemented the use of uniapp to set the mobile phone wallpaper Function. Next, we can try to use different pictures to set wallpapers to make your phone more personalized.

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