友人の表示アプレット円を達成するために、クラウド・パブリッシングと発展に伴い

アプレットクラウド発展に伴い、より成熟し、今のクラウド開発をお友達・プログラム関数の小さい円を達成取るために、今日、より多く行うことができます。

知識スキルポイント

• 1、小さなクラウド開発プログラム
• 2、アプレットクラウドストレージ
• 3、アプレットクラウドデータベース
• 図4は、拡大するために画像をプレビューします
• 5、選択して画像を削除

弾力をリリースしたフローチャートを描きます

ここでは、実際にデータベースにデータを保持するものです。

その後、我々はただの友達のページのサークル内のデータベースに要求データを必要とし、その後、以下のようにページに見せ

、我々は次の機能が公開実現するために来るように表示

友人の出版円

まず、最初に小さなプログラムのプロジェクトを作成する必要があります

あなたは私の以前の記事を見て行くことができる小さなプログラムのプロジェクトを作成する方法がわからない場合はここで、言うことはないが、私は記録するために見ることができ、「10時間と基本アプレット開発を。」

• 注：あなたが小さなプログラム（個々のライン）を登録する必要がありますので、ご自身のAPPIDを使用してください

第二に、出版物のページを作成

私たちは、ページレイアウトは比較的簡単であるテキスト入力ボックス、画像表示領域、リリースボタンを公開します。

掲示最初のリリースページレイアウトwxml

<textarea class="desc" placeholder="请输入内容" bindinput="getInput" />
<view class="iamgeRootAll">
  <view class="imgRoot" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
    <view wx:if="{{imgList.length==(index+1)&& imgList.length<8}}" class="imgItem" bindtap="ChooseImage">
      <image class="photo" src="../../images/photo.png"></image>
    </view>
    <view wx:else class="imgItem" data-index="{{index}}">
      <image class="img" src='{{item}}' mode='aspectFill'></image>
      <image class="closeImg" bindtap="DeleteImg" src="../../images/close.png" data-index="{{index}}"></image>
    </view>
  </view>
  <!-- 一开始用来占位 -->
  <view wx:if="{{imgList.length==0}}" class="imgItem" bindtap="ChooseImage">
    <image class="photo" src="../../images/photo.png"></image>
  </view>
</view>

<button type="primary" bindtap="publish">发布朋友圈</button>

ここでの唯一の難点は、画像の数は、下記の画像の分布は、私たちが行くことを考慮し、状況のポイントをとる、ユーザーが固定されていない各時間を選択しているためということです。
WX：IF = "{{imgList.length ==（指標+ 1）&& imgList.length <8}}" このコードは数➕我々は隠されたディスプレイを解放を制御するために使用されます。

この➕番号は次の3つの条件を考慮する必要がいます

• のみ➕番号を表示するために、任意の画像を追加していない1、
• 2、写真がありますが、8未満では、我々は写真のプラス記号を表示する必要がある場合。
• 3、8枚の絵があり、プラス記号が非表示になります。
  慎重にコードが反映されwxmlコード、上に見えます。

第三に、選択して表示画像を達成するために

選択した写真が簡単です、あなたは公式のAPIを使用することができます。次のようにコードがあります

  //选择图片
  ChooseImage() {
    wx.chooseImage({
      count: 8 - this.data.imgList.length, //默认9,我们这里最多选择8张
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], //从相册选择
      success: (res) => {
        console.log("选择图片成功", res)
        if (this.data.imgList.length != 0) {
          this.setData({
            imgList: this.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
      }
    });
  },

这里单独说明下 8 - this.data.imgList.length。因为我这里规定最多只能上传8张图片。所以用了count8 ,至于后面为什么要减去this.data.imgList.length。主要是我们用户不一定一次选择8张图片，有可能第一次选择2张，第二次选择2张。。。
所以我们做选择时，每次传入的数量肯定不一样的。而这个imgList.length就是用户已经选择的图片个数。用8减去已选择的个数，就是下次最多能选择的了。

上面代码在选择成功后，会生成一个临时的图片链接。如下图所示，这个链接既可以用来展示我们已经选择的图片，后面的图片上传也要用到。

四，实现图片删除功能

我们每张图片的右上角有个删除按钮，点击删除按钮可以实现图片的删除。

这里比较简单，把代码贴给大家

  //删除图片
  DeleteImg(e) {
    wx.showModal({
      title: '要删除这张照片吗？',
      content: '',
      cancelText: '取消',
      confirmText: '确定',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.setData({
            imgList: this.data.imgList
          })
        }
      }
    })
  },

五，发布功能

• 1，发布之前我们需要先校验下内容和图片是否为空
  

• 2，由于我们发布的时候要保证所有的图片都要上传成功，所以这里我们这么处理。

  const promiseArr = []
  //只能一张张上传 遍历临时的图片数组
  for (let i = 0; i < this.data.imgList.length; i++) {
    let filePath = this.data.imgList[i]
    let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式，获取文件扩展名
    //在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行
    promiseArr.push(new Promise((reslove, reject) => {
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + suffix,
        filePath: filePath, // 文件路径
      }).then(res => {
        // get resource ID
        console.log("上传结果", res.fileID)
        this.setData({
          fileIDs: this.data.fileIDs.concat(res.fileID)
        })
        reslove()
      }).catch(error => {
        console.log("上传失败", error)
      })
    }))
  }
  //保证所有图片都上传成功
  Promise.all(promiseArr).then(res => {
  //图片上传成功了，才会执行到这。。。
  })

  我们这里用Promise来确保所有的图片都上传成功了，才执行后面的操作。

  把完整的发布代码贴给大家吧

  /**
  * 编程小石头
  * wehchat：2501902696
  */
  let app = getApp();
  Page({
  data: {
  imgList: [],
  fileIDs: [],
  desc: ''
  },
  
  //获取输入内容
  getInput(event) {
  console.log("输入的内容", event.detail.value)
  this.setData({
    desc: event.detail.value
  })
  },
  
  //选择图片
  ChooseImage() {
  wx.chooseImage({
    count: 8 - this.data.imgList.length, //默认9,我们这里最多选择8张
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: (res) => {
      console.log("选择图片成功", res)
      if (this.data.imgList.length != 0) {
        this.setData({
          imgList: this.data.imgList.concat(res.tempFilePaths)
        })
      } else {
        this.setData({
          imgList: res.tempFilePaths
        })
      }
    }
  });
  },
  //删除图片
  DeleteImg(e) {
  wx.showModal({
    title: '要删除这张照片吗？',
    content: '',
    cancelText: '取消',
    confirmText: '确定',
    success: res => {
      if (res.confirm) {
        this.data.imgList.splice(e.currentTarget.dataset.index, 1);
        this.setData({
          imgList: this.data.imgList
        })
      }
    }
  })
  },
  
  //上传数据
  publish() {
  let desc = this.data.desc
  let imgList = this.data.imgList
  if (!desc || desc.length < 6) {
    wx.showToast({
      icon: "none",
      title: '内容大于6个字'
    })
    return
  }
  if (!imgList || imgList.length < 1) {
    wx.showToast({
      icon: "none",
      title: '请选择图片'
    })
    return
  }
  wx.showLoading({
    title: '发布中...',
  })
  
  const promiseArr = []
  //只能一张张上传 遍历临时的图片数组
  for (let i = 0; i < this.data.imgList.length; i++) {
    let filePath = this.data.imgList[i]
    let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式，获取文件扩展名
    //在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行
    promiseArr.push(new Promise((reslove, reject) => {
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + suffix,
        filePath: filePath, // 文件路径
      }).then(res => {
        // get resource ID
        console.log("上传结果", res.fileID)
        this.setData({
          fileIDs: this.data.fileIDs.concat(res.fileID)
        })
        reslove()
      }).catch(error => {
        console.log("上传失败", error)
      })
    }))
  }
  //保证所有图片都上传成功
  Promise.all(promiseArr).then(res => {
    wx.cloud.database().collection('timeline').add({
      data: {
        fileIDs: this.data.fileIDs,
        date: app.getNowFormatDate(),
        createTime: db.serverDate(),
        desc: this.data.desc,
        images: this.data.imgList
      },
      success: res => {
        wx.hideLoading()
        wx.showToast({
          title: '发布成功',
        })
        console.log('发布成功', res)
        wx.navigateTo({
          url: '../pengyouquan/pengyouquan',
        })
      },
      fail: err => {
        wx.hideLoading()
        wx.showToast({
          icon: 'none',
          title: '网络不给力....'
        })
        console.error('发布失败', err)
      }
    })
  })
  },
  })

  到这里我们发布的功能就实现了，发布功能就如下面这个流程图所示。
  
  我们最终的目的是要把文字和图片链接存到云数据库。把图片文件存到云存储。这就是云开发的方便之处，不用我们编写后台代码，就可以轻松实现后台功能。

接下来讲朋友圈展示页。

这个页面主要做的就是

• 1，从云数据库读取数据
• 2，展示列表数据

1，读取数据

这里读取数据挺简单，就是从云数据库读数据，这里我们做了一个排序，就是最新发布的数据在最上面。代码如下

wx.cloud.database().collection('timeline')
      .orderBy('createTime', 'desc') //按发布视频排序
      .get({
        success(res) {
          console.log("请求成功", res)
          that.setData({
            dataList: res.data
          })
        },
        fail(res) {
          console.log("请求失败", res)
        }
      })

云数据库的读取也比较简单，有不会的同学，或者没有听说过小程序云开发的同学，可以去翻看下我之前发的文章，也可以看下我录的《10小时零基础入门小程序云开发》

2，朋友圈列表的展示

ここでは、誰にでもレイアウトコードステッカーに直接、比較的簡単です。データリストは、データ要求に私たちの最初のステップです。

<block wx:for="{{dataList}}" wx:key="index">
  <view class="itemRoot">
    <view>
      <text class="desc">{{item.desc}}</text>
    </view>
    <view class="imgRoot">
      <block class="imgList" wx:for="{{item.fileIDs}}" wx:for-item="itemImg" wx:key="index">
        <image class="img" src='{{itemImg}}' mode='aspectFill' data-img='{{[itemImg,item.fileIDs]}}' bindtap="previewImg"></image>
      </block>
    </view>
  </view>
</block>

3.画像のプレビュー機能もあります

この関数は、コードの次の数行を達成するのは非常に簡単ですが、我々はwxmlたくさんの悩みからコンポーネント上のデータを取得するとき。

  // 预览图片
  previewImg: function(e) {
    let imgData = e.currentTarget.dataset.img;
    console.log("eeee", imgData[0])
    console.log("图片s", imgData[1])
    wx.previewImage({
      //当前显示图片
      current: imgData[0],
      //所有图片
      urls: imgData[1]
    })
  },

4、写真のリストを取得し、現在の画像は、DATA-を通じて映像データをクリックします

ときに我々はデータ - 転送データを通じて、コンポーネントをクリックしますが、複数のデータは、それをクリックして転送するかのように。この時間は、データを渡すためにデータ-XXX = '{{[XXX、XXX]}}' であってもよいです。次のコード

<block wx:for="{{item.fileIDs}}" wx:key="item2" wx:for-item="item2">
     <image  src='{{item2}}' data-img='{{[item2,item.fileIDs]}}' mode='aspectFill' bindtap="previewImg"></image>
</block>

//我们再js里可以接收两个数据
previewImg: function(e) {
    let imgData = e.currentTarget.dataset.img;
    console.log("item2", imgData[0])
    console.log("item.fileIDs", imgData[1])
    //大图预览
    wx.previewImage({
      //当前显示图片
      current: imgData[0],
      //所有图片
      urls: imgData[1]
    })
},

上記のコードは、クリック、DATA- JSリーに送信されるデータを複数達成することができます。

ここでは、完全に達成公開し、友人の輪が表示されます

友人のサークルは、それを美化するために何度も何度も-が適用ポストを行うには、比較的単純な、時間を示しています。

私は貧しい学生が私のマイクロチャネルの獲得を追加することができ、ネットワークディスクにソースコードをアップロードした2501902696

私が捧げ映像を記録するために戻ってきます。ご期待。