# wx_mini_p小知识
# 程序与页面
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径 写在 pages 字段的第一个页面就是这个小程序的首页
# 滚动到页面顶部
将页面滚动到目标位置，支持选择器和滚动距离两种方式定位 wx.pageScrollTo() (opens new window)
# 小程序自定义轮播小点的样式
// 页面 <swiper class="square-dot" indicator-dots indicator-active-color="#fff">...</swiper>
swiper.square-dot .wx-swiper-dot {
background-color: #000;
opacity: 0.4;
width: 10rpx;
height: 10rpx;
border-radius: 20rpx;
margin: 0 8rpx !important;
}
swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active{
opacity: 1;
width: 30rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 小程序获取当前页面并设置上一个页面内data的某些值
// 获取页面栈,数组第一个是首页,最后一个是当前页
var pages = getCurrentPages();
// 当前页面
var currPage = pages[pages.length - 1];
// 当前页面设置值
currPage.setData({
wait: true
})
// 前一个页面
var prevPage = pages[pages.length -2];
// 前一个页面设置值
prevPage.setData({
wait: true
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 扩展的样式
/* 组件添加向右的箭头的样式 */
.arrow {
position: relative;
}
.arrow:after {
position: absolute;
top: 50%;
right: 28rpx;
margin-top: -8rpx;
display: block;
content: " ";
height: 18rpx;
width: 18rpx;
border-width: 3rpx 3rpx 0 0;
border-color: #888888;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
}
/* 扩散元素自身的颜色的阴影写法 */
.shadow-blur {
position: relative;
}
.shadow-blur::before {
content: "";
display: block;
background: inherit;
filter: blur(10rpx);
position: absolute;
width: 100%;
height: 100%;
top: 10rpx;
left: 10rpx;
z-index: -1;
opacity: 0.4;
transform-origin: 0 0;
border-radius: inherit;
transform: scale(1, 1);
}
/* 两端翘起的阴影效果 */
.shadow-warp {
position: relative;
background-color: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.shadow-warp:before,
.shadow-warp:after {
position: absolute;
content: "";
top: 20rpx;
bottom: 30rpx;
left: 20rpx;
width: 50%;
box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
transform: rotate(-3deg);
z-index: -1;
}
.shadow-warp:after {
right: 20rpx;
left: auto;
transform: rotate(3deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# 去除button的默认边框
/* button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值 */
button::after {
border: none;
}
1
2
3
4
5
2
3
4
5
# 须知
- 页面需要在
app.json中进行注册，否则不能访问 app.json中pages数组的第一项代表小程序的初始页面，小程序中新增/减少页面，都需要对pages数组进行修改- 直接修改
this.data无法改变页面的状态，还会造成数据不一致 - 不要尝试修改页面栈，会导致路由以及页面状态错误
- 小程序页面最多同时打开 10 个，如果交互流程较长难以支持
tabBar上面的按钮iconPath不支持网络路径，icon大小限制为40kb，官方推荐尺寸是 81* 81setStorage本地缓存最大为10MB- 编译后的代码包大小需小于
2MB，否则代码包将上传失败 - 为什么脚本内不能使用window等对象：因为页面的脚本逻辑是在
JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件
豆瓣电影图片无法显示：
1、首先去掉获取的图片地址的 https://
2、在图片地址前面拼接上：https://images.weserv.nl/?url=
// 原来
"https://img3.doubanio.com/view/subject/l/public/s2955123.jpg"
// 修改后
"https://.weserv.nl/?url=img3.doubanio.com/view/subject/l/public/s2955123.jpg"
1
2
3
4
2
3
4
← 表单校验 小程序顶部菜单栏处理 →