网站建设横幅,wordpress论坛怎么用,如何用oss做视频网站,小程序代理商费用08-微信小程序视图层 文章目录 视图层 ViewWXML数据绑定列表渲染条件渲染模板引用importimport 的作用域include WXSS尺寸单位样式导入内联样式选择器全局样式与局部样式 WXS注意事项页面渲染数据处理 视图层 View
框架的视图层由 WXML 与 WXSS 编写#xff0c;由组件来进行…08-微信小程序视图层 文章目录 视图层 ViewWXML数据绑定列表渲染条件渲染模板引用importimport 的作用域include WXSS尺寸单位样式导入内联样式选择器全局样式与局部样式 WXS注意事项页面渲染数据处理 视图层 View
框架的视图层由 WXML 与 WXSS 编写由组件来进行展示。
将逻辑层的数据反映成视图同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言结合 WXML可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML
WXMLWeiXin Markup Language是框架设计的一套标签语言结合基础组件、事件系统可以构建出页面的结构。
要完整了解 WXML 语法请参考WXML 语法参考。
用以下一些简单的例子来看看 WXML 具有什么能力
数据绑定
!--wxml--
view {{message}} /view
// page.js
Page({data: {message: Hello MINA!}
})列表渲染
!--wxml--
view wx:for{{array}} {{item}} /view
// page.js
Page({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.js
Page({data: {view: MINA}
})模板
!--wxml--
template namestaffNameviewFirstName: {{firstName}}, LastName: {{lastName}}/view
/templatetemplate isstaffName data{{...staffA}}/template
template isstaffName data{{...staffB}}/template
template isstaffName data{{...staffC}}/template
// page.js
Page({data: {staffA: {firstName: Hulk, lastName: Hu},staffB: {firstName: Shang, lastName: You},staffC: {firstName: Gideon, lastName: Lin}}
})效果图 具体的能力以及使用方式在以下章节查看
数据绑定、列表渲染、条件渲染、模板、引用
引用
WXML 提供两种文件引用方式import和include。
import
import可以在该文件中使用目标文件定义的template如
在 item.wxml 中定义了一个叫item的template
!-- item.wxml --
template nameitemtext{{text}}/text
/template在 index.wxml 中引用了 item.wxml就可以使用item模板
import srcitem.wxml/
template isitem data{{text: forbar}}/效果 import 的作用域
import 有作用域的概念即只会 import 目标文件中定义的 template而不会 import 目标文件 import 的 template。
如C import BB import A在C中可以使用B定义的template在B中可以使用A定义的template但是C不能使用A定义的template 。
!-- A.wxml --
template nameAtext A template /text
/template
!-- B.wxml --
import srca.wxml/
template nameBtext B template /text
/template
!-- C.wxml --
import srcb.wxml/
template isA/ !-- Error! Can not use tempalte when not import A. --
template isB/include
include 可以将目标文件除了 template/ wxs/ 外的整个代码引入相当于是拷贝到 include 位置如
!-- index.wxml --
include srcheader.wxml/
view body /view
include srcfooter.wxml/
!-- header.wxml --
view header /view
!-- footer.wxml --
view footer /viewWXSS
WXSS (WeiXin Style Sheets)是一套样式语言用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序WXSS 对CSS进行了扩充以及修改。
与CSS相比WXSS 扩展的特性有
尺寸单位样式导入
尺寸单位
rpxresponsive 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 中以免影响渲染速度。
view stylecolor:{{color}}; /class用于指定样式规则其属性值是样式规则中类选择器名(样式类名)的集合样式类名不需要带上.样式类名之间用空格分隔。
view classnormal_view /选择器
目前支持的选择器有
选择器样例样例描述.class.intro选择所有拥有 class“intro” 的组件#id#firstname选择拥有 id“firstname” 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式只作用在对应的页面并会覆盖 app.wxss中相同的选择器。
WXS
WXSWeiXin Script是小程序的一套脚本语言结合 WXML可以构建出页面的结构。
注意事项
WXS 不依赖于运行时的基础库版本可以在所有版本的小程序中运行。WXS 与 JavaScript 是不同的语言有自己的语法并不和 JavaScript 一致。WXS 的运行环境和其他 JavaScript 代码是隔离的WXS 中不能调用其他 JavaScript 文件中定义的函数也不能调用小程序提供的API。由于运行环境的差异在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例要完整了解 WXS 语法请参考WXS 语法参考。
页面渲染
!--wxml--
wxs modulem1
var msg hello world;module.exports.message msg;
/wxsview {{m1.message}} /view页面输出
hello world数据处理
// page.js
Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]}
})
!--wxml--
!-- 下面的 getMax 函数接受一个数组且返回数组中最大的元素的值 --
wxs modulem1
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
ined;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
