微信小程序开发笔记

弹性盒子布局

更好的应对页面内容的变化

.container{
background-color: #eee;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

2.响应式长度单位

让元素大小适配不同宽度屏幕

相对长度单位（rpx）：小程序规定所有屏幕的宽度均为750 rpx

.about_banner{
height: 375rpx;
width: 375rpx;
}

一般在小程序中，按照iPhone 6/7/8 的屏幕尺寸进行开发——其宽度为 375，方便换算(1:2)

3.navigator组件

1.open-type属性

<view>
<text>每周</text>
<navigator style="display:inline;" url="/pages/weekly/weekly" open-  type="navigate"
hover-class="nav-hover" class="nav-default">一游</navigator>
<text>，很快乐</text>
</view>

谁在后面谁胜出（级联）：把点击态放在后面

4.配置tabBar

对若干一级页面的入口连接

"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "images/icon/3.jpg",
"selectedIconPath": "images/icon/31.jpg"
},
{
"pagePath": "pages/weekly/weekly",
"text": "每周推荐",
"iconPath": "images/icon/1.jpg",
"selectedIconPath": "images/icon/11.jpg"
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "images/icon/2.jpg",
"selectedIconPath": "images/icon/21.jpg"
}
],
"color": "#000000",
"selectedColor": "#00f"
},

切记：把pages中的第一个页面，放在list中（的第一个）

5.数据绑定——从视图中抽离数据

在js文件中Page里的data上面加，然后在wxml中引用

Page({

/**
* 页面的初始数据
*/
data: {
thisWeekMovie:{
name:"教父",
comment:"以父之名",
imagePath:"/images/ws_Mighty_Dolomites_Europe_Italy_1920x1200.jpg"
},
count: 123,
score: 90
},
})

<view class="containerSecond">
<text>本周推荐</text>
<image src="{{thisWeekMovie.imagePath}}"></image>
<text>{{thisWeekMovie.name}}</text>
<text>{{thisWeekMovie.comment}}</text>
<text>{{count}}</text>
<text>{{(score >= 60) ? "及格":"不及格"}}</text>
</view>

6.条件渲染

条件成立时组件才渲染生成

wx:if <text wx:if="{{thisWeekMovie.highlyRecommended}}" style="font-size:32rpx; color:red;">强推</text>

hidden：条件取值与 wx:if相反——为真时隐藏/hidden <text hidden="{{!thisWeekMovie.highlyRecommended}}" style="font-size:32rpx; color:red;">强推</text>

对于可见性需要频繁更换的情况，不建议使用wx:if——开销大

7.列表渲染

重复的渲染生产组件