web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训

大家好，我来了！本期为大家带来的Web前端学习知识是”Web前端：小程序界面与逻辑项目实训“，喜欢Web前端的小伙伴，一起看看吧！

主要内容

数据绑定
渲染
界面层数据渲染
事件处理

学习目标

一、数据绑定

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 对外暴露接口。

// common.js
function sayHello(name) {console.log(`Hello ${name} !`)}
function sayGoodbye(name) {console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello

在需要使用这些模块的文件中，使用 require 将公共代码引入

var common = require('common.js')
Page({helloMINA: function() {common.sayHello('MINA')},goodbyeMINA: function() {common.sayGoodbye('MINA')}
})

在 JavaScript 文件中声明的变量和函数只在该文件中有效不同的文件中可以声明相同名字的变量和函数，不会互相影响

1.4 界面层数据绑定

1.4.1 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<view> {{ message }} </view>
Page({data: {message: 'Hello MINA!'}})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
Page({data: {id: 0}})

{{}}语法用途

表达式获取变量绑定class属性

特殊地方：

1.4.2 列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">{{index}}: {{item.message}}
</view>
Page({data: {array: [{message: 'foo',}, {message: 'bar'}]}})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>

block wx:for

类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view>
</block>

1.4.3 条件渲染

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>

注意： <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。

Page({tapName: function(event) {console.log(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。

<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view></view>

2.3 事件传参

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">DataSet Test
</view>
Page({bindViewTap:function(event){event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写}}

2.4单数数据流

实现数据同步修改

index.wxml

this.setData({data属性：属性值
})

三、模板使用

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

3.1 定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>

3.2 使用模板

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

<template is="msgItem" data="{{...item}}"/>
Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}})

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

<template name="odd"><view> odd </view></template><template name="even"><view> even </view></template>
<block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

四、网易云精选案例

效果图：

本期为大家带来的Web前端学习知识”Web前端：小程序界面与逻辑项目实训“介绍完毕了，想了解更多内容的小伙伴，关注我，更多内容等你看，我们下期再见！