首页 > 代码库 > 小程序入门(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)浅析篇