微信小程序入门:详解wxml和wxss

上一章我们已经介绍了微信小程序的目录的整体了解以及app系列文件的讲解,今天我们具体学习下Pages文件夹下的文件与小程序的配置又什么不同:

首先介绍小程序的框架,MINA框架中有四种类型的文件,其中json文件仅仅是小程序的配置:


WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

WXML不同于网页开发xml的就是里面的组件,因为官网已经介绍的很清楚了,这里就不介绍了,提供链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/

用以下一些简单的例子来看看 WXML 具有什么能力: 官方链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/

1 数据绑定:

利用大括号{{ text }}这样的格式来进行信息的绑定,我们只需要在js文件的data属性中加上 text代表的数据。

例如:

在.wxml文件中: {{ name }}

在.js中配置:

data{

name:“Wechat”

}

注意关键字 true和false 必须是这样使用

特别注意:不要直接写checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。

2 列表渲染  :

利用wx:for 实现对数组进行循环展示时候使用, wx:for-item指定数组当前元素的变量名  wx:for-index制定数组当前元素的下标 0,1

或者是直接在for循环的标签内部:{{item}}  {{index}}同上面的功能一样的  例如:

在index.js文件中设置data数据 定义一个array数组:


我们在wxml文件中利用wx:for把数据实时渲染上去:


编译之后的结果:


上面我们可以看出{{ item }}和wx:for-item=“myitem”具有相同作用:都是代表array数组的item ,但是我们可以自定义item名称,自定义的名称一目了然。

wx:key当数据改变并且促发到了界面的渲染时候 在小程序进行数据渲染的时候会把去会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,已确保他们保存的状态

如果有switch checkbox等需要保存状态的组件时 需要带有key关键值 用来保存之前的状态  。

3 条件渲染:

wx:if="{{hidden}}"  判断里面hidden的值进行判断,一般情况下都是用来判断是否首先是某个组件,通过js中的逻辑代码,动态控制组件是显示还是隐藏

如果需要一次性判断多个条件  使用block标签

view1

view2

<\block>

4 模板:模板其实就是android中的base类 也就是通用 例如每个界面的头部相同的话,只需要引用template就可以了。

定义模板

使用name属性,作为模板的名字。然后在内定义代码片段,如:

{{index}}: {{msg}}

Time: {{time}}

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

Page({  data: {    item: {      index:0,      msg:'this is a template',      time:'2016-09-15'}  }})

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

odd

even

注意这个是在同一个mxml文件中的template 自我感觉没有什么意义,一般情况下这个都是用来设置header和footer,定义在pages文件夹之外。

在下面的引入中会有使用外界的template

5 事件: 重点

事件可以用来对视图层和逻辑层进行通信的方式

事件也可以将用户的行为传递到逻辑层做处理 也就我们所说的点击事件

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 id, dataset, touches。 页面跳转时候都会发送信息过去。

点击事件可以分为2类:

1:冒泡事件: 点击事件会向点击组件的父类进行传递

2:非冒泡事件:点击事件不会向点击组件的父类传递

WXML的冒泡事件列表:

类型触发条件

touchstart手指触摸动作开始

touchmove手指触摸后移动

touchcancel手指触摸动作被打断,如来电提醒,弹窗

touchend手指触摸动作结束

tap手指触摸后马上离开

longtap手指触摸后,超过350ms再离开

注:除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件,如submit事件,input事件,scroll事件,(详见各个组件)

在事件的绑定有2种绑定方式 1:bind 2:catch  但是bind事件不会阻止冒泡事件向上的传递。但是catch事件会阻止冒泡事件向上传递

outer view

middle view

inner view


我点击middle view时候出现:


我点击inner view


从上面可以说明 catch绑定事件,是不会向父级目录传递的,但是inner view使用bind绑定就向父级目录传递了。

事件对象:

如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

bind:function(e){

console.log(e)

}


dataset

在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。

在使用过程中很简单,只需要在wxml中的组件中加入 data-id=“”


这个时候在点击事件的currentTarget /dataset目录下就有了一个id的属性 可以直接使用 e.currentTarget.dataset.id获取id中的值,其实也就是传递数据的一种方式


6 引入

在小程序里面对于框架的引用有着import和include 其实都是对框架的引用

在import一般和template使用 引入框架 例如:

在下面我们设置了2个template模块,一个是header 一个是footer


接下来是我们的引用了:


在引入使用src属性定义路径 注意路径格式: ../../template/template.wxml

这里的第一个"  ../  "回到父级目录,这里是pages目录下, 第二个“../”这里是回到了pages目录 而我们的template和pages在用同一个目录下,

这样就可以直接进入template

利用" is "确定是使用那个template  data采用key-value的格式来设置数据 注意key必须和template中的一致 但是野可以直接在data属性中设置参数

上面的例子 header直接使用key-value进行赋值,在footer模板中使用data动态渲染赋值

注意template的作用域:

import只能使用引用的目录中的template  如果在A import B  C import A 即使C import A  在C中也是不能使用B中的template

也就是说import不具备传递性

另外一种引入是 include标签 include标签就是将head.wxml中的布局复制过来 使用方式:

WXSS(WeiXin Style Sheets):是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。

对于初学者而言 这可以说是最难的,但是熟悉之后确实最简单的,因为着都是固定,不想业务逻辑动态改变。

与 CSS 相比我们扩展的特性有:

尺寸单位

样式导入

尺寸单位:

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素

对于android开发的人而言其实很简单 也就是类似dp 设置的大小不会根据屏幕的大小改变而改变,根据屏幕的像素px来改变大小的,所以比例都是一样大小的。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容