小程序多个echars_小程序界面与逻辑

主要内容数据绑定、渲染、界面层数据渲染和事件处理。

一、数据绑定

1.1 渲染层和逻辑层

小程序宿主环境

我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View）

逻辑层与渲染层分离

首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

1.2 逻辑文件介绍app.js pages.js

app.js 小程序逻辑

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等

生命周期回调函数:小程序从创建到销毁的整个过程，自动创建的一些函数

包含内容：

全局变量 globalData:{}
生命周期函数
定义事件函数

pages.js 页面逻辑

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等

data界面视图的数据内容

2.自己的生命周期函数

3.自定义事件的函数

1.3 逻辑层javascript

我们先看下小程序的javascript和普通页面的javascript区别

小程序javascript的三个特点：

1.小程序不是运行在浏览器中，没有BOM和DOM

console.log(window) ->undefined

console.log(document) ->undefined

2.小程序的js有一些额外的成员

App()方法用于定义应用程序实例对象

Page()方法用于定义页面对象

getApp()方法用于获取全局的应用程序对象

wx 对象提供核心API

// xxx.jsconst appInstance = getApp()

console.log(appInstance.globalData) // I am global data

3.小程序的js支持Commonjs规范

module.exports={} 导出

var data=require(./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 id="tapTest" data-hi="WeChat" bindtap="tapName"> 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。