微信小程序学习知识点 .pdfVIP

1.小程序的介绍

1)支持commonJS的用法

2)小程序中import与include的引用的使用

2.1)import引用

import可以在文件中使用目标文件定义的template，定义的文件不要在

app.json文件中出现页面的路径

在item.wxml文件中定义一个叫item的template

在index.wxml文件中import该模板:

结果如下：

结果中引入item.wxml中的非template的代码块不会引入，而且只会引入是

item的名称的代码块

2.2)include引用

include可以将目标文件除了template/之外的整个代码引入

结果如下：

2.小程序绑定数据的语法：(mustache语法)

1)在wxml(参照的是xml语法不是html)文件中

2)在相应的js文件中的Page中定义相应的data，并有属性，属性值

执行结果：

3.数据渲染

执行结果：

!--

基本的循环wx:for

1.明确页面结构体中的循环体

2.删除多余的重复内容，只保留一个

3.在剩余的加上wx:for属性，属性值等于要遍历的数据源，数据源是一个数组或对象

4.再这个标签(循环体)内部使用item代表当前被便利的元素

给被遍历的对象定义名称wx:for-item

给遍历的下标(索引)定义名称wx:for-index

--

!--wx:if是用来根据一个bool值来决定是否页面渲染,hidden是否显示隐藏--

!--viewwx:for={{[1,2,3,4,5,6,7,8,9]}}wx:for-item=i

viewwx:for={{[1,2,3,4,5,6,7,8,9]}}wx:for-item=j

viewwx:if={{i=j}}

{{i}}*{{j}}={{i*j}}

/view

/view

/view--

4.基本事件

!--基本的事件使用通过给组件添加一个bind+事件名的属性，属性的值指向一个定

义在当前页面对象中JS方法--

buttonbindtap=buttonTapHandler点击按钮/button

在相应的js文件中写上相应的响应的事件效果：

4.1事件冒泡

!--事件冒泡--

viewbindtap=outerHandlerstyle=width:200px;height:200px;

background-color:red

viewcatchtap=innerHandlerstyle=width:100px;height:100px;

background-color:blue/view

!--catch+事件名是绑定事件并阻止冒泡--

/view

点击蓝色view执行效果：

5.事件传参(data-)

buttonbindtap=buttonTapHandler2data-name=张三传参按钮/button

!--

1.事件的基本使用bind[xxx]catch[xxx]

2.小程序中事件冒泡和HTML中处理不一样这里使用catch[xxx]

3.如果需要给事件处理函数传递参数只能通过dataset方式

--

6.单项数据流以及事件方式绑定

view

inputclass=dataBindInputvalue={{dataBind}}

bindinput=bindDataHandler/input

text{{dataBind}}/text

/view

6.1抽象共同的事件处理函数

案例：使用input绑定的方式实现表单的提交

viewclass=container

viewclass=inputs

inputclass=usernameplaceholder=请输入账号value={{username}}

bindinput=inputChangeHandlerdata-prop=username/