位置: IT常识 - 正文
走进小程序【六】微信小程序架构之【视图层】万字详解(进入微信小程序)
编辑：rootadmin推荐整理分享走进小程序【六】微信小程序架构之【视图层】万字详解(进入微信小程序)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:微信小程序从入门到实践,进入微信小程序,微信小程序从入门到实践,小程序入口都有哪些?你知道几个?,微信小程序从入门到实践,微信小程序从入门到实践,小程序如何进入,进入小程序的入口有,内容如对您有帮助，希望把文章链接给更多的朋友！
🌟前言哈喽小伙伴们，上一期为大家讲解了一下小程序的架构之【逻辑层】篇。今天接着上篇，给大家结合官方文档讲解一下小程序的架构之【视图层】；今天的文章有点长，很多知识点也是官方文档给我们提供的；也是想告诉大家，总有一天我们进入职场后，会甩开我们的拐棍或者离开我们的靠山独自去面对困难； 所以养成阅读官方文档的好习惯对我们日后工作也有很大的好处。好了，让我们一起来看看吧🤘
🌟小程序架构小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
View 层用来渲染页面结构，AppService 层用来逻辑处理、数据请求、接口调用。
它们在两个线程里运行。
视图层和逻辑层通过系统层的 JSBridage 进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理
视图层使用 WebView 渲染，iOS中使用自带 WKWebView，在 Android 使用腾讯的 x5内核（基于 Blink）运行。逻辑层使用在 iOS 中使用自带的 JSCore 运行，在 Android中使用腾讯的 x5 内核（基于 Blink）运行。开发工具使用 nw.js 同时提供了视图层和逻辑层的运行环境。🌟视图层 View框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
🌟WXMLWXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
要完整了解 WXML 语法，请参考WXML 语法参考。
用以下一些简单的例子来看看 WXML 具有什么能力：
🌟数据绑定<!--wxml--><view> {{message}} </view>// page.jsPage({ data: { message: 'Hello MINA!' }})🌟列表渲染<!--wxml--><view wx:for="{{array}}"> {{item}} </view>// page.jsPage({ data: { array: [1, 2, 3, 4, 5] }})🌟条件渲染<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view wx:else="{{view == 'MINA'}}"> MINA </view>// page.jsPage({ data: { view: 'MINA' }})🌟模板<!--wxml--><template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view></template><template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template>// page.jsPage({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} }})🌟WXSSWXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：
尺寸单位样式导入🌟尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px =1物理像素；
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
🌟样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/.small-p { padding:5px;}/** app.wxss **/@import "common.wxss";.middle-p { padding:15px;}🌟内联样式框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。<view class="normal_view" />🌟选择器目前支持的选择器有：
选择器样例样例描述.class.intro选择所有拥有 class=“intro” 的组件#id#firstname选择拥有 id=“firstname” 的组件element选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容🌟全局样式与局部样式定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
🌟WXSWXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意事项
WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。
🌟页面渲染<!--wxml--><wxs module="m1">var msg = "hello world";module.exports.message = msg;</wxs><view> {{m1.message}} </view>页面输出：
hello world
数据处理：
// page.jsPage({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] }})<!--wxml--><!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 --><wxs module="m1">var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max;}module.exports.getMax = getMax;</wxs><!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array --><view> {{m1.getMax(array)}} </view>页面输出：
5
🌟事件🌟什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。🌟事件的使用方式在组件中绑定一个事件处理函数。 如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>在相应的Page定义中写上相应的事件处理函数，参数是event。Page({ tapName: function(event) { console.log(event) }})可以看到log出来的信息大致如下：{ "type":"tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi":"Weixin" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"Weixin" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }]}🌟使用WXS函数响应事件从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：
在组件中绑定和注册事件处理的WXS函数。<wxs module="wxs" src="./test.wxs"></wxs><view id="tapTest" data-hi="Weixin" bindtap="{{wxs.tapName}}"> Click me! </view>注：绑定的WXS函数必须用{{}}括起来
test.wxs文件实现tapName函数function tapName(event, ownerInstance) { console.log('tap Weixin', JSON.stringify(event))}module.exports = { tapName: tapName}ownerInstance包含了一些方法，可以设置组件的样式和class，具体包含的方法以及为什么要用WXS函数响应事件，请点击查看详情。
🌟事件详解🌟事件分类事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。WXML的冒泡事件列表：
类型触发条件最低版本touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发1.5.0longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发animationstart会在一个 WXSS animation 动画开始时触发animationiteration会在一个 WXSS animation 一次迭代结束时触发animationend会在一个 WXSS animation 动画完成时触发touchforcechange在支持 3D Touch 的 iPhone 设备，重按时会触发1.9.90注：除上表之外的其他组件自定义事件如无特殊
上一篇：若依框架前端Vue项目分析实战(若依框架前端发请求)
