WX 微信小程序对于响应的数据绑定和模块化生命周期的实战心得

作者：黎燃

2022-11-19
内蒙古
本文字数：2374 字
阅读完需：约 8 分钟

微信小程序框架

applet 开发框架的目标是使开发者在微信中开发具有本地 APP 体验的服务尽可能简单高效。整个 applet 框架系统分为两个部分：逻辑层（App Service）和视图层（view）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层和逻辑层之间提供了一个数据传输和事件系统，以便开发人员能够专注于数据和逻辑。

<view> Hello {{name}}! </view><button bindtap="changeName"> Click me! </button>

复制代码

响应的数据绑定

该框架的核心是一个响应性数据绑定系统，它可以轻松地同步数据和视图。修改数据时，只需修改逻辑层中的数据，视图层将相应更新。看看这个简单的例子：在开发工具中预览效果

var helloData = {  name: 'Weixin'}
// Register a Page.Page({  data: helloData,  changeName: function(e) {    // sent data change to view    this.setData({      name: 'MINA'    })  }})

复制代码

开发人员通过框架将逻辑层数据中的名称绑定到视图层中的名称，因此打开页面时会显示 Hello Weixin！；点击按钮时，视图层会将 changeName 事件发送到逻辑层，逻辑层会查找并执行相应的事件处理功能；触发回调函数后，逻辑层执行 setData 操作，将数据中的名称从 Weixin 更改为 MINA。因为数据和视图层已经绑定，所以视图层将自动更改为 Hello MINA！。

在页面中使用行为

基本库在 2.9.2 中开始支持，较低版本需要兼容。该页面可以引用行为。行为可用于使多个页面具有相同的数据字段和方法。

// my-behavior.jsmodule.exports = Behavior({  data: {    sharedText: 'This is a piece of data shared between pages.'  },  methods: {    sharedMethod: function() {      this.data.sharedText === 'This is a piece of data shared between pages.'    }  }})

复制代码

使用组件构造函数构造页面基本库在 1.6.3 中开始支持，较低版本需要兼容。Page 构造函数适用于简单页面。但对于复杂的页面，Page 构造函数可能不容易使用。此时，您可以使用 Component 构造函数来构造页面。组件构造函数之间的主要区别是，方法需要放在方法中：{}。

var myBehavior = require('./my-behavior.js')Page({  behaviors: [myBehavior],  onLoad: function() {    this.data.sharedText === 'This is a piece of data shared between pages.'  }})

复制代码

生命周期

模块化

可以将一些通用代码作为模块解压缩到单独的 js 文件中。模块只能传递模块只有导出或导出才能在外部公开接口。小心：导出是模块 A 对导出的引用。因此，随意更改模块中的导出方向将导致未知错误。因此，建议开发人员使用模块导出来公开模块接口，除非您清楚地了解两者之间的关系。小程序目前不支持直接引入 nodes_模块，开发人员需要使用 node_对于模块，建议将相关代码复制到小程序的目录，或使用小程序支持的 npm 函数。

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

复制代码

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

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

复制代码

文件作用域

JavaScript 文件中声明的变量和函数仅在此文件中有效；具有相同名称的变量和函数可以在不同的文件中声明，而不会相互影响。全局应用实例可以通过全局函数 getApp 获得。如果需要全局数据，可以在 App（）中设置，例如：

App({  globalData: 1})

复制代码

var localValue = 'b'// If a.js it run before b.js, now the globalData shoule be 2.console.log(getApp().globalData)

复制代码

WXML 节点信息

节点信息查询 API 可用于获取接口上的节点属性、样式和位置等信息。

const query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect(function(res){  res.top // #the-id 节点的上边界坐标（相对于显示区域）})query.selectViewport().scrollOffset(function(res){  res.scrollTop // 显示区域的竖直滚动位置})query.exec()

复制代码

在上面的示例中，#theid 是一个节点选择器，它与 CSS 选择器类似，但略有不同。请参见 SelectorQuery select 的相关说明。建议自定义组件或包含自定义组件的页面 CreateSelectorQuery 替换 wx CreateSelectorQuery，这样可以确保在正确的范围内选择节点

WXML 节点布局相交状态

节点布局交点状态 API 可用于侦听布局位置中两个或多个组件节点的交点状态。这组 API 通常可用于推断用户是否可以看到某些节点以及用户可以看到的百分比。这组 API 中涉及的主要概念如下。引用节点：用于侦听的引用节点。其布局区域作为参考区域。如果有多个参考节点，则其布局区域的交点将被视为参考区域。页面显示区域也可以用作参考区域之一。目标节点：要侦听的目标。默认情况下，它只能是一个节点（使用 selectAll 选项时，可以同时侦听多个节点）。相交区域：目标节点的布局区域与参考区域之间的相交区域。交点比例：交点面积与参考面积的比例。阈值：如果交集比率达到阈值，则会触发侦听器的回调函数。可以有多个阈值。

Page({  onLoad: function(){    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {      res.id // 目标节点 id      res.dataset // 目标节点 dataset      res.intersectionRatio // 相交区域占目标节点的布局区域的比例      res.intersectionRect // 相交区域      res.intersectionRect.left // 相交区域的左边界坐标      res.intersectionRect.top // 相交区域的上边界坐标      res.intersectionRect.width // 相交区域的宽度      res.intersectionRect.height // 相交区域的高度    })  }})

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/ef1e9b42c2c84244904894ca6】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

WX 微信小程序对于响应的数据绑定和模块化生命周期的实战心得

微信小程序框架

响应的数据绑定

在页面中使用行为

生命周期

模块化

文件作用域

WXML 节点信息

WXML 节点布局相交状态

黎燃

评论