【WeChatアプレット】モバイル端末で画像を選択して公開する機能を実現

完成品は以下の通りです

この記事では、主に選択画像機能の実装について説明します。

原則：

// html
<view class="chooseImageBox">
	<!-- 渲染已选择图片 -->
    <block wx:for="{
     
     {photo}}" wx:key="photoIndex">     
        <view class="beChoosen_ImageBox">
            <image class="beChoosen_Image" src="{
     
     {item.tempFilePath}}" bindtap="preViewImage" data-index="{
     
     {index}}" mode="aspectFill"></image>
            <view class="del_beChoosen_Image" bindtap="del_beChoosen_Image" data-index="{
     
     {index}}">×</view>
        </view>
    </block>
    
	<!-- 点击选择图片 -->
    <view class="chooseImage" bindtap="chooseImage">   
        <image src="./images/jia.png"></image>
    </view>
</view>

ユーザーが画像を選択する前は、変数photoは空の配列です。ユーザーが画像を選択したら、画像キャッシュアドレスを変数に保存して、選択した画像をレンダリングします。画像ボタンを選択して戻ります。

また、画像プレビュー機能と画像削除機能があり、原理は繰り返されません。

コードにわからないことがある場合は、コメント欄で質問してください。

すべてのコードは次のとおりです。

// 点击事件 - 选择图片
chooseImage(){
    
    
    let that = this;
    wx.chooseMedia({
    
                                    // 上传图片
      count: 6,
      mediaType:'image',
      sourceType:['album','camera'],
      sizeType: ['original', 'compressed'],       // 可选择原图、压缩图
      success: (res) => {
    
    
          let photo = that.data.photo.concat(res.tempFiles);
          
          wx.getImageInfo({
    
                           // 获得图片信息
              src: photo[0].tempFilePath,
              success: (res) => {
    
    
                  photo[0].imageHeight = res.height;
                  photo[0].imageWidth = res.width;
                  that.setData({
    
     photo })
              }
          })
      }
  })
},
// 点击事件 - 删除图片
del_beChoosen_Image(e) {
    
    
  let index = e.target.dataset.index;   // 照片索引值
  let photo = this.data.photo.slice();  

  photo.splice(index,1);                // 注意：splice返回值是删除的元素, 并改变原数组
  this.setData({
    
     photo });
},
// 点击已选图片 - 进行预览
preViewImage(e) {
    
    
  let urls = this.data.photo.map(item => {
    
    
    return item.tempFilePath
  });
  let index = e.target.dataset.index;

  wx.previewImage({
    
    
    urls: urls,
    current: urls[index]
  })
},

// css
.chooseImageBox {
    
    
  display: flex;
  flex-direction: row;
  align-items: center;
}
.beChoosen_ImageBox {
    
    
  display: inline-block;
  position: relative;
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}
.beChoosen_Image {
    
    
  width: 150rpx;
  height: 150rpx;
  border-radius: 15rpx;
}
.del_beChoosen_Image {
    
    
  position: absolute;
  top: 5rpx;
  right: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: rgb(10, 10, 10,0.3);
  font-size: 25rpx;
  color: #fff;
}
.chooseImage {
    
    
  width: 150rpx;
  height: 150rpx;
  background-color: rgb(245, 245, 245);
  border-radius: 15rpx;

  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.chooseImage image {
    
    
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
}