5.视图层功能

wxml

四个东西：

  • 数据绑定

  • 列表渲染

  • 条件渲染

  • 模板

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="usermotto">
      <view class="user-motto" >{{motto}}</view>
      <view>{{a1}}</view>
      <view wx:for="{{list}}">{{item}}</view>
      <view wx:if="{{b1}}">这是真的</view>
      <view wx:if="{{b2}}">这是假的</view>
    </view>

    <template name="staffName">
      <view>
        姓：{{firstName}},名：{{lastName}}
      </view>
    </template>

    <template is="staffName" data="{{...staffA}}"></template>
    <template is="staffName" data="{{...staffB}}"></template>
    <template is="staffName" data="{{...staffC}}"></template>
    <template is="staffName" data="{{...staffD}}"></template>
  </view>
</scroll-view>

// index.js
Page({
  data: {
    motto: 'Hellosss World',
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
    a1:'a1',
    list:[1,2,3,4,5],
    b1:true,
    b2:false,
    staffA:{firstName:"王",lastName:"jr"},
    staffB:{firstName:"王",lastName:"nl"},
    staffC:{firstName:"王",lastName:"bl"},
    staffD:{firstName:"王",lastName:"xw"},
  },
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  testApi(param){
    console.log(param);
    console.log("env:", wx.env);

    // const fs = wx.getFileSystemManager()
    // fs.readdir({
    //   dirPath: `${wx.env.USER_DATA_PATH}/miniprogramLog`,
    //   success(res) {
    //     console.log(res.files)
    //   },
    //   fail(res) {
    //     console.error(res)
    //   }
    // });


  },
})

WXSS（与css基本一致，直接上官方文档）

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位
  • 样式导入

尺寸单位

  • rpx（responsive
    pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6
    上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />

选择器

目前支持的选择器有：

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

WXS（不知道有啥用，也上官方文档=，=）

WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。

从语法上看， WXS 类似于有少量限制的 JavaScript 。要完整了解 WXS 语法，请参考WXS 语法参考。

以下是一些使用 WXS 的简单示例。

页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

页面输出：

hello world

数据处理

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出：

5

Q.E.D.