小程序入门(2)浅析篇

(Ctrl+s)保存编辑的内容,不然调试不会出效果!!!

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可...
    许剑锋阅读 11,962评论 3 51
  • 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了...
    Mr大大大阅读 47,435评论 9 68
  • 最近做了一个投票的微信小程序,开发过程主要还是参考官方文档:https://mp.weixin.qq.com/de...
    june5253阅读 22,151评论 1 11
  • 上一章我们已经介绍了微信小程序的目录的整体了解以及app系列文件的讲解,今天我们具体学习下Pages文件夹下的文件...
    Smile__EveryDay阅读 41,732评论 0 6
  • 【每日一思】如果我做的事和周围的人完全相反,会出现什么场景,最坏的结果是什么? 自己做到一半就做不下去了 最坏就是...
    柚子粒阅读 1,751评论 0 0

友情链接更多精彩内容