做网站生成二维码,政务服务平台,上海外贸公司名录,陕西住房建设厅考试官方网站主要内容数据绑定、渲染、界面层数据渲染和事件处理。一、数据绑定1.1 渲染层和逻辑层小程序宿主环境我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力#xff0c;可以完成许多普通网页无法完成的功能。小程序开发框架的目标是通过尽可能简单、…主要内容数据绑定、渲染、界面层数据渲染和事件处理。一、数据绑定1.1 渲染层和逻辑层小程序宿主环境我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能。小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分逻辑层App Service和 视图层View逻辑层与渲染层分离首先我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层其中 WXML 模板和 WXSS 样式工作在渲染层JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理渲染层的界面使用了WebView 进行渲染逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面所以渲染层存在多个 WebView线程这两个线程的通信会经由微信客户端下文中也会采用Native来代指微信客户端做中转逻辑层发送网络请求也经由Native转发小程序的通信模型下图所示。1.2 逻辑文件介绍app.js pages.jsapp.js 小程序逻辑每个小程序都需要在 app.js 中调用 App 方法注册小程序实例绑定生命周期回调函数、错误监听和页面不存在监听函数等生命周期回调函数:小程序从创建到销毁的整个过程自动创建的一些函数包含内容全局变量 globalData:{}生命周期函数定义事件函数pages.js 页面逻辑对于小程序中的每个页面都需要在页面对应的 js 文件中进行注册指定页面的初始数据、生命周期回调、事件处理函数等data界面视图的数据内容2.自己的生命周期函数3.自定义事件的函数1.3 逻辑层javascript我们先看下小程序的javascript和普通页面的javascript区别小程序javascript的三个特点1.小程序不是运行在浏览器中没有BOM和DOMconsole.log(window) -undefinedconsole.log(document) -undefined2.小程序的js有一些额外的成员App()方法 用于定义应用程序实例对象Page()方法 用于定义页面对象getApp()方法 用于获取全局的应用程序对象wx 对象 提供核心API// xxx.jsconst appInstance getApp()console.log(appInstance.globalData) // I am global data3.小程序的js支持Commonjs规范module.exports{} 导出var datarequire(./data.js) 引入模块化可以将一些公共的代码抽离成为一个单独的 js 文件作为一个模块。模块通过 module.exports 对外暴露接口。在需要使用这些模块的文件中使用 require 将公共代码引入在 JavaScript 文件中声明的变量和函数只在该文件中有效 不同的文件中可以声明相同名字的变量和函数不会互相影响1.4 界面层数据绑定1.4.1 数据绑定WXML 中的动态数据均来自对应 Page 的 data。界面逻辑data简单绑定数据绑定使用 Mustache 语法双大括号将变量包起来可以作用于内容组件属性(需要在双引号之内){{}}语法用途表达式 获取变量 绑定class属性特殊地方1.4.2 列表渲染wx:for在组件上使用 wx:for 控制属性绑定一个数组即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index数组当前项的变量名默认为 item使用 wx:for-item 可以指定数组当前元素的变量名使用 wx:for-index 可以指定数组当前下标的变量名类似 block wx:if也可以将 wx:for 用在block/标签上以渲染一个包含多节点的结构块。例如1.4.3 条件渲染wx:if在框架中使用 wx:if 来判断是否需要渲染该代码块因为 wx:if 是一个控制属性需要将它添加到一个标签上。如果要一次性判断多个组件标签可以使用一个 block/ 标签将多个组件包装起来并在上边使用 wx:if 控制属性。注意 block/ 并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性。wx:if vs hidden因为 wx:if 之中的模板也可能包含数据绑定所以当 wx:if 的条件值切换时框架有一个局部渲染的过程因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的如果在初始渲染条件为 false框架什么也不做在条件第一次变成真的时候才开始局部渲染。相比之下hidden 就简单的多组件始终会被渲染只是简单的控制显示与隐藏。一般来说wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此如果需要频繁切换的情景下用 hidden 更好如果在运行时条件不大可能改变则 wx:if 较好。二、事件处理2.1 什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上当达到触发事件就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息如 id, dataset, touches事件的使用方式在组件中绑定一个事件处理函数。如bindtap当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。view idtapTest data-hiWeChat bindtaptapName Click me! /view在相应的Page定义中写上相应的事件处理函数参数是event。2.2 事件冒泡2.2.1 事件分类事件分为冒泡事件和非冒泡事件冒泡事件当一个组件上的事件被触发后该事件会向父节点传递。非冒泡事件当一个组件上的事件被触发后该事件不会向父节点传递。2.2.2 绑定并阻止事件冒泡除 bind 外也可以用 catch 来绑定事件。与 bind 不同 catch 会阻止事件向上冒泡。例如在下边这个例子中点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view而 middle view 阻止了 tap 事件冒泡不再向父节点传递)点击 middle view 会触发handleTap2点击 outer view 会触发handleTap1。2.3 事件传参dataset在组件节点中可以附加一些自定义数据。这样在事件中可以获取这些自定义的节点数据用于事件的逻辑处理。在 WXML 中这些自定义数据以 data- 开头多个单词由连字符 - 连接。这种写法中连字符写法会转换成驼峰写法而大写字符会自动转成小写字符。如data-element-type 最终会呈现为 event.currentTarget.dataset.elementType data-elementType 最终会呈现为 event.currentTarget.dataset.elementtype 。示例2.4单数数据流实现数据同步修改index.wxml模板使用WXML提供模板template可以在模板中定义代码片段然后在不同的地方调用。3.1 定义模板使用 name 属性作为模板的名字。然后在template/内定义代码片段如3.2 使用模板使用 is 属性声明需要的使用的模板然后将模板所需要的 data 传入如is 属性可以使用 Mustache 语法来动态决定具体需要渲染哪个模板三、网易云精选案例效果图
