WXSS-WXML-WXS语法

目录：

1 WXSS编写程序样式

2 Mustache语法绑定

3 WXML的条件渲染

4 WXML的列表渲染

5 WXS语法基本使用

6 WXS语法案例练习

小程序的自适应单位rpx。在设计稿为iPhone6的时候1px=2rpx

wxml必须是闭合标签，或者单标签加/，否则会报错；并且大小写区分，不像html不区分大小写。

小程序的mustache语法不能调用函数或方法，其他方面和vue的差不多。

wx:if 、wx:elif、wx:else

hidden={{}}

wx:for={{对象类型数据}}  ，循环的时候会自动生成item和index；有时候需要2层循环或多层循环遍历，这时候每一层都用item的话会混起来，于是我们使用wx:for-item="自定义的item名字"来区分每一层的item名字。

wx:key一般可以绑定*this(这个的意思是把for循环的item进行对象类型转换为字符串类型；由于对象类型被绑定的时候显示的会是[object  object],会导致key不唯一)；还可以为item里的某个key的名称

示例代码：

wxml：

{{ message }}
{{ firstname + " " + lastname }}
{{ date }}


优秀
良好
及格
不及格






切换

呵呵呵呵






  
    
    {{item.name}}-{{item.price}}
  



  
    {{ item }}
  



  
    {{ item }}
  




  
    {{ book.name }}-{{ book.price }}-{{ i }}
  

js：

// pages/04_learn_wxml/index.js
Page({
  data: {
    message: "Hello World",
    firstname: "kobe",
    lastname: "bryant",
    date: new Date().toLocaleDateString(),
    score: 10,
    isHidden: false,

    books: [
      { id: 111, name: "代码大全", price: 98 },
      { id: 112, name: "你不知道JS", price: 87 },
      { id: 113, name: "JS高级设计", price: 76 },
    ]
  },

  onChangeTap() {
    this.setData({
      isHidden: !this.data.isHidden
    })
  }
})

在微信小程序中的mustache语法是只能绑定data里的数据的，但是不能在mustache语法里面调用函数或者方法，所以我们需要使用wxs才能实现调用函数或者方法的操作。

上图左边是wxml，右边是js

注意这个wxs的限制：

 在wxs标签内允许使用es5的语法，es5以上的语法都用不了。比如const 和箭头函数等。每个wxs都必须要有自己的模块名字以及导出wxs里面的函数才能在wxml中调用。

wxs文件，wxs文件里面导出和写法和标签内的一样，在某个wxml文件调用此wxs文件的时候，还是使用wxs标签来调用wxs文件。

在使用类似vue中的计算属性computed的时候，还是在wxs里面定义和导出即可。

wxs练习案例：

wxml：

  
    name:{{item.name}}-price:{{format.formatPrice(item.price)}}
  


总价格: {{format.calcPrice(books)}}

------------题目练习------------
播放量: {{format.formatCount(playCount)}}

  {{format.formatTime(currentTime)}}/{{format.formatTime(duration)}}

 wxss：

/* pages/05_learn_wxs/index.wxss */
.count {
  font-size: 40rpx;
  font-weight: 700;
  color: red;
}

.time {
  font-size: 40rpx;
  font-weight: 700;
  color: blue;
}

js：

// pages/05_learn_wxs/index.js
Page({
  data: {
    books: [
      { id: 111, name: "代码大全", price: 98, coverURL: "" },
      { id: 112, name: "你不知道JS", price: 87, coverURL: "" },
      { id: 113, name: "JS高级设计", price: 76, coverURL: "" },
    ],
    playCount: 2232,
    duration: 255,
    currentTime: 65
  },
  formatPrice(price) {
    return "¥" + price
  },
})

wxs文件的内容：

function formatPrice(price) {
  return "¥" + price
}

function calcPrice(books) {
  return "¥" + books.reduce(function(preValue, item) {
    return preValue + item.price
  }, 0)
}

// 对count进行格式化
function formatCount(count) {
  count = Number(count)
  if (count >= 100000000) {
    return (count / 100000000).toFixed(1) + "亿"
  } else if (count >= 10000) {
    return (count / 10000).toFixed(1) + "万"
  } else {
    return count
  }
}

// function padLeft(time) {
//   if ((time + "").length >= 2) return time
//   return "0" + time
// }

// 2 -> 02
// 24 -> 24
function padLeft(time) {
  time = time + ""
  return ("00" + time).slice(time.length)
}

// 对time进行格式化
// 100 -> 01:40
function formatTime(time) {
  // 1.获取时间
  var minute = Math.floor(time / 60)
  var second = Math.floor(time) % 60

  // 2.拼接字符串
  return padLeft(minute) + ":" + padLeft(second)
}

// 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
module.exports = {
  formatPrice: formatPrice,
  calcPrice: calcPrice,
  formatCount: formatCount,
  formatTime: formatTime
}