微信小程序视图层学习随记

最新推荐文章于 2024-03-25 14:32:58 发布

Keen__

最新推荐文章于 2024-03-25 14:32:58 发布

阅读量240

点赞数

分类专栏：框架

本文链接：https://blog.youkuaiyun.com/qq937654393/article/details/99580931

版权

框架专栏收录该内容

2 篇文章

订阅专栏

WXML

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。其能力：

数据绑定{{msg}}
列表渲染 wx:for="{{objList}}" wx:for-item="obj" wx:for-index="idx"
条件渲染 wx:elif="{{view == 'WEBVIEW'}}"
模版模版外标签 <template name="staffName"> …省略内容</template>
引用模版 <template is="staffName" data="{{...staffA}}"></template>

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。其特性：

尺寸单位：使用rpx, 可以根据屏幕宽度进行自适应。规定无论什么像素大小的屏幕总宽均为750rpx。
样式导入：外联导入 @import "common.wxss";
注意：静态的样式统一写到 class 中。style 接收动态的样式。在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
全局样式与局部样式：app.wxss 中的样式为全局样式，page中的wxss为局部样式，局部会覆盖全局样式。

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注：WXS 与 JavaScript 是不同的语言，有自己的语法；WXS 函数不能作为组件的事件回调。对于WXS，我个人理解是可以用来放数据处理函数和页面临时数据，相当于Vue中的filters。使用实例如下：

<wxs module="m1">
var msg = "hello world";
var pingfang = a=>a*a
module.exports = {
	message: msg,
	pingfang
};
</wxs>

<view> {{m1.message}}{{m1.pingfang(pageData)}} </view> // pageData为page.js中的初始数据

事件

事件是视图层到逻辑层的通讯方式。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

使用WXS函数响应事件：WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：
```
<wxs module="wxs">…省略tapName函数定义和导出</wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}"> Click me! </view>
```
注：绑定的WXS函数必须用{{}}括起来，绑定js中的函数只需要写函数名
事件分类：冒泡事件和非冒泡事件。冒泡事件有：touchstart、touchmove、touchcancel、touchend、tap、longpress、longtap（使用同longpress,推荐用longtap）、transitionend、animationstart、animationiteration、animationend、touchforcechange
事件绑定和冒泡：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
事件捕获阶段：需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
事件对象的属性target为触发事件的源组件。currentTarget是事件绑定的当前组件。当冒泡时两者可能为不同组件。

获取界面上的节点信息

不是很理解

响应显示区域变化

在手机上启用屏幕旋转跟随。在app.json或页面的json中设置window.pageOrientation为auto， pageOrientation 还可以被设置为 landscape ，表示固定为横屏显示。特例：使小程序支持 iPad 屏幕旋转的方法是：在 app.json 中添加 "resizable": true，在 iPad 上不能单独配置某个页面是否支持屏幕旋转。
Media Query：有时，对于不同尺寸的显示区域，页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。
具体代码示例：

    .my-class {
      width: 40px;
    }
    
    @media (min-width: 480px) {
      /* 仅在 480px 或更宽的屏幕上生效的样式规则 */
      .my-class {
        width: 200px;
      }
    }

屏幕旋转事件：屏幕旋转一般会使页面显示区域尺寸发生改变。在 js 中读取页面的显示区域尺寸，可以使用 selectorQuery.selectViewport 。页面尺寸发生改变的事件，可以使用页面的 onResize 来监听。此外，还可以使用 wx.onWindowResize 来监听（但这不是推荐的方式）。

动画

界面常见动画方式：通常可以使用 CSS 渐变和 CSS 动画来创建简易的界面动画。同时，还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。动画过程中，可以使用 bindtransitionend、bindanimationstart、bindanimationiteration、bindanimationend 来监听动画事件。

高级动画方式：在一些复杂场景下，上述的动画方法可能并不适用。WXS 响应事件的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性。（具体不了解）