使用Ionic开发安卓App实现点击图片设置壁纸功能求助

前置依赖安装 #

先安装壁纸相关插件，执行以下命令：

# 安装cordova壁纸插件
cordova plugin add cordova-plugin-wallpaper

然后在安卓配置文件android/app/src/main/AndroidManifest.xml中添加权限：

<uses-permission android:name="android.permission.SET_WALLPAPER" />

修正home.page.html代码 #

你原代码只有第一张图片绑定了点击事件，且调用方法没有传参也没有加执行括号，所有图片都要绑定点击事件并传入对应图片路径，修正后代码如下：

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <img (click)="showSetWallpaperConfirm('/assets/11_nasaspacescapes_0005_6.jpg')" src="/assets/11_nasaspacescapes_0005_6.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11bradfieldpark1920x1200.jpg')" src="/assets/11bradfieldpark1920x1200.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11castle_germany_de1.jpg')" src="/assets/11castle_germany_de1.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11coralreefpattern1920x1200.jpg')" src="/assets/11coralreefpattern1920x1200.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11dualorbs.jpg')" src="/assets/11dualorbs.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11lightning11.jpg')" src="/assets/11lightning11.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11nickboyerart-witheredflower1.jpg')" src="/assets/11nickboyerart-witheredflower1.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11qingzang.jpg')" src="/assets/11qingzang.jpg">
  <img (click)="showSetWallpaperConfirm('/assets/11royalalberthall1920x1200.jpg')" src="/assets/11royalalberthall1920x1200.jpg">

</ion-content>

注：资源路径直接写/assets/xxx即可，不需要相对路径，打包后会自动适配安卓本地路径

修正home.page.ts代码 #

你原代码没有导入和注入Platform、AlertController，也没有实现确认弹窗逻辑，修正后代码如下：

import { Component } from '@angular/core';
import { Platform, AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private platform: Platform,
    private alertController: AlertController
  ) {}

  // 弹出设置壁纸确认弹窗
  async showSetWallpaperConfirm(imgUrl: string) {
    const alert = await this.alertController.create({
      header: '设置壁纸',
      message: '确定要将这张图片设置为系统壁纸吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确认',
          handler: () => {
            this.setWallpaper(imgUrl);
          }
        }
      ]
    });
    await alert.present();
  }

  // 执行设置壁纸逻辑
  setWallpaper(imgUrl: string) {
    this.platform.ready().then(() => {
      (window as any).plugins.wallpaper.setImage(imgUrl);
      console.log('壁纸设置成功');
    });
  }
}

注意事项 #

• 该功能仅能在安卓真机/模拟器上运行测试，浏览器环境不支持系统壁纸设置API
• 打包前请确认所有图片资源都放在项目的src/assets目录下，路径正确没有拼写错误

内容的提问来源于stack exchange，提问作者ILLUMINAG gaming