微信小程序5 - 数据驱动界面

微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面

这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View来改变属性值

例: 图片的error,加载默认图片

网页中 <img src="http://www.url/...png" onerror="this.src='默认图片'" />

微信小程序

<image src="{{imgurl}}"

binderror="showDefaultImage"

data-data_path="dest_country_group.item_list[{{index}}].img"

>

showDefaultImage 在BasePageOption中定义

data-data_path 定义当前图片在数据结构中的路径

BasePageOptionClass.prototype.showDefaultImage = function (e) {
    var self = this; 
    var defaultImage = getApp().getProp("defaultImage");
  var key = e.currentTarget.dataset.data_path;
  var data ={};
  data[key] = defaultImage
  self.setData(data);
}

最终的效果类似

self.setData({
"dest_country_group.item_list[2].img" : "默认图片地址"
});

注意这种写法在JS中,并不能达到效果,而是setData方法进行了处理,做了key解析

有兴趣可以看下

// // 解析 key 为 data 内对象的路径字符串 微信解析key的代码,  所有 Object类型只能用 . 
//数组类型才可以用 [], 否则报 only number 0-9 could inside []
function parsePath(e) {
  for (var t = e.length, n = [], i = "", r = 0, o = !1, a = !1, s = 0; s < t; s++) {
    var c = e[s];
    if ("\\" === c) s + 1 < t && ("." === e[s + 1] || "[" === e[s + 1] || "]" === e[s + 1]) ? (i += e[s + 1], s++) : i += "\\";
    else if ("." === c) i && (n.push(i), i = "");
    else if ("[" === c) {
      if (i && (n.push(i), i = ""), 0 === n.length) throw new Error("path can not start with []: " + e);
      a = !0, o = !1
    } else if ("]" === c) {
      if (!o) throw new Error("must have number in []: " + e);
      a = !1, n.push(r), r = 0
    } else if (a) {
      if (c < "0" || c > "9") throw new Error("only number 0-9 could inside []: " + e);
      o = !0, r = 10 * r + c.charCodeAt(0) - 48
    } else i += c
  }
  if (i && n.push(i), 0 === n.length) throw new Error("path can not be empty");
  return n
}