小程序入门浅析篇

Posted 2020-08-13

有了小程序入门（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）豆瓣电影，看文档，复制文档代码基础布局也可以轻松搭建。