这一节开始我们来编写小程序的代码,在实现布局和样式之前,我们先给页面添加页面结构和内容。我们看一下效果图,在这个页面上我们希望呈现的是一张图片和三段文本,那么类似于html中是通过对应的标记元素来表达这样的图片和文本,在wc mail中也是通过框架提供的一些基础的组件,来表达对应的这样的一些内容元素。
那么什么叫基础组建?那么在这里面我们前面 hello world,我们就是通过包装在一个text组件来表示,那么这个text组件和我们小程序html中的一个 span标记元素是非常类似的。它的形式也是可以分为元素的开始标记,元素内容以及元素的结束标记,那么在开始标记中间,我们也可以包含一些元素对应的属性。
那么在小程序wxml中有一些属性是任何一个组件都可以设置的,比如说这里的 class属性,ID属性,还有这里的我们之前用到的style属性,以及我们可以在wxml中通过单个tab这样的方式来给组件元素特定我们也可以通过设置批准属性来控制这个元素是否隐藏,那么在这里把它设为处,那么这个元素就隐藏起来了。我们还可以设置一些组件,自定义的数据通过对杠这种形式的属性来进行设置,很重要。那么通过对这种方式定义的自定义数据,将会在事件触发的时候封装在事件对象中传递给对应的事件处理函数进行处理。
好,这是我们提到的关于wx M组建的一个基本构成,以及它的一些常见的可以设置的属性。那么在后面的讲解中,我们会将组建和元素这两个词等同。我们来看一下,另外效果图,那么上面会有三个对应的文本需要显示,那么在这里面在内容结构上,我们就需要使用三个对应的text组件元素来表示这三大文本。
好,我们直接设置一下,那么除了 text元素来表示这样的文本之外,我们还要展示一张图片,那么同样的类似于html中通过页面元素来表示图片,在这里我们也是通过一米级元素来表示这样的一张图片。那么在这里我们要注意所有的wx面组件元素,他们都是既有开始标记又有结束标记,它没有一个单标记元素的这么一个概念。那么在这里面我们是通过src属性来指定图片的地址。