微信小程序相册-笔记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 = thisconst db = wx.cloud.database()db.collection('albums').get({success: function (res) {// console.log(res.data)var albumData = res.datathat.setData({album: albumData})}})wx.setNavigationBarTitle({title: 'album',})},onShow: function (options) {let that = thisconst db = wx.cloud.database()db.collection('albums').get({success: function (res) {// console.log(res.data)var albumData = res.datathat.setData({album: albumData})}})},doOpenAlbum: function (e) {// console.log('e means', e)const pagePath = '../viewPhoto/viewPhoto?id=' + e.target.dataset.id + '&albumname=' + e.target.dataset.albumnamewx.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框的大小。并设置文字垂直水平居中

微信小程序相册-笔记1相关推荐

微信小程序开发-笔记
一.开发文件结构 1.根目录下有三个文件:app.js,app.json和app.wxss.一个小程序项目必须有的三个描述App的文件.这三个文件是应用程序级别的文件.这3个文件的意义: 表1.1 ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）
云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址先去网站上http ...
微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...

微信小程序相册-笔记1

微信小程序相册-笔记1相关推荐

最新文章

热门文章