第三章 小程序的数据绑定-从视图中抽离出数据

3.1.数据的动态绑定

1.动态绑定的意义，传统的，写死的数据，不利于维护和更改。

在.js文件里面添加data

Page({
  data:{
    thisWeekMovie:{
      name: "教父",
      comment:"最精彩的剧本，最真实的黑帮电影",
      imagePath:"/images/jf.jpg"
    },
    count:123,
    score:61
  }
})

在.wxml文件里将写死的text和image路径改成动态的

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

这种调用格式感觉和java有点像

其中<text>组件中还可以使用判别表达式。

3.2小程序运行环境与基本架构

1.运行环境（宿主环境）

2.视图层和逻辑层

视图层又称为渲染层（Webview）

wxss与wxml是对渲染层的描述

about页和weekly页，都内置了一个webviewId的内部状态变量，来记录他们各自是在几号weview进程之中进行渲染的

 

3.3条件渲染

在.js中增加isHighlyRecommended:true并赋值为true

然后在.wxml中加一个text组件

<text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style="font-size:16px; color: red;">强烈推荐</text>

if条件成立的话就对页面进行渲染

 

hidden属性

<text hidden="{{！thisWeekMovie.isHighlyRecommended}}" style="font-size:16px; color: red;">强烈推荐</text>

由于hidden属性为true时表示隐藏，故要对thisWeekMovie.isHighlyRecommended进行求反

！！！当可见性需要频繁切换的时候，我们就不建议使用条件渲染

而hidden在初始化的时候开销较大

微信小程序