新手尝试编写微信小程序(2)——我的第一个微信小程序

前面,我们大体上了解了微信小程序的框架,已经简单的页面元素显示方法及变量和自定义函数的调用。这里我们继续来探索隐藏在微信默认新建的小程序中的秘密。这篇博文,我们来进一步了解一下第一个小程序中的几个典型的关键词以及函数的使用。

一、几个典型的关键词
1、setdata(根据键对应的值,键值对更新数据)
我们在第一个小程序中多次见到了这个关键字,那么这个关键字的作用是什么呢?其实从它的名字我们大概就已经知道它是设置或者更新数据的。意思是有数据需要设置(我们可以理解为赋值)或者要更新的时候就要用到它:
新手尝试编写微信小程序(2)——我的第一个微信小程序
实际上在第一篇博文中我们自定义的函数就用到了它,它的作用就是对变量进行赋值,一个或者多个都是通过它来完成,我们来重新看看自定义函数myfun的代码:
新手尝试编写微信小程序(2)——我的第一个微信小程序
这里的变量welcomeInfo和flag变量都是通过这个setData进行的赋值,而且我们发现这两个变量是不同的变量类型,一个是布尔类型一个是字符串类型。所以我们就比较清楚了,它的作用就是给变量赋值。
上面讲到的是它的数据设置功能,至于更新功能我们可以进入微信小程序的开发文档中阅读(框架->逻辑层->setdata)相关章节内容。
新手尝试编写微信小程序(2)——我的第一个微信小程序

2、bindtap(组件事件处理函数)
从名称看,我们很清楚,这个关键字是用来绑定用(bind)的,那么tap是什么意思呢?根据开发文档的描述,大概意思是指等同于“触摸,触发”的意思:
新手尝试编写微信小程序(2)——我的第一个微信小程序
所以,我们就大概就明白了,这里的bindtap一定是有将事件绑定到页面元素,包括view text button等页面元素的作用。

二、函数的调用
1、在load函数中调用自定义函数
在js文件的其他函数中调用非常简单,和其他语言(如C,c++,C#,Java中)没有差别。如下图:
新手尝试编写微信小程序(2)——我的第一个微信小程序
2、在页面wxml元素中调用(button中与text中)
不仅如此,他还可以将页面元素以对象的方式传递给绑定函数,这个时候函数必须有参数,传递是通过这个参数来实现的,也就是说,如果我们要得到绑定了事件的页面元素的特征属性,我们在声明事件时就必须为他声明一个参数(当然这个参数的名称可以随意),如上一篇博文中我们声明的自定义函数myfun就有一个参数为e:
新手尝试编写微信小程序(2)——我的第一个微信小程序
我们可以通过console来输出参数e究竟传递过来了些什么内容(我们在函数里面增加一行console.log(e)):
新手尝试编写微信小程序(2)——我的第一个微信小程序
然后,我们看到,参数e传递过来的是目标元素的属性id(如果我们为元素增加其他的属性也会一并传递过来)以及文字,如下图箭头所示:
新手尝试编写微信小程序(2)——我的第一个微信小程序
三、WX页面脚本(让按钮在执行完函数后隐藏)
我们在前一篇博文中讲到,要实现一个类似登录按钮一样点击后就消失的按钮,怎么做到的呢?这就要用到微信脚本,它们与js不同,可以直接用在元素中,每次调用微信脚本的时候用WX两个字母加冒号开始,后满紧跟if或者for关键词,关键词后面用等号加双大括号来书写一个表达式:
新手尝试编写微信小程序(2)——我的第一个微信小程序
上面的if="{{!flag}}"就等同于我们C语言的if(!flag),只不过它用了双大括号来包涵,目的估计是为了编译器识别。
上面代码的逻辑就是,如果flag为false,那就显示“点击”按钮,同时绑定myfun事件,点击则会执行myfun,事件在被执行后会将flag置为true,那么这个按钮就会消失,而显示welcomeInfo中的字符串信息,呈现下面的效果:
点击前
新手尝试编写微信小程序(2)——我的第一个微信小程序
点击后:
新手尝试编写微信小程序(2)——我的第一个微信小程序

完成这些工作表明,我们已经学会了开发文档中所说的,数据绑定,事件,以及微信脚本在页面中的调用方法。

在后面的探索中我们会进一步对第一个小程序进行剖析探索,包括小程序的框架结构设计方面的内容,我们还会了解与HTML对应的表单以及数据提交和请求方面的内容。
有兴趣的童鞋可以继续关注!