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

CodeJourney
447 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

微信小程序框架

在这里插入图片描述

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.js
module.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 = sayHello
exports.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 // 相交区域的高度
    })
  }
})
avatar
文章
阅读
粉丝