微信小程序如何实现数据共享与方法共享详解

 更新时间:2022年01月09日 15:53:19   作者:久宇诗  
这篇文章主要给大家介绍了关于微信小程序如何实现数据共享与方法共享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

全局数据共享 Mobox

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

npm安装及其注意事项

小程序对 npm 的支持与限制

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

  • 但是小程序中使用npm 包有如下5个限制:
    • 只支持纯 js 包,不支持自定义组件,不支持依赖于 Node.js 内置库的包
    • 必须有入口文件,即需要保证 package.json 中的 main 字段是指向一个正确的入口,如果 package.json 中没有 main 字段,则以 npm 包根目录下的 index.js 作为入口文件。
    • 测试、构建相关的依赖请放入 devDependencies 字段中避免被一起打包到小程序包中,这一点和小程序 npm 包的要求相同。
    • 不支持依赖 c++ 插件的包
    • 小程序环境比较特殊,一些全局变量(如 window 对象)和构造器(如 Function 构造器)是无法使用的。

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

1. 全局数据共享

  • 共享数据是指多个进程都可以访问的数据,而全局变量是一个进程内的多个单元可共享的数据。
  • 解决组件之间数据共享的问题。
  • 开发中常用的全局数据共享方案有:Vuex、Redux、MobX、hooks等。

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

  • mobx-miniprogram: 用来创建 Store 实例对象
  • mobx-miniprogram-bindings: 用来把 Store 中的共享数据或方法,绑定到组件或页面中使用

3. 使用mobx

安装 MobX 相关的包

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

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

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

2. 创建 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 中的成员绑定到组件中

  • 通过storeBindingsBehavior实现自动绑定
  • store:指定要绑定的store
  • fields:置顶绑定的数据字段
    • 绑定字段方式一:numA:()=>store.num1
    • 绑定字段方式二:numA:(store)=>store.num1
    • 绑定字段方式三:numA:'num1'
  • actions:指定要绑定的方法
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 实例对象,供所有的组件使用:

/* 
    调用Behavior()方法,创建对象实例
    使用module.exports讲behevior 实例对象共享出去
*/
module.exports = Behavior({
    // 属性节点
    properties: {},
    // 私有数据节点
    data: {},
    // 事件处理函数和自定义方法节点
    methods: {}
})

4. 导入并使用 behavior

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

// components/test5/test5.js
const 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 中的同名属性或方法。

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

  • 对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;
  • 对于同种生命周期函数,遵循如下规则:
    • behavior 优先于组件执行;
    • 子 behavior 优先于 父 behavior 执行;
    • 靠前的 behavior 优先于 靠后的 behavior 执行;
  • 如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数只会被执行一次。

总结

到此这篇关于微信小程序如何实现数据共享与方法共享的文章就介绍到这了,更多相关微信小程序数据共享与方法共享内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 自定义PC微信扫码登录样式写法

    自定义PC微信扫码登录样式写法

    这篇文章主要介绍了自定义PC微信扫码登录样式的写法以及做了代码分析,需要的朋友学习下吧。
    2017-12-12
  • JS学习笔记之闭包小案例分析

    JS学习笔记之闭包小案例分析

    这篇文章主要介绍了JS学习笔记之闭包,结合具体案例形式分析了javascript实现与使用闭包的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Js中foreach()用法及使用的坑记录

    Js中foreach()用法及使用的坑记录

    这篇文章主要介绍了Js中foreach()用法及使用的坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • JavaScript之iterable_动力节点Java学院整理

    JavaScript之iterable_动力节点Java学院整理

    这篇文章主要介绍了JavaScript之iterable,遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型
    2017-06-06
  • 原生js实现焦点轮播图效果

    原生js实现焦点轮播图效果

    本文主要分享了原生js实现焦点轮播图效果的示例代码,并解析了实例中的注意点。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信JS接口大全

    微信JS接口大全

    这篇文章主要为大家分享了最全面详细的微信JS接口大全,希望对大家有帮助,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 跟我学习javascript的定时器

    跟我学习javascript的定时器

    跟我学习javascript的定时器,告诉大家具体的使用方法,并向大家提出了一个消息要求,制作一个定时器,有没有朋友感兴趣,挑战一下
    2015-11-11
  • JS+HTML5 Canvas实现简单的写字板功能示例

    JS+HTML5 Canvas实现简单的写字板功能示例

    这篇文章主要介绍了JS+HTML5 Canvas实现简单的写字板功能,结合实例形式分析了js结合HTML5 canvas特性的图形绘制相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • JS拉起或下载app的实现代码

    JS拉起或下载app的实现代码

    最近做项目遇到这样的需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页。怎么实现呢?下面小编给大家分享js拉起或下载app的实现代码,需要的朋友参考下
    2017-02-02
  • js捕获鼠标右键菜单中的粘帖事件实现代码

    js捕获鼠标右键菜单中的粘帖事件实现代码

    突发奇想比如点击菜单中的粘帖后事件如何捕获,如下图所示,用的jQuery中的paste事件,如想获得粘帖文本要使用setTimeout控制下时间,感兴趣的朋友可以参考下
    2013-04-04

最新评论