( )是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构。
1.1数据绑定
1.1.1普通写法
1.1.2组件属性
1.1.3类型
不要直接写=“”,其计算结果是一个字符串
1.2运算
1.2.1三元运算
1.2.2算数运算
1.2.3逻辑判断
1.2.4字符串运算
1.2.5注意
花括和引之间如果有空格,将最终被解析成为字符串
1.3列表渲染
1.3.1:
项的变量名默认为 :- 可以指定数组当前元素的变量名
下标变量名默认为 :- 可以指定数组当前下标的变量名
:用来提高数组渲染的性能
:绑定的值 有如下选择
1.类型,表示循环项中的唯一属性 如
2.保留字 ,它的意思是本身
代表的必须是唯一的字符串和数组
代码:
1.3.2
渲染一个包含多节点的结构块最终不会变成真正的元素
1.4条件渲染
1.4.1:
在框架中,使用:="{{}}"判断是否需要渲染该代码块:
1.4.2
类似 :
频繁切换用
不经常使用用:
小程序中绑定事件通过关键字来实现。如:、、等
不同的组件支持不同的事件,具体看组件的说明即可
2.1
2.2
2.3特别注意
1.绑定事件是不能带参数 不能带括 以下为错误写法
2.事件传值 通过标签自定义属性的方式和
3.事件触发时获取数据
( )是⼀套样式语⾔,⽤于描述的组件样式。
与 相⽐, 扩展的特性有:
响应式⻓度单位
样式导⼊
3.1尺寸单位
( ): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750 。如在6 上,屏幕宽度为 375 ,共有750个物理像素,则 750 = 375 = 750物理像 750 =375 = 750物理像素 , 1 = 0.5 = 1物理像素 ,1 = 0.5 = 1物理像素 。
设备换算(屏幕宽度/750)换算(750/屏幕宽度)51=0.421=2.3461=0.51=261=0.5521=1.81
建议: 微信⼩程序时设计师可以⽤ 6 作为视觉稿的标准。
使⽤步骤:
确定设计稿宽度
计算⽐例 750 = ,因此 1=750/ 。
在⽂件中,只要把设计稿中的 => 750/ 即可。
3.2样式导入
中直接就⽀持,样式导⼊功能。
也可以和 中的导⼊混⽤。
使⽤ @
语句可以导⼊外联样式表,只⽀持相对路径。
⽰例代码:
3.3. 选择器
特别需要注意的是 ⼩程序 不⽀持通配符 因此以下代码⽆效!
⽬前⽀持的选择器有:
选择器样例样例描述..选择所有拥有 = 的组件##选择拥有=""的组件选择所有组件,,选择所有文档的组件和所有的组件-():-()选择某个索引的标签::::在组件后边插入内容::::在组件前边插入内容
常见布局组件
,,-,,,,,,,。等
4.1
代替原来的标签
4.2
1.文本标签
2.只能嵌套
3.长按文字可以,(只有该标签有这个功能)
4.可以对空格 回车 进行编码
属性名类型默认值说明文本是否可选是否解码
4.2.1代码
4.3
1.图片标签,组件默认宽度为320,高度为240
2.支持懒加载
属性名类型默认值说明图片资源地址‘’图片裁剪、缩放的模式-图片懒加载
有效值:
有13种模式,其中4种是缩放模式,9种是裁剪模式
4.4微信内置轮播图组件
属性名类型默认值说明-是否显示面板指示点-(0,0,0,.3)指示点颜色--#0当前选中的指示点颜色是否自动切换5000自动切换时间是否循环轮播
4.5导航组件 类似超链接标签
属性名类型默认值说明在那个目标上发生跳转,默认当前小程序,可选值/当前小程序的跳转链接-跳转方式
-有效值
值说明保留当前页面,跳转到应用内的某个页面,但是不能跳到页面关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到页面跳转到页面,打开到应用内的某个页面关闭所有页面,打开到应用内的某个页面关闭当前页面,返回上一页面或者多级页面。可通过()获取当前的页面栈,决定需要返回几层退出小程序,='’时生效
4.6-富文本标签
可以将字符串解析成对应标签,类似种 -功能
代码:
4.6.1属性
属性支持字符串和标签节点数组
属性说明类型必填备注标签名是支持部分受信任的节点属性否支持部分受信任的属性,遵循命名法子节点列表否结构和一致
文本节点:=
属性说明类型必填备注文本是支持
注意:
不推荐使⽤ 类型,性能会有所下降。
- 组件内屏蔽所有节点的事件。
属性不⽀持 ,⽀持 。
属性⼤⼩写不敏感。
如果使⽤了不受信任的
节点,该节点及其所有⼦节点将会被移除。
标签仅⽀持⽹络图⽚。
4.7按钮组件
代码:
属性类型默认值必填说明否按钮的大小否按钮的样式类型否按钮是否镂空,背景色透明否是否禁用否名称前是否带图标-否用于’‘组件,点击分别会触发’'组件的/事件-否微信开放能力
的合法值
值说明默认尺寸小尺寸
的合法值
值说明绿色白色红色
-的合法值
值说明提交表单重置表单
-的合法值
值说明打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从回调中获得具体信息触发用户转发获取用户手机,可以在从回调中获取到用户信息获取用户信息,可以从回调中获取到用户信息打开,可以通过-设置设定向的参数打开授权设置页打开”意见反馈“页面,用户可以提交反馈内容并上传日志,者可以登录小程序管理后台进入左侧菜单“客服反馈”页面获取到反馈内容
4.8
属性类型默认值必填说明是的类型,有效值:,__,,,,,,,/23否的大小否的颜色,用的
代码:
4.9单选框
可以通过属性来修改颜色
需要搭配-一起使用
4.10复选框
可以通过属性嘞修改颜色
需要搭配-一起使用
4.11自定义组件
1.创建自定义组件
类似于页面,一个组件由 四个文件组成
在微信者工具中新建文件夹名为,右键新建文件夹,新建文件夹右键新建,会得到响应的四个文件
2.组件
首先需要在组件的文件中进行自定义组件
3.编辑组件
同时,还要在组件的文件中编辑组件模板,在文件中加入组件样式
表示插槽,类似于中的
在组件的文件中编写样式
注意:在组件中不应使用选择器、属性选择器和标签选择器。
4.注册组件
在组件的文件中,需要使用()来注册组件,并提供组件的属性含义、内部数据和自定义方法
5.引入自定义组件
首先要在页面的文件中进行引用。还要提供对应的组件名和组件路径
.
6.页面中使用自定义组件
7.4定义段与示例方法
构造器可用于定义组件,调用构造器可以指定组件的属性、数据、方法等
定义段类型是否必填描述
否组件的对外属性,是属性名到属性设置的映射表否组件的内部数据,和一同用于组件的模板渲染否组件数据字段监听器,用于监听和的变化否组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用否组件生命周期函数,在组件实例刚刚被创建时执行,注意此时不能调用否组件的生命周期函数,在组件实例进入页面节点树时执行否组件的生命周期函数,在组件布局完成后执行否组件生命周期函数,在组件实例被到节点树另一个位置时执行否组件生命周期函数,在组件实例被从页面节点树移除时执行
7.组件-自定义组件传参
1.父组件通过属性的方式给子组件传递参数
2.子组件通过事件的方式向父组件传递参数
7.1过程
1.父组件把数据{{}}传递到子组件的属性中
2.父组件监听事件
3.子组件触发中的事件
自定义组件触发事件时,需要使用方法,指定事件名、对象
4.父—>子动态传值 .(“#”);
父组件代码
子组件代码
分为应用生命周期和页面生命周期
5.1应用生命周期
属性类型默认值必填说明否监听小程序初始化否监听小程序启动或切后台否监听小程序切后台否错误监听函数否页面不存在监听函数
5.2页面生命周期
属性类型说明页面的初始数据生命周期回调-监听页面加载生命周期回调-监听页面显示生命周期回调-监听页面初次渲染完成生命周期回调-监听页面隐藏生命周期回调-监听页面卸载监听用户下拉动作页面上拉触底事件的处理函数用户点击右上角转发页面滚动触发事件的处理函数页面尺寸改变时触发当前时页时,点击时触发