首页 > 代码库 > 小程序入门(2)浅析篇
小程序入门(2)浅析篇
有了小程序入门(0)项目创建篇 || 小程序入门(1)项目结构篇。的基础。
一个页面是由 js 与 wxml和wxss配合形成的,而需要将页面显示出来需要在app.json中配置。
现在我们先来看一下决定页面布局的 wxml 的一些简单使用。
最简单的演示: 一个按钮就出现在了调试界面,(需要先保存 ctrl + s ,在去调试页面点击重启。)
按照这个思路我们有很多控件需要进行深入。
现在来看一下wxml与wxss的配合。
先看效果图:
在来看怎么实现,
wxml ,class为关联wxss样式的标识名。
看不懂没关系,联系下面的 wxss ,calss中的名字就是你所定义的样式名。
wxss
wxss中的内容就不说了自己研究也很好懂。
先来说一下 calss和id两个关键字。
calss:关联wxss中定义的样式。
id:定义一个标识,在后面的js中为起绑定事件。
catchtap关键字和onTapTag有一点陌生,事件绑定
事件绑定的写法同组件的属性,以 key、value 的形式。
key 以bind或catch开头,然后跟上事件的类型,如bindtap,catchtouchstart
value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
可以看到catchtap,就是catch的,而onTapTag呢则是在js中定义的方法(函数),处理事件。
这样我们就理解事件的绑定以及它的 key,value的使用场景。
现在来看一下js中的事件绑定
学习前面这些只是为了后面的内容更好理解。
下一章我们直接做一个豆瓣电影,进行更透彻的解析。
东西我已经做出来,现在只等着理清楚要怎么讲的问题。
下一篇 小程序进阶(1)豆瓣电影,看文档,复制文档代码基础布局也可以轻松搭建。
小程序入门(2)浅析篇