目录全局数据共享 Moboxnpm安装及其注意事项小程序对 npm 的支持与限制npm 依赖包的安装与使用Mobox组件方法共享 behaviors1. 什么是 behaviors2
原生小程序开发中我们可以通过 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。二者为外部依赖,我们需要npm或yarn去安装构建相关依赖,才能正常使用.
在小程序中已经支持使用 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"
}
}
1. 全局数据共享
2. 小程序中的全局数据共享方案
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 中的成员绑定到组件中
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 是小程序中,用于实现组件间代码共享的特性,类似于 vue.js 中的 “mixins”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被
合并到组件中。
每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。
调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用:
module.exports = Behavior({
// 属性节点
properties: {},
// 私有数据节点
data: {},
// 事件处理函数和自定义方法节点
methods: {}
})
在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据或方法,示例代码
// components/test5/test5.js
const myBehavior = require('../../behaviors/my-behavior')
Component({
behaviors: [myBehavior],
properties: {
count: Number
},
})
可用的节点 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map | 否 | 同组件的属性 |
data | Object | 否 | 同组件的数据 |
methods | Object | 否 | 同自定义组件的方法 |
behaviors | String Array | 否 | 引入其它的 behavior |
created | Function | 否 | 生命周期函数 |
attached | Function | 否 | 生命周期函数 |
ready | Function | 否 | 生命周期函数 |
moved | Function | 否 | 生命周期函数 |
detached | Function | 否 | 生命周期函数 |
组件和它引用的 behavior 中可以包含同名的字段,此时可以参考如下 3 种同名时的处理规则:
① 同名的数据字段 (data)
② 同名的属性 (properties) 或方法 (methods)
③ 同名的生命周期函数
如果有同名的数据字段 (data):
如果有同名的属性 (properties) 或方法 (methods):
生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用:
到此这篇关于微信小程序如何实现数据共享与方法共享的文章就介绍到这了,更多相关微信小程序数据共享与方法共享内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 微信小程序如何实现数据共享与方法共享详解
本文链接: https://www.lsjlt.com/news/161975.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0