微信小程序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

}

巴特西

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

最新文章

热门文章