微信小程序（九）

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

　　每个小程序都是运行在它所在的微信客户端上的，通过微信客户端给它提供的运行环境，小程序可以直接获取微信客户端的原生体验和原生能力。

　　wxml视图文件和wxss样式文件都是对渲染层的描述

　　脚本文件js文件是对页面的逻辑层的描述

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

Page({
    data:{
        t:{i:false}
    }
})

<!-- 网页-->
<text wx:if="{{t.i}}" style="font-size:16rpx;color:red;">推荐</text>
<!-- i 如果是true 就显示"推荐"，反之...>

使用条件渲染与使用 hidden 属性有什么区别

　　使用 hidden 属性时，这个元素总是要先辈渲染生成的 hidden 属性只是控制了其可见性而已，对于可见性需要频繁切换的时候我们就不建议使用条件渲染

列表渲染

　　重复的渲染生成组件

　　wx:for 所绑定的数据数组，会循环遍历后显示。使用 item 生成对象的概念

<view class='movie' wx:for="{{WeeklyMovie}}">
    <image class='movie-image' src='{{item.imges}}'></image>
    <text>{{item.name}}</text>
    <text>点：{{item.comment}}</text>
    <text wx:if="{{item.i}}" style='font-size:16rpx;color:red;'>强烈推荐</text>
  </view>

-------------------------------------------------------------------------------

使用 swiper 组件

　　从列表展示变为幻灯片轮播展示

<swiper style='background:#eee;'>
    <swiper-item>123</swiper-item>
    <swiper-item>456</swiper-item>
    <swiper-item>789</swiper-item>
  </swiper>

<swiper style='background:#eee; height:260px;'>
    <swiper-item>
      <text>123</text>
      <image src='/imges/g.jpg'></image>
    </swiper-item>
    <swiper-item>
      <text>456</text>
      <image src='/imges/g.jpg'></image>
    </swiper-item>
    <swiper-item>
      <text>789</text>
      <image src='/imges/g.jpg'></image>
    </swiper-item>
  </swiper>

------------------------------------------------------------------------

页面生命周期函数

　　页面状态数据如何初始化，onLoad(options)　　第一被调用，完成页面初始化操作

　　onShow　　初始加载之后调用一次

　　onReady　　渲染完成后调用

　　onHide　　每一次被隐藏的时候被调用一次

　　onUnload　　当页面被下载后调用

onLoad:function (options){
    this.setData({
      currentIndex: this.data.WeeklyMovie.length -1
    })
  }

微信小程序（九）

猜你喜欢