작은 프로그램 이 그림 을 저장 하 는 방법 에 따라 길 게 실행 합 니 다.

위 챗 브 라 우 저 에서 h5 페이지 를 엽 니 다.img 탭 이 라면 길 게 누 르 면 그림 을 저장 하 는 옵션 이 팝 업 됩 니 다.하지만 위 챗 애플 릿 에 서 는 안 됩 니 다.스스로 이 기능 을 써 야 한다.이 기능 은 두 가지 점 이 있 습 니 다.하 나 는 길 게 누 르 고 하 나 는 그림 을 로 컬 에 저장 하 는 것 입 니 다.
1.위 챗 애플 릿 은 긴 버튼 을 누 르 는 이 벤트 를 제공 합 니 다.bindlongpress 라 고 합 니 다.
2.위 챗 애플 릿 역시 그림 을 저장 하 는 인 터 페 이 스 를 제공 합 니 다.wx.saveImageToPhotosAlbum()입 니 다.
알 겠 습 니 다.우 리 는 이 기능 을 시작 할 수 있 습 니 다.먼저 wxml 를 쓰 십시오.

<image src="{{url}}" data-url="{{url}}" bindlongpress="saveImage"></image>

그리고 js 코드.

Page({
 /**
  *        
  */
 data: {
  url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
 },
 //       
 saveImg(e){
   let url = e.currentTarget.dataset.url;
   wx.saveImageToPhotosAlbum({
     filePath:url,
     success(res) { 
      console.log(res);
     },
     fail(res){
      console.log(res);
     }
    })
 }
})

이렇게 쓰 는 것 은 괜 찮 지만 안 됩 니 다.왜 요?아래 문서 설명 을 보 세 요.

두 가지 문제 에 부 딪 혔 다.
1.권한 부여 필요
2.경 로 는 네트워크 경로 가 아 닙 니 다.
한 가지 문제 가 해결 되 었 습 니 다.먼저 길 게 누 른 후에 그림 을 저장 하지 않 고 사용자 가 권한 을 수 여 받 았 는 지 판단 하 십시오.이 인 터 페 이 스 는 더 이상 말 하지 않 고 전에 쓴 적 이 있 습 니 다.
코드 를 직접 붙이다

wx.getSetting({
   success: (res) => {
    if (!res.authSetting['scope.writePhotosAlbum']) {
     wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success:()=> {
       //     
      },
      fail: (res) =>{
       console.log(res);
      }
     })
    }else{
     //      
    }
   },
   fail: (res) =>{
    console.log(res);
   }
  }) 

권한 수여 문제 가 해 결 된 후에 다른 문 제 를 처리 해 야 한다.바로 그림 이 네트워크 경로 가 될 수 없다 는 것 이다.이 럴 때 우 리 는 다른 인 터 페 이 스 를 사용 할 수 있 습 니 다.wx.getImageInfo()라 고 합 니 다.

문 서 를 통 해 이 인 터 페 이 스 는 네트워크 경 로 를 받 을 수 있 고 로 컬 경 로 를 되 돌려 줍 니 다.그래서 우 리 는 먼저 이 인터페이스 로 네트워크 경 로 를 전환 시 킨 다음 에 wx.saveImageToPhotos Album 에 가 져 가서 사용 합 니 다.

wx.getImageInfo({
   src: url,
   success:(res)=> {
    let path = res.path;
    wx.saveImageToPhotosAlbum({
     filePath:path,
     success(res) { 
      console.log(res);
     },
     fail:(res)=>{
      console.log(res);
     }
    })
   },
   fail:(res)=> {
    console.log(res);
   }
  })

그래서 전체적인 코드 는 이 렇 습 니 다.

Page({
 data: {
   url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
 },
 //       
 saveImg(e){
  let url = e.currentTarget.dataset.url;
  //      
  wx.getSetting({
   success: (res) => {
    if (!res.authSetting['scope.writePhotosAlbum']) {
     wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success:()=> {
       //     
       this.saveImg1(url);
      },
      fail: (res) =>{
       console.log(res);
      }
     })
    }else{
     //      
     this.saveImg1(url);
    }
   },
   fail: (res) =>{
    console.log(res);
   }
  })  
 },
 saveImg1(url){
  wx.getImageInfo({
   src: url,
   success:(res)=> {
    let path = res.path;
    wx.saveImageToPhotosAlbum({
     filePath:path,
     success:(res)=> { 
      console.log(res);
     },
     fail:(res)=>{
      console.log(res);
     }
    })
   },
   fail:(res)=> {
    console.log(res);
   }
  })
 },
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.