wxml表现层

界面结构wxmL比较容易理解,主要是由八大类基础组件构成:

一、视图容器(View Container)

二、基础内容(Basic Content)

三、表单组件(Form)

四、操作反馈组件(Interaction)

五、导航(Navigation)

六、多媒体(Media)

七、地图(Map)

八、画布(Canvas)

常用的:view、text、navigator、template、block、swiper...

view相当于div元素;

text用于字体元素,如p、span等;

navigator官方文档定义为应用内跳转,即有时候我们需要通过循环遍历出来的块元素,当点击这个块元素会跳转到另一个页面时,我们就可以用navigator。例如我在产品的列表页,遍历出来的数据,当我点击其中一个数据,它会通过绑定的id跳转到产品详情页;

(navigator类似于a标签,但是它默认是块元素)

<navigaro url"../list/list?id={{id}}">    </navigator>

template用于分装公用组件,可以通过import导入和它的属性name引用组件;

(先通过import引用template模板,然后通过is属性绑定,最后将模板所需要的数据通过data传入)

block和template配合使用,例如我们可以在template的外层包含一个block块元素,并在block元素使用for循环方法遍历template组件;

<import src="../../template/productCard/productCard.wxml"/>

<block wx:for="{{productNewList}}"><template is="productCard" data="{{...item}}" /></block>

区别!区别!区别!重要的事情说三遍!!!

注:理论上,使用html标签是可以的,但它们都是inline属性,需要自行设置display;因此推荐使用微信小程序封装好的组件;

参考一

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,823评论 25 709
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 32,104评论 18 399
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,468评论 0 29
  • 他会跑掉
    哮汪天涯阅读 650评论 0 0
  • 一年四季它都拥有,春暖花开、大雪纷飞它已拥有。这就是我的家乡——田黄。 即使一年四季的美景它都拥有...
    80蒋丹阅读 3,226评论 0 0