微信小程序学习笔记-3.3.1 wxml 常用操作

2018/5/30

1.三目操作符 ？

结合 {{}} 可以非常方便的对 wxml 动态赋值操作

比如：

<image src="{{liked?'url1':'url2'}}"/>

在 class 中也可以类似书写

2. wx:if wx:else

可以写在两个同级的 block 中，可以起到选择展示的效果

3.wxs

这个全新的文件让 wxml 中的复杂逻辑判断成为可能

1）判断邮箱是否合法（来自简书，侵删）

wxs:

var validateEmail = function(email) { 
  var reg = getRegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$') 
  return reg.test(email) 
  } 

module.exports = {
  validateEmail: validateEmail
  }

wxml:

可以在顶部导入 module 从而使用

作为 util 导入

<wxs src="../../src/wxs/common.wxs" module="util" />

作为标签的一部分使用

<input class="input {{util.validateEmail(email)?'':'error'}}"