小程序-微信-第3讲 电影周周刊V2（完）

3.1 数据绑定

weekly.js
Page({
  data:{
    movie:{//添加json数据，实际开发展示的数据，应该是从后台动态获取的，这里写在这里，为了展示页面数据绑定的方式
      name:"琪琪教父",
      comment:"最精彩的剧本，最真实的黑帮电影",
      imagePath: "/images/jf.jpg"  
    },
    count: 123,
    score: 58
  }
})

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

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

webViewID？？这节没有代码编写，回头再说

小程序分为：逻辑层（js）、视图或渲染曾（wxml、wxss）

3.3 条件渲染

<view class="container">
  <text wx:if="{{movie.isShow}}" style="font-size:16px;color:red">强烈推荐</text>

  <text hidden="{{!movie.isShow}}" style="font-size:16px;color:red">hidden强烈推荐</text>
</view>

wx:if和hidden区别：

（1）wx.if一开始不加载这个text标签，只有当为true才加载到页面；hidden是一开始页面加载时text就存在，只是隐藏了

（2）所有如果页面频繁变动显示隐藏的话，建议用hidden，开销小；如果不频繁变动，则建议用wx.:if，因为一开始hidden把不显示的也加在了，开销大

3.4 列表渲染（wx:for）

weekly.wxml：注意默认列表变量名item，所以index

<view class="">
  <view class="movie" wx:for="{{movieList}}">
    <image class="movie-image" src='{{item.imagePath}}'></image>
    <view class="movie-details">
      <text>第{{index+1}}周：{{item.name}}</text>
      <text>点评：{{item.comment}}</text>
      <text wx:if="{{item.isShow}}" style="color:red">强烈推荐</text>
    </view>
  </view>
</view>

weekly.wcss：稍微调整下margin、字号好看点

.movie{
  display: flex;
  margin: 10px;
}

.movie-details{
  display: flex;
  flex-direction: column;
  width: 550rpx;
  margin: 6px;
}

.movie-details text{
  margin-bottom:3px;
  font-size: 14px;
}

.movie-image{
  width: 200rpx;
  height: 200rpx;
}

weekly.js：数据

Page({
  data:{
    movieList:[
      {
        name: "泰坦尼克号",
        comment: "失去的才是永恒的",
        imagePath: "/images/ttnk.jpg",
        isShow: true 
      }, {
        name: "这个杀手不太冷",
        comment: "小萝莉与怪蜀黍纯真烂漫的爱情故事",
        imagePath: "/images/zgss.jpg",
        isShow: true
      }, {
        name: "琪琪教父",
        comment: "最精彩的剧本，最真实的黑帮电影",
        imagePath: "/images/qqjf.jpg",
        isShow: true
      }, {
        name: "毛毛虫",
        comment: "毛毛虫历险记",
        imagePath: "/images/mmc.jpg",
        isShow: true
      }, {
        name: "喜剧之王",
        comment: "周星驰经典之作",
        imagePath: "/images/zxc.jpg",
        isShow: true
      }
    ]
  }
})

效果：

3.5 使用SWIPER组件（轮播图）

  <swiper indicator-dots='true' style='background:#eee;height:260px;' current='1'>
    <swiper-item wx:for="{{movieList}}">
      <image src='{{item.imagePath}}'></image>
    </swiper-item>
  </swiper>

indicator-dots='true'  显示下面的轮播图小点;  currrent='1'默认显示哪一页，0开头

轮播图可以用在项目启动页也可以

3.6 页面的生命周期函数

  <swiper indicator-dots='true' style='background:#eee;height:260px;' current='{{currentIndex}}'>
    <swiper-item wx:for="{{movieList}}">
      <image src='{{item.imagePath}}'></image>
    </swiper-item>
  </swiper>

将current='{{currentIndex}}'用变量表示，方便改变值

Page({
  data:{
    movieList:[//.....  
    ],
    currentIndex: 0
  },
  onLoad:function(options){
    this.setData({
      //js里面更改属性/变量值
      currentIndex: this.data.movieList.length - 1
    })
    //页面加载时顺序：调用1
  },
  onShow: function(){
    //调用2
  },
  onReady: function(){
    //调用3
  },
  onHide:function(){ },
  onUnload: function(){
    //页面关闭调用
  }
})

3.7 更新数据

就是说不能直接用 this.currenIndex = 0;这种写法更新数据，必须使用this.setData

this.setData({
      currentIndex: this.data.movieList.length - 1,
      "movieList[2].name": '哈哈哈哈'//注意这个，更改该列表第3行的name，用双引号引起来
})

视图层数据的变化，不会引起js数据变量改变--单项数据绑定

3.8 事件机制

  <view bindtap="h1" class="return-class">
     <button bindtap='f0'>返回本周</button>
     <button catchtap='f0'>catchtap</button>
  </view>
//区别
bindtap：冒泡事件，自己元素函数被触发，并且父元素由tap事件也被触发
catchtap:不会冒泡，只触发自己事件

改改样式

.return-class{
  position: absolute;
  top:10rpx;
  right: 10%;
}
.return-class button{
  font-size: 12px;
  border: 1px solid #f00;
  background: none;
  color: #fff;
  font-weight: bolder;
}

js

  f0: function(event){
    this.setData({
      currentIndex: 0
    })
  },
  h1: function(event){
    console.log("冒泡了");
  },

最后效果

转载于:https://my.oschina.net/u/3122826/blog/3047600