微信小程序组件开发——可视化电影选座

hallNumber: String

},

2. 组件页面布局

==========

页面中有能动的，也有不能动的，当然还有自己能动的；这个组件呢，顶部的标识区属于静态部分和座位区是可移动的并且可以双指缩放，具体结构如下：

image.png

1. 标识区构成

这个区域主要是起提示作用，提示座位的信息，包括了普通区和优选区，当然，代码直接可以偷取座位区域中的座位的WXSS样式，用signs_normal和seat_Excellent类名实现。当然，谁不喜欢c位呢~

普通区

优选区

1. 座位区构成

这个部分我们分为了三个小部分：屏幕，电影厅介绍和座位区， 听我细细道来！

image.png

2.1 电影屏幕：

为实现荧幕弧形效果，俺们可以通过遮盖法实现，非常好用! 先通过长方形盒子构建荧幕长宽，再用一个椭圆形大饼的边缘显示在长方形盒子里，其他部分用overflow: hidden属性遮盖，再调整背景颜色和边框颜色即可实现荧幕效果

html如下：

wxss如下：

.visual_screen {

height: 30rpx;

width: 100%;

display: flex;

justify-content: center;

overflow: hidden;

margin-bottom: 10rpx;

}

.screen {

margin-top: 0;

padding: 0;

height: 30vw;

width: 100vw;

box-sizing: border-box;

border: 15rpx solid #c9cdd3;

border-radius: 50%;

}

2.2 电影厅介绍：

这部分相对来说较为简单，直接插入传输过来的数据，微调样式即可

wxml:

{{hallNumber}}号厅-（请佩戴口罩、1.3米以上儿童购票）

wxss：

.visual_title {

font-size: 23rpx;

width: 100%;

height: 20rpx;

text-align: center;

color: #6d6d6d;

margin-bottom: 30rpx;

}

2.3 座位区域：

基础结构：

1. 基础单位 ：由于设定座位的宽度为基本单位vw，便于统一单位和机型配适，所以我这里将高度也以vw为单位进行设计

2. 座位样式 : 我们通过之前传输过来的座位数组可知，我们的座位形式有五种，分别是：seatNormal（普通座位）、seatExcellent（优选座位）、seatNone（空白座位）、seatChosen（不可选座位）和selected（当前已选座位），这里座位的基础样式是一样的可以统一，再单独写各自独特的样式。其中空白座位只要设置边框颜色为透明就可以达到效果。

.seatNormal, .seatExcellent, .seatNone, .seatChosen {

height: 4vw;

width: 4vw;

margin: 1vw;

border-radius: 8rpx;

box-sizing: border-box;

}

.seatNormal {

border: 1rpx solid #63c0c0;

}

.seatChosen {

border: 1rpx solid red;

background-color: red;

}

.selected {

border: 1rpx solid #05ca90;

background-color: #05ca90;

}

.seatExcellent {

border: 1rpx solid #f18e14;

}

.seatNone {

border: 1rpx solid rgba(0, 0, 0, 0);

}

推荐 好用的样式：在wxss中我们用到了一个非常好用的样式 “box-sizing: border-box;”，这个样式为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度，便于控制元素大小。

总体布局 ：座位区域使用的是弹性布局display：flex，并使用flex-wrap: wrap，让座位填满后自动换行，大盒子包住一个盒子，让里面的盒子弹性居中，达到整体居中的效果。

.visual_seatings {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 43vw;

}

.visual_seating {

width: 90%;

height: 43vw;

display: flex;

flex-wrap: wrap;

}

1. 可移动可缩放区域: 由于方便座位选择，我们设定座位区域可移动，并可通过双指缩放的，所以我们需要用到微信小程序的一个API：movable-area[1]和 movable-view[2]。

movable-area: 这个区域必须设置width和height属性，不设置则默认为10px，同时，当movable-view小于movable-area时，movable-view的移动范围是在movable-area内， 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）。

movable-view： 标签属性设定移动方向全方位direction=“all”；支持双指缩放scale=“{{true}}”；最大最小缩放倍数scale-min="0.3"和scale-max=“1.5”;如果想绑定触发条件还可以添加绑定方法,拖动绑定事件:bindchange,缩放绑定事件bindscale等等

little tips: 由于movable-view区域在放大时, 所处的x, y坐标不变会导致view区域会超出area区域. 为了view可移动区域不遮挡上方元素, 所以可采取减少放大倍数上限并可在上方添加一些空白区域, 增加页面美观性.

详细用法参考微信小程序官网手册: developers.weixin.qq.com/miniprogram…[3]

3. 组件业务逻辑

==========

1. 座位数据输出 : 上回说到，座位数据是由数组存储的，里面不同的座位用不同的数字表现, 所以我们在输出数据时需要作判断. 这里通过block标签对数组数据循环输出, 然后判断数组数据, 输出不同的格式.

image.png

1. 选择座位 : 要做到在用户点击某个座位时, 那个座位样式改变并记录座位数据.

首先, 需要传输在循环时的下标数据wx:for=“{{seatings}}” wx:key=“Index” data-index=“index”, 每个座位的view中绑定selected事件, 在js文件selected方法中收到下标数据;

我们需要用到已选择座位的总数(限制为六个)和下标数组(储存已点击的座位)两个数据, 所以我们在data中声明selectedIndex: [ ], selectedNum: 0, methods方法中声明方法;

selected方法逻辑 : 先保存下标index, 判断下标数组中是否存在该元素(使用数组的indexOf()方法), 若存在,则表明之前已选择现在再次点击取消, 需删除将改下标从下标数组在删除,总已选择座位数减一 ; 否则不存在则判断已选择总数是否小于6,小于则将该数据插入数组中, 总已选择座位数加一, 不小于提示最多选择六张票;

这个时候，我们就有了下表数据啦，就可进行更多更复杂的业务操作啦！！

tip : 由于数组没有移除某个元素的方法 , 所以另外声明remove()方法, 先获取元素下标再删除.

image.png

selected(e) {

let index = e.currentTarget.dataset.index;

if(this.data.selectedIndex.indexOf(index) != -1){

let selectedIndex =  this.remove(this.data.selectedIndex, index);

let selectedNum = this.data.selectedNum - 1;

this.setData({

selectedIndex,

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
担。**

[外链图片转存中…(img-Vf5gFJdd-1715244179765)]

[外链图片转存中…(img-aEWx93fS-1715244179766)]

[外链图片转存中…(img-pytMb4Bm-1715244179766)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！