文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序怎么实现数据共享与方法共享

2023-06-26 04:58

关注

微信小程序怎么实现数据共享与方法共享,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

全局数据共享 Mobox

原生小程序开发中我们可以通过 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。二者为外部依赖,我们需要npm或yarn去安装构建相关依赖,才能正常使用.

npm安装及其注意事项

小程序对 npm 的支持与限制

在小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。

npm 依赖包的安装与使用

初始化小程序生成package.json

npm init -y

安装 npm 包

在小程序 package.json 所在的目录中执行命令安装 npm 包:

npm install pageName

此处要求参与构建 npm 的 package.json 需要在 project.config.js 定义的 miniprogramRoot 之内。

构建 npm

点击开发者工具中的菜单栏:工具 --> 构建 npm

微信小程序怎么实现数据共享与方法共享

勾选“使用 npm 模块”选项:

微信小程序怎么实现数据共享与方法共享

构建完成后即可使用 npm 包。

js 中引入 npm 包:

const myPackage = require('packageName')const packageOther = require('packageName/other')

使用 npm 包中的自定义组件:

{"usingComponents": {    "myPackage": "packageName",    "package-other": "packageName/other"}}

Mobox

全局数据共享

小程序中的全局数据共享方案

使用mobx

安装 MobX 相关的包

在项目中运行如下的命令,安装 MobX 相关的包:

npm i -S mobx-miniprogram mobx-miniprogram-bindings

注意:MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后,重新构建 npm。

创建 MobX 的 Store 实例

```import {observable ,action} from 'mobx-miniprogram'export const store=observable({        <!-- 1、数据部分 -->        num1:1,        num2:2,        <!-- 2、计算属性 -->        get sum(){            return this.num1+this.num2        },        <!-- 3、actions方法,用来修改store中的数据 -->        updateNum1:action(function(step){            this.num1+=tep        })    })```

将 Store 中的成员绑定到页面中

import { createStoreBindings } from 'mobx-miniprogram-bindings'import { store } from '../../store/store'Page({    data: {    },    onLoad: function (options) {        this.storeBindings = createStoreBindings(this, {        store,        fields: ['num1', 'num2', 'sum'],        actions: ['updateNum1']        })    },    btnHandler1(e) {            this.updateNum1(e.target.dataset.step)    },    onUnload: function () {        this.storeBindings.detroyStoreBindings()    }})

将 Store 中的成员绑定到组件中

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'import { store } from '../../store/store'Component({    behaviors: [storeBindingsBehavior],    storeBindings: {        // 数据源        store,        fields: {            numA: 'num1',            numB: 'num2',            sum: 'sum'        },        actions: {        updateNum2: 'updateNum2'        }    },})

组件方法共享 behaviors

1. 什么是 behaviors

behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。

2. behaviors 的工作方式

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被

合并到组件中。

每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。

3. 创建 behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用:

module.exports = Behavior({    // 属性节点    properties: {},    // 私有数据节点    data: {},    // 事件处理函数和自定义方法节点    methods: {}})

4. 导入并使用 behavior

在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据或方法,示例代码

// components/test5/test5.jsconst myBehavior = require('../../behaviors/my-behavior')Component({  behaviors: [myBehavior],    properties: {    count: Number  },})

5. behavior 中所有可用的节点

可用的节点类型是否必填描述
propertiesObject Map同组件的属性
dataObject同组件的数据
methodsObject同自定义组件的方法
behaviorsString Array引入其它的 behavior
createdFunction生命周期函数
attachedFunction生命周期函数
readyFunction生命周期函数
movedFunction生命周期函数
detachedFunction生命周期函数

6. 同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段,此时可以参考如下 3 种同名时的处理规则:

① 同名的数据字段 (data)

② 同名的属性 (properties) 或方法 (methods)

③ 同名的生命周期函数

如果有同名的数据字段 (data):

  1. 若同名的数据字段都是对象类型,会进行对象合并;

  2. 其余情况会进行数据覆盖,覆盖规则为:组件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高)

如果有同名的属性 (properties) 或方法 (methods):

  1. 若组件本身有这个属性或方法,则组件的属性或方法会覆盖 behavior 中的同名属性或方法;

  2. 若组件本身无这个属性或方法,则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法;

  3. 在 2 的基础上,若存在嵌套引用 behavior 的情况,则规则为:父 behavior 覆盖 子 behavior 中的同名属性或方法。

生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用:

关于微信小程序怎么实现数据共享与方法共享问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯