WeChat 애플릿 이미지 미리보기 기능 구현 코드

사진 미리보기는 매우 일반적인 기능입니다. 이 글에서는 사진 미리보기 기능을 구체적으로 구현하기 위해 WeChat 애플릿을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

Rendering

Principle

• wx.chooseImage를 사용하여 로컬 이미지를 선택하세요.

• 이미지를 미리 보려면 wx.previewImage를 사용하세요.
  

WXML

<view>
 <button bindtap="previewImage" type="primary">图片上传预览</button>
 <view class="tui-content"> 
  <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" src="{{item}}" src="{{item}}"></image>
 </view>
</view>

WXSS

page{background-color: #efeff4;}
.tui-preview-img{
 width: 200rpx;
 height: 120rpx;
}

JS

Page({
 data: {
  previewImageArr:[]
 },
 previewImage(e){
  var self = this;
  wx.chooseImage({
   count:8,
   success(res) {
    var tempFilePaths = res.tempFilePaths;
    self.setData({ previewImageArr: tempFilePaths});
   }
  })
 },
 changePreview(e){
  var self = this;
  wx.previewImage({
   current: e.currentTarget.dataset.src,
   urls: self.data.previewImageArr
  })
 }
})

Note

wx.previewImage 매개변수 current 및 url은 http 링크여야 합니다.

관련 권장사항:

이미지 미리보기를 구현하고 썸네일을 업로드 및 생성하는 AJAX 메서드

이미지 미리보기 및 업로드를 구현하는 nodejs용 샘플 코드

jQuery가 uploadView를 사용하여 이미지 미리보기 및 업로드를 구현하는 방법의 예 기능

위 내용은 WeChat 애플릿 이미지 미리보기 기능 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!