小程序语法详解

Rsquo
661 阅读4分钟

一、WXML的语法

developers.weixin.qq.com/miniprogram…

1.1 WXML的Mustache语法

  • WXML基本格式：

    • 类似于HTML代码：比如可以写成单标签，也可以写成双标签

    • 必须有严格的闭合：没有闭合会导致编译错误

    • 大小写敏感：class和Class是不同的属性

  • 小程序和Vue一样, 提供了插值语法: Mustache语法(双大括号)

1.2 WXML的wx:if/elif/else

  • 根据条件来决定一些内容是否渲染：

    • 当条件为true时, view组件会渲染出来
    • 当条件为false时, view组件不会渲染出来
    <view wx:if="{{score > 90}}">优秀</view>
<view wx:elif="{{score > 80}}">良好</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>

  • hidden属性:

    • hidden是所有的组件都默认拥有的属性
    • 当hidden属性为true时, 组件会被隐藏
    • 当hidden属性为false时, 组件会显示出来
    <button bindtap="onChangeTap">切换</button>
<view hidden="{{isHidden}}">哈哈哈哈</view>
<view wx:if="{{!isHidden}}">呵呵呵呵</view>

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

1.3 hidden属性以及区别

  • hidden和wx:if的区别

    • hidden控制隐藏和显示是控制是否添加hidden属性
      • 设置属性 display: none;
    • wx:if是控制组件是否渲染的

1.4 wx:for列表循环

  • wx:for来遍历一个数组 （字符串 - 数字）

    • 默认情况下，遍历后在wxml中可以使用一个变量index，保存的是当前遍历数据的下标值
    • 数组中对应某项的数据，使用变量名item获取

  • 基本使用

    <!-- 遍历data中的数组 -->
<view class="books">
  <view wx:for="{{books}}" wx:key="id">
    <!-- item: 每项内容, index: 每项索引 -->
    {{item.name}}-{{item.price}}
  </view>
</view>
<!-- 遍历数字 -->
<view class="number">
  <view wx:for="{{10}}" wx:key="*this">
    {{ item }}
  </view>
</view>
<!-- 遍历字符串 -->
<view class="str">
  <view wx:for="hello miniprogram" wx:key="*this">
    {{ item }}
  </view>
</view>

  • block

    • <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

    • 使用block有两个好处：

      1. 将需要进行遍历或者判断的内容进行包裹

      2. 将遍历和判断的属性放在block便签中，不影响普通属性的阅读，提高代码的可读性

  • 指定 item/index 的名称

    <!-- block-item/index名称-key的使用 -->
<view class="books">
  <block wx:for="{{books}}" wx:key="id" wx:for-item="book" wx:for-index="i">
    <view>{{ book.name }}-{{ book.price }}-{{ i }}</view>
  </block>
</view>

  • key的作用和用法

    • 作用

      • 这个其实和小程序内部也使用了虚拟DOM有关系（和Vue、React很相似）。

      • 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入、删除一个新的节点，可以更好的复用节点

    • 用法：

      • 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

      • 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

二、wxss编写样式

developers.weixin.qq.com/miniprogram…

2.1 编写方式

  • 全局样式
    • app.wxss 对所有页面生效
  • 页面样式
    • index.wxss 对当前文件夹下页面生效
  • 行内样式
  • 注意（优先级）：行内样式 > 页面样式 > 全局样式

2.2 rpx的单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx

  • 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

    image.png

三、WXS语法

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构 developers.weixin.qq.com/miniprogram…

  • 为什么要设计WXS语言呢？

    • 在WXML中是不能直接调用Page/Component中定义的函数的.

    • 希望使用函数来处理WXML中的数据(类似于Vue中的过滤器)，这个时候就使用WXS

3.1 基本使用

  • WXS使用的限制和特点：

    • WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行

    • WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API

    • 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备 上二者运行效率无差异

  • 注意：不支持js ES6语法

  • wxs的语法

    • 写在<wxs>标签中
    <wxs module="format">
  function formatPrice(price) {
    return "¥" + price
  }

  // 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
  module.exports = {
    formatPrice: formatPrice
  }
</wxs>
<view class="books">
  <block wx:for="{{books}}" wx:key="id">
    <view>name:{{item.name}}-price:{{format.formatPrice(item.price)}}</view>
  </block>
</view>
    • 写在以.wxs结尾的文件中
    <wxs module="format" src="/utils/format.wxs"></wxs>

  • 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块

    • 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见
    • 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现

3.2 案例练习

  • 书籍价格加符号

  • 书籍的总价格

    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
}
avatar
文章
阅读
粉丝