正文

#yyds干货盘点#愚公系列2022年10月微信小程序-component组件的扩展(代码片段)

author  author  2022-12-05  786

关键词：

一、Component组件的扩展

// behavior.js
module.exports = Behavior(
  definitionFilter(defFields) 
    defFields.data.from = behavior
  ,
)

// component.js
Component(
  data: 
    from: component
  ,
  behaviors: [require(behavior.js)],
  ready() 
    console.log(this.data.from) // 此处会发现输出 behavior 而不是 component
  
)

通过例子可以发现，自定义组件的扩展其实就是提供了修改自定义组件定义段的能力，上述例子就是修改了自定义组件中的 data 定义段里的内容。

二、使用扩展

Behavior() 构造器提供了新的定义段 definitionFilter ，用于支持自定义组件扩展。 definitionFilter 是一个函数，在被调用时会注入两个参数，第一个参数是使用该 behavior 的 component/behavior 的定义对象，第二个参数是该 behavior 所使用的 behavior 的 definitionFilter 函数列表。

// behavior3.js
module.exports = Behavior(
    definitionFilter(defFields, definitionFilterArr) ,
)

// behavior2.js
module.exports = Behavior(
  behaviors: [require(behavior3.js)],
  definitionFilter(defFields, definitionFilterArr) 
    // definitionFilterArr[0](defFields)
  ,
)

// behavior1.js
module.exports = Behavior(
  behaviors: [require(behavior2.js)],
  definitionFilter(defFields, definitionFilterArr) ,
)

// component.js
Component(
  behaviors: [require(behavior1.js)],
)

三、案例解析

// behavior.js
module.exports = Behavior(
  lifetimes: 
    created() 
      this._originalSetData = this.setData // 原始 setData
      this.setData = this._setData // 封装后的 setData
    
  ,
  definitionFilter(defFields) 
    const computed = defFields.computed || 
    const computedKeys = Object.keys(computed)
    const computedCache = 

    // 计算 computed
    const calcComputed = (scope, insertToData) => 
      const needUpdate = 
      const data = defFields.data = defFields.data || 

      for (let key of computedKeys) 
        const value = computed[key].call(scope) // 计算新值
        if (computedCache[key] !== value) needUpdate[key] = computedCache[key] = value
        if (insertToData) data[key] = needUpdate[key] // 直接插入到 data 中，初始化时才需要的操作
      

      return needUpdate
    

    // 重写 setData 方法
    defFields.methods = defFields.methods || 
    defFields.methods._setData = function (data, callback) 
      const originalSetData = this._originalSetData // 原始 setData
      originalSetData.call(this, data, callback) // 做 data 的 setData
      const needUpdate = calcComputed(this) // 计算 computed
      originalSetData.call(this, needUpdate) // 做 computed 的 setData
    

    // 初始化 computed
    calcComputed(defFields, true) // 计算 computed
  
)

const beh = require(./behavior.js)
Component(
  behaviors: [beh],
  data: 
    a: 0,
  ,
  computed: 
    b() 
      return this.data.a + 100
    ,
  ,
  methods: 
    onTap() 
      this.setData(
        a: ++this.data.a,
      )
    
  
)

<view>data: a</view>
<view>computed: b</view>
<button bindtap="onTap">click</button>

实现原理很简单，对已有的 setData 进行二次封装，在每次 setData 的时候计算出 computed 里各字段的值，然后设到 data 中，以达到计算属性的效果。

#yyds干货盘点#愚公系列2022年10月微信小程序-页面生命周期(代码片段)

一、页面生命周期1.JS使用注册小程序中的一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。小程序页面的生命周期函数如下：属性类型说明dataObject页面的初始数据optionsObject页面的组... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-数据绑定(代码片段)

前言1.小程序页面结构微信小程序的页面结构主要是分别由四个文件组成：js(逻辑处理文件)：负责页面逻辑内容的处理，遵循js语言框架。json(配置文件)：用来设置页面的窗口内容，遵循JSON语法规范。wxml（页面结构文件或视图... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-循环的使用(代码片段)

一、列表渲染1.wx:for的item和index在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item<viewwx:for="array">index:i... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-场景值(代码片段)

前言场景值就是进入该小程序的来源，就是用户是通过什么途径点进的小程序。通过app中的onLaunch或onShow方法中可以获取到场景值。比如获取到的场景值是1005，表示用户是通过微信顶部的搜索框搜索到的该小程序。通过这个场景... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-应用生命周期和全局变量(代码片段)

前言从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。微信小程序的生命周期：应用生命周期页面生命周期一、应用生命周期1.JS配置App(//生命周期回调——监听小程序初始化onLaunch(options) co... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-全局配置属性之入口页面(代码片段)

前言一、entryPagePath1.入口文件的配置指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为pages列表的第一项。不支持带页面路径参数。"entryPagePath":"pa... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-sitemap站内搜索(代码片段)

前言1.sitemap.json介绍开发者可以通过sitemap.json配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。2.小程序爬虫特征当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-全局配置属性之其他属性(代码片段)

一、resizable在iPad上运行的小程序可以设置支持屏幕旋转，在PC上运行的小程序，用户可以按照任意比例拖动窗口大小，也可以在小程序菜单中最大化窗口。app.json配置如下； resizable：true二、usingComponents在app.json中声明的自定义组... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-引用(代码片段)

前言1.模板的引入方式WXML提供两种文件引用方式import和includeimport：导入模板并没有真正的使用include：直接引入页面元素，已经使用了2.模板和组件的比较template（模板）:是可以在wxml中引用的代码，就是在wxml中引用公用的wxml类... 查看详情

#yyds干货盘点#愚公系列2022年10月微信小程序-全局配置属性之worker(代码片段)

一、app.json配置属性之Worker我们知道js是单线程的，在有时候需要处理一些密集计算或者是高延迟的时候，总会出现不便。而且，现在的cpu都是多核的，单线程也无法充分发挥电脑的计算能力。正是基于这种情况，才有了worker的... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-导航(跳转)(代码片段)

前言1.navigatornavigator是页面跳转的标签，具体参数如下：属性类型默认值必填说明最低版本targetstringself否在哪个目标上发生跳转，默认当前小程序2.0.7urlstring否当前小程序内的跳转链接1.0.0open-typestringnavigate否跳转方式1.0.0deltanumbe... 查看详情

#yyds干货盘点#愚公系列2022年12月微信小程序-下拉刷新功能实现(代码片段)

前言下拉刷新是移动端的专有名词，是指通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。一、下拉刷新功能实现1.自定义下拉刷新<wxsmodule="refresh">varpullingMessage="下拉刷新"module.exports= onRefres... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-导航(功能页)(代码片段)

前言functional-page-navigator组件：是一个非常强大的组件，用于跳转插件的功能页，主要的参数如下：属性类型默认值必填说明最低版本versionstringrelease否跳转到的小程序版本，线上版本必须设置为release2.1.0namestring否要跳转到的功... 查看详情

#yyds干货盘点#愚公系列2022年11月微信小程序-地图的使用之点聚合(代码片段)

前言地图基础属性：属性类型默认值必填说明最低版本longitudenumber是中心经度1.0.0latitudenumber是中心纬度1.0.0scalenumber16否缩放级别，取值范围为3-201.0.0min-scalenumber3否最小缩放级别2.13.0max-scalenumber20否最大缩放级别2.13.0markersArray.<... 查看详情

#yyds干货盘点#愚公系列2022年12月微信小程序-webgl纹理材质的使用(代码片段)

前言在现实中webgl的用途很多，比如医院运维网站，地铁运维网站，海绵城市，可以以三维网页形式展示出现实状态。WebGL相关文档：http://doc.yonyoucloud.com/doc/wiki/project/webgl/webgL-fundamentals.html一、webgl的使用安装第三方包：npmi--savet... 查看详情

#yyds干货盘点#愚公系列2022年09月微信小程序-webgl画正方形(代码片段)

#yyds干货盘点#愚公系列2022年12月微信小程序-webgl立体图形的绘制(代码片段)

#yyds干货盘点#愚公系列2022年11月微信小程序-flex布局详解(代码片段)

一、Flex布局详解1.Flex布局的概念1.1传统布局盒子模型：我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。CSS盒模型本质上... 查看详情