微信小程序不可以使用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 - 数据驱动界面的更多相关文章

  1. 微信小程序我的界面

    前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...

  2. 微信小程序之跨界面传参

    微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" ...

  3. 微信小程序开发--API界面交互

    一.wx:showActionSheet(上拉菜单) 属性 类型 默认值 必填 说明 itemList Array.<string>   是 按钮的文字数组,数组长度最大为 6 itemC ...

  4. 微信小程序如何刷新当前界面

    在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...

  5. 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感

    笔者注:本文来自于迅雷首席工程师刘智聪的个人分享,他毕业于南昌大学化学系,加入迅雷后设计开发了多款迅雷核心产品,凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖,同时 ...

  6. 微信小程序开发:http请求

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

  7. [转]微信小程序开发:http请求

    本文转自:http://www.cnblogs.com/dragondean/p/5921079.html 在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通 ...

  8. 微信小程序开发中的http请求总结

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

  9. 教你如何一键反编译获取任何微信小程序源代码(图形化界面,傻瓜式操作)

    一键获取微信小程序源代码 Tips: 一键获取微信小程序源码, 使用了C#加nodejs制作 直接解压在D盘根目录下后就可以使用 将小程序文件放到 wxapkg目录下3 这个目录下有一些demo 可以 ...

随机推荐

  1. 转:关于Android机型适配这件小事儿

    http://www.umindex.com/devices/android_resolutions 大家都知道Android机型分裂严重,在开发Android App的时候永远都面临适配N多机型的问 ...

  2. jquery操作select2控件

    (一)select2常用的操作:添加.移除.获取选中的value()与text() (1)移除事件:$("#select_id").unbind("change" ...

  3. Unity3d_ADBannerView

    原地址:http://blog.csdn.net/cynixway/article/details/7686393 ADBnnerView提供对Apple iAd框架中ADBannerView的包中, ...

  4. 网络编程-Java中的Internet查询

    前提 在深入理解URL.URI等概念,或者学些Socket相关的知识之,有必要系统理解一下Internet相关的一些基础知识. Internet地址 连接到Internet(因特网)的设备称为节点(n ...

  5. STL源码剖析(仿函数/bind2nd)

    仿函数(functors)其实就是重载了operator()的对象. 下面简单先看看它的一个例子: #include <iostream> using namespace std; tem ...

  6. Java 内存区域和GC机制(转载)

    目录 Java垃圾回收概况 Java内存区域 Java对象的访问方式 Java内存分配机制 Java GC机制 垃圾收集器 Java垃圾回收概况 Java GC(Garbage Collection, ...

  7. Linux-HUP信号的干扰问题

    在向大家详细介绍Linux HUP信号之前,首先让大家了解下Linux HUP信号,然后全面介绍Linux服务器X,希望对大家有用.想让进程在断开连接后依然保持运行?如果该进程已经开始运行了该如何补救 ...

  8. Linux-profile、bashrc、bash_profile之间的区别和联系

    为使Bash更好地为我们服务,我们需定制bash shell环境. ~/.bash_profile.~/.bashrc.和~/.bash_logout 上面这三个文件是bash shell的用户环境配 ...

  9. struts2中 jsp:forward 失败原因及解决办法

    问题:在Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效了,不但调转不过去还报404错误.不知 ...

  10. C# 反射只获取自己定义的属性,不获取父类的属性

    PropertyInfo[] p = user.GetType().GetProperties(BindingFlags.DeclaredOnly | BindingFlags.Public | Bi ...