Mock 指令

wxa:mock

mock指令用于在开发阶段,自动为input元素填入随机值,提高开发阶段的自测效率。

使用

  1. <!-- 数据占位符模式 -->
  2. <input wxa:mock="@name()">
  3. <!-- 固定值模式 -->
  4. <input wxa:mock="abc">

npm run dev --mock

用例

  • 自动填入指定区间的随机身份证号

    1. <input wxa:mock="@idNo(1995, 2000)">
    2. <input wxa:mock="@constellation()">
    3. <input wxa:mock="@bankcardNo()">
    结果
    440304199706120237
    天秤座
    6227004877233
  • 自动填入Mock.js数据占位符定义规则生成的值

    1. <input wxa:mock="@cname()">
    2. <input wxa:mock="@city()">
    3. <input wxa:mock="@datetime('yyyy-MM-dd A HH:mm:ss')">
    结果
    周润发
    深圳市
    2020-03-09 AM 18:50:25
  • 自动填入固定值

    1. <input wxa:mock="生活就像海洋,只有意志坚强的人,才能到达彼岸">
    结果
    生活就像海洋,只有意志坚强的人,才能到达彼岸

注意

  • 当前wxa:mock生效的条件为:除 NODE_ENVprodproduction以外的cli编译环境

  • 自动填入的实现方式为自动调用 setData 函数,且会为不存在与data的数据绑定的input自动生成绑定

拓展

可在cli下的mock-extends.js文件内,对mock规则进行自定义拓展

例如拓展一个生成星座的规则:

  1. function constellation(rule) {
  2. let constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'];
  3. return this.pick(constellations);
  4. }

使用(自动填入随机星座)

  1. <input wxa:mock="@constellation()">

结果

狮子座