In the simplest way to achieve real-time communication across components, route interception, page monitoring, storage management, anti-chattering throttling regionalization

The most important point: introducing really simple ！！！！

---

---

---

---

---

---

Small programs may not be as convenient as VUE in componentized development, such as cross-component state synchronization, etc.

This plugin:

• 1. Added cross-component real-time communication for small programs; Real-time synchronization status function between parent and child components;

• 2. Similar to vue, WatchStore function listens for global state changes;

• 3. More simple introduction and built-in mixin function like Vue to disassemble the complex functions in the page and make the later maintenance more convenient;

• 4. Built-in screen security domain function directly convenient to avoid the black bar below apple series phones;

• 5. Built-in package jump function can be directly implemented in WXML with parameter jump, JS with parameter jump, encapsulation become more convenient than the official call mode, parameter passing; Route interception similar to that in Vue has also been added.

• 6. Functional scope built-in throttling, damping, only allowed to trigger once and other action area. Block management functions.

• 7. Simple introduction Only need to introduce in app.js without modifying the page to use the relevant functions

start

The introduction of

Global import in app.js

// app.js
import Ani from './ani'

App({
  Ani:new Ani()
  
})

Copy the code

---

The built-in function

Store:

(img-OSIeufqu-1629035125339)(z3.ax1x.com/2021/08/07/…)

Triggered: The listener value is added to the Store via the constructor.setStore(key,value)

//apps is the app.Ani.Com function
apps.setStore(key,value)


Copy the code

Example:

const app=getApp()
const apps=app.Ani.Component({
  data: {
    val:0
  },
  methods: {
    setStore(){
      this.data.val++; Modify the store apps. SetStore ('monitor'.this.data.val)
    }
  },
})

Copy the code

Listening to the Store:

 watchStore: {
    'key'(news, old) {
        console.log(news,old)
    }
}
Copy the code

Example:

/ / page
const app = getApp()
const index=app.Ani.Page({
  data: {
    otherHeight:0
  },

  / / listeners
  watchStore: {
    'monitor'(news, old) {
        this.setData({
            monitor: news
        })
    }
  },

})


// Other components
// This is not binding to the watchStore when the component is triggered, so we have to externally define this to use other methods for the time being
const app=getApp()
let that;
app.Ani.Component({
  data: {},ready(){
    that=this
  },

  watchStore: {'monitor'(news){
      that.setData({ monitor:news })
    }
  }
})
Copy the code

---

Router

To jump directly to WXML page:

  <buttonEvents: $toPath
        bindtap="$toPath"Jump type:data-to-type
        data-to-type="to"Jump path:data-path
        data-path=".. /item/item"Jump parameters:data-to-data
        data-to-data="{{hh}}" 
    >Jump with parameter</button>
Copy the code

$toPath: jump event name data-path: jump path data-to-data: jump parameter data-to-type: jump type Note: The jump type is the same as the official wechat jump mode and supports abbreviations

• NavigateTo: Default jump mode; 2. Short for (to)
• SwitchTab: short for toTab jumps to the tabBar page and closes all other non-Tabbar pages
• ReLaunch: short for launch closes all pages and opens to a page within the application
• RedirectTo: short for (offTo) Closes the current page and goes to another page in the application. However, jumping to the Tabbar page is not allowed.
• NavigateBack: short for (back) closes the current page and returns to the previous page or multilevel page.

Jump events in js:

this$toPath({jump path: pathpath: '.. /item/item', jump parameter: toDatatoData: {a:30}, jump type: toDatatoType: 'offTo'
    })

Copy the code

BeforeRouter

Triggered before a jump is performed

You can do global listening in app.js. The callback function routerData will return jump information. You can change the jump parameter, jump path, and jump type in the callback function

App({
  Ani:new Ani(),
  onLaunch() {
      /* * Before route jump * @param {object} routerData jump parameters can be modified * */
      this.Ani.beforeRouter(function(routerData){
	  
          console.log(routerData);
          // Disable the jump
          // return false

          // Modify the jump parameters
          // return {
          // data:{
          // url:'111111'
          / /},
          // routerType:'redirectTo'
          // }})}})Copy the code

AfterRouter

Triggered after a jump is performed

You can do global listening in app.js. The page callback function returns the instance of the page to which you jump can use the methods in the page to which you jump

App({
  Ani:new Ani(),
  onLaunch() {
  	  * @param {object} page * */
    this.Ani.afterRouter(function(page){
        console.log(page);
		page.setData({title:'Return information'})})})Copy the code

---

Scope

A functional scope simply writes functions in the corresponding object

The throttle

 throttle: {
        // Allow the time to trigger again
        time:'1200'./ / function
        dbClick() {
            console.log('throttle'); }},Copy the code

Image stabilization

debounce: {
        // Allow the time to trigger again
        time:'500'./ / function
        debounce() {
            console.log('debounce'); }},Copy the code

Perform a

 once: {
 		/ / function
        todoOnce() {
            console.log('once'); }},Copy the code

---

Storage

Operation Storage Indicates the valid time of a Storage

Add Storage:

// Add a store with a valid time of 5 seconds
this.$setStorage('key'.'value'.5)
Copy the code

For Storage:

const key= this.$getStorage('key')
Copy the code

Delete Storage:

this.$removeStorage('key')

Copy the code

---

Mixin

Mixin js can also use $toPath and other functions used in JS:

const app=getApp();
/ / into the js
import one from './one'
import two from './two '.const apps = app.Ani.Page({
    // Add to the mixins array
    mixins:[one,two ],
	
    onLoad(options){}})Copy the code

One. Js:

export default{
	data:{

	},
    onReady(){... },onShow(){... },showToast(){
      wx.showToast({
        title: 'hello',}}}Copy the code

---

Page lifecycle listening

Listen

Page life cycle listening events can be used to monitor the life cycle execution of pages and participate in page burial or unified page management

onLoad

Listen for onLoad events

 this.Ani.listen('onLoad'.function(options){
        console.log('onLoad');
		return {
			name:'1'}})Copy the code

Options is used to bring in the page parameters, which can be changed by returning onLoad.

// app.js
App({
  Ani:new Ani(),
  onLaunch() {
       this.Ani.listen('onLoad'.function(options){
			console.log('onLoad');
			return {
				name:'1'}})}})Copy the code

onShow

Listen for onShow events

 this.Ani.listen('onShow'.function(options){
        console.log('onShow');
		//this is the current display page of this
		console.log(this);
      })
Copy the code

Example:

// app.js
App({
  Ani:new Ani(),
  onLaunch() {
       this.Ani.listen('onShow'.function(options){
			console.log('onShow'); })}})Copy the code

onReady

Listen for onReady events

Call method and use the same onShow event as above

onHide

Listen for onHide

Call method and use the same onShow event as above

---

Other small function base Demo