微信小程序相册-笔记1

小程序截图：


以下是代码与笔记

// miniprogram/app.json
{
“pages”: [
“pages/manageAlbum/manageAlbum”,
“pages/viewAlbum/viewAlbum”,
“pages/album/album”,
“pages/managePhoto/managePhoto”,
“pages/selectCover/selectCover”,
“pages/viewPhoto/viewPhoto”,
“components/popup/popup”
],
“tabBar”: {
“custom”: false,
“color”: “#7A7E83”,
“selectedColor”: “#3cc51f”,
“borderStyle”: “black”,
“backgroundColor”: “#ffffff”,
“list”: [
{
“pagePath”: “pages/viewAlbum/viewAlbum”,
“iconPath”: “icons/icon_album.png”,
“selectedIconPath”: “icons/icon_album_HL.png”,
“text”: “album”
},
{
“pagePath”: “pages/manageAlbum/manageAlbum”,
“iconPath”: “icons/icon_manage.png”,
“selectedIconPath”: “icons/icon_manage_HL.png”,
“text”: “manage”
}
]
},
“window”: {
“backgroundColor”: “#F6F6F6”,
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#F6F6F6”,
“navigationBarTitleText”: “Album Manager”,
“navigationBarTextStyle”: “black”
},
“sitemapLocation”: “sitemap.json”,
“style”: “v2”
}

1.app.json文件
Pages：小程序用到的页面路径。
tabBar：菜单窗口，这里设置了两栏（viewAlbum与manageAlbum），“custom”：false 菜单为默认样式。
window：小程序窗口

// miniprogram/pages/viewalbum/viewAlbum.js
const app = getApp()

Page({
  data: {
    focus: false,
    album: [],
    cloudpath: "cloud://letmein-4o5m8.6c65-letmein-4o5m8-1302488629/"
  },

  onLoad: function (options) {
    let that = this
    const db = wx.cloud.database()
    db.collection('albums').get({
      success: function (res) {
        // console.log(res.data)
        var albumData = res.data
        that.setData({
          album: albumData
        })
      }
    })
    wx.setNavigationBarTitle({
      title: 'album',
    })
  },

  onShow: function (options) {
    let that = this
    const db = wx.cloud.database()
    db.collection('albums').get({
      success: function (res) {
        // console.log(res.data)
        var albumData = res.data
        that.setData({
          album: albumData
        })
      }
    })
  },

  doOpenAlbum: function (e) {
   // console.log('e means', e)
    const pagePath = '../viewPhoto/viewPhoto?id=' + e.target.dataset.id + '&albumname=' + e.target.dataset.albumname
    wx.navigateTo({
      url: pagePath
    })
  },

})

2.viewAlbum页面的js文件
data：页面初始数据。可用setData来更新其中的字段

onLoad：与onOnload、onShow、onHide同属于页面生命周期函数。切换页面路由会触发相应的页面生命周期函数。viewAlbum页面用到了onLoad与onShow。
db.collection(‘database’).get()获取后端某一数据库中的数据。若success，则将res.data存至page data中的album字段。res.data是get函数获取到的数据list，一次至多20条。多于20条则需要分段截取。
因为需要调用this.setData来储存数据，而setData是多层嵌套的，需要在onLoad里写that = this。
wx.setNavigationBarTitle设置该页面的窗口标题

onShow：和onLoad一样。不过切换页面路由时，两者的表现不同。主要是调用wx.navigateBack返回某页面时，只触发onShow。

doOpenAlbum：与button或者bindtap绑定的函数。在触发点击事件时，与受点击的页面组件相应的bindtap函数会触发。这里把事件e作为参数传入，这样使我能够辨别哪一个页面组件（图片）被点击了。同时，调用e.target.dataset来实现带参数的页面路由。（pagePath问号后的内容为参数）
格式为key=value&key2=value2&…

// miniprogram/pages/viewalbum/viewAlbum.wxml
<view class="page-body">

  <view class="list">
    <view class="albumbox">
      <view class="album-element" wx:for="{{album}}">
        <text class="no-cover-album" bindtap="doOpenAlbum" data-id="{{item._id}}" data-id="{{item._id}}" data-albumname="{{item.albumname}}" wx:if="{{item.cover == null}}">cover not selected</text>
        <image class="cover-album" bindtap="doOpenAlbum" data-id="{{item._id}}"  src="{{cloudpath + item._id + '/'+ item.cover}}" data-id="{{item._id}}" data-albumname="{{item.albumname}}" mode="widthFix" wx:else></image>
      </view>
    </view>
  </view>

</view>

3.viewAlbum的wxml文件（类似html）
wxml文件中，class放在“”里。而当调用js文件的page data时，使用{{}}。

viewAlbum显示所有相册（album）的封面图（cover），因此需要做一个list。其中的album-element包含两个元素：有封面的相册与无封面的相册。通过wx:for遍历js文件里album字段代表的list。从中获取到图片路径后可用src把图片显示出来。Item代表album里的元素。
wx:if条件渲染。判断是否有专辑封面以后，通过它来控制组件的显示。若没有封面，则显示默认样式no-cover-album

/* miniprogram/pages/viewalbum/viewAlbum.wxss */

@import "../lib/weui.wxss";

.page-section{
  margin-bottom: 20rpx;
}

.albumbox{
  width: 100%;
  height: 100%;
  column-count: 2;
  column-gap: 5rpx;
}

.album-element{
  width: 100%;
  position: relative;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  counter-increment: item-counter;
}

.cover-album{
  font-size: 10px;
  display: block;
  width: 360rpx;
  margin-bottom: 10px;
  background-color: azure;
}

.no-cover-album{
  font-size: 16px;
  display: flex;
  width: 360rpx;
  height: 240rpx;
  margin-bottom: 10px;
  color: cornflowerblue;
  background-color: azure;
  align-items: center;
  justify-content: center;
}

4.viewAlbum的wxss文件（类似css）
.albumbox：column-count将组件排版设置为按列显示。规定列数。填充完上一列后转至下一列

.album-element：position是relative。因为album-element嵌套在albumbox中，这样album-element的图片会按顺序排版，然后填充albumbox。
-webkit-column-break-inside: avoid;
break-inside: avoid；
这两行很重要。它们确保图片在转列时不会拦腰折断。（等我截个图）

.cover-album：display: block。限制了图片的宽度，高度自适应缩放。

.no-cover-album：display: flex。使我能自定义text框的大小。并设置文字垂直水平居中