微信小程序

1. 弹性盒子布局

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

.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.列表渲染

重复的渲染生产组件

微信小程序

Comments | NOTHING

取消回复