Shulou(Shulou.com)06/02 Report--

WeChat Mini Programs how to achieve data sharing and method sharing, in view of this problem, this article introduces the corresponding analysis and answers in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Global data sharing Mobox

In native Mini Program development, we can achieve global data sharing through mobx-miniprogram and mobx-miniprogram-bindings. Both are external dependencies, and we need npm or yarn to install and build related dependencies in order to work properly.

Npm installation and its precautions Mini Program's support and restrictions on npm

In Mini Program, it has been supported to use npm to install third-party packages to improve the efficiency of Mini Program development.

However, there are five restrictions on using npm packages in Mini Program:

Only pure js packages are supported, no custom components are supported, and packages dependent on Node.js built-in libraries are not supported.

There must be an entry file, that is, you need to make sure that the main field in the package.json points to a correct entry. If there is no main field in the package.json, use the index.js under the root of the npm package as the entry file.

For testing and building related dependencies, please put them in the devDependencies field to avoid being packaged together in the Mini Program package, which is the same as the Mini Program npm package.

Packages that rely on C++ plug-ins are not supported

The Mini Program environment is special, and some global variables (such as window objects) and constructors (such as Function constructors) cannot be used.

Installation and use of npm dependency package

Initialize Mini Program to generate package.json

Npm init-y

Install the npm package

Execute the command to install the npm package in the same directory as Mini Program package.json:

Npm install pageName

The requirement here is that the package.json involved in building the npm needs to be within the miniprogramRoot defined by the project.config.js.

Build npm

Click the menu bar in developer tools: tools-- > build npm

Check the "use npm module" option:

After the build is complete, you can use the npm package.

Introduce npm package into js:

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

Use the custom components in the npm package:

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

1. Global data sharing

Shared data refers to data that can be accessed by multiple processes, while global variables are data that can be shared by multiple units within a process.

Solve the problem of data sharing between components.

The global data sharing schemes commonly used in development are: Vuex, Redux, MobX, hooks and so on.

two。 Global data sharing Scheme in Mini Program

Mobx-miniprogram: used to create Store instance objects

Mobx-miniprogram-bindings: used to bind shared data or methods in Store to components or pages for use

3. Use mobx

Install MobX-related packages

Run the following command in the project to install the MobX-related package:

Npm I-S mobx-miniprogram mobx-miniprogram-bindings

Note: after the MobX-related packages are installed, remember to delete the miniprogram_npm directory and rebuild npm.

two。 Create a Store instance of MobX

```import {observable, action} from 'mobx-miniprogram'export const store=observable ({num1:1, num2:2, get sum () {return this.num1+this.num2}, updateNum1:action (function (step) {this.num1+=tep})}) ```

Bind members in Store to the page

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 ()}})

Bind members in Store to components

Automatic binding through storeBindingsBehavior

Store: specifies the store to bind

Fields: the data field bound at the top

Binding field method 1: numA: () = > store.num1

Binding field method 2: numA: (store) = > store.num1

Binding field method 3: numA:'num1'

Actions: specify the method to bind

Import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'import {store} from'.. / store/store'Component ({behaviors: [storeBindingsBehavior], storeBindings: {/ / data source store, fields: {numA: 'num1', numB:' num2', sum: 'sum'} Actions: {updateNum2: 'updateNum2'}},}) component methods share behaviors1. What is behaviors?

Behaviors is a feature in Mini Program for code sharing between components, similar to "mixins" in Vue.js.

2. The way behaviors works

Each behavior can contain a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data, and methods are replaced by the

Merge into components.

Each component can reference multiple behavior,behavior or other behavior.

3. Create behavior

Call the Behavior (Object object) method to create a shared behavior instance object for use by all components:

/ * call the Behavior () method to create an object instance and use module.exports to share the behevior instance object * / module.exports = Behavior ({/ / attribute node properties: {}, / / private data node data: {}, / / event handler function and custom method node methods: {}}) 4. Import and use behavior

In the component, use the require () method to import the required behavior, and after mounting, you can access the data or methods in the behavior. Sample code

/ / components/test5/test5.jsconst myBehavior = require ('.. /.. / behaviors/my-behavior') Component ({behaviors: [myBehavior], / * component attribute list * / properties: {count: Number} }) 5. Whether the node types available to all available nodes in behavior are required to describe propertiesObject Map No property of the same component dataObject No data methodsObject of the same component No method of the Custom component behaviorsString Array No introduce other behaviorcreatedFunction No Life cycle function attachedFunction No Life cycle function readyFunction No Life cycle function movedFunction No Life cycle function detachedFunction No Life cycle function 6. Coverage and combination rules of fields with the same name

The component and the behavior it references can contain fields with the same name. You can refer to the following three processing rules for the same name:

① data field with the same name (data)

② property with the same name (properties) or method (methods)

Life cycle function of ③ with the same name

If there is a data field with the same name (data):

If all the data fields with the same name are object types, the objects will be merged.

In other cases, the data will be overwritten. The coverage rules are as follows: component > parent behavior > child behavior, bottom behavior > front behavior. (those with high priority cover those with low priority, and those with the highest priority.)

If there is a property (properties) or method (methods) with the same name:

If the component itself has this property or method, the property or method of the component will override the property or method of the same name in the behavior

If the component itself does not have this property or method, the property or method that defines the next behavior in the component's behaviors field will override the preceding property or method of the same name.

On the basis of 2, if there is a nested reference behavior, the rule is: the parent behavior overrides the property or method of the same name in the child behavior.

Lifecycle functions do not cover each other, but are called one by one at the corresponding trigger time:

Follow the execution order of component lifecycle functions between different lifecycle functions

For the same lifecycle function, follow the following rules:

Behavior takes precedence over component execution

Child behavior execution takes precedence over parent behavior execution

The front behavior takes precedence over the lower behavior execution

If the same behavior is referenced multiple times by a component, the lifecycle functions it defines will only be executed once.

This is the end of the answer to WeChat Mini Programs's question on how to achieve data sharing and method sharing. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.