推一款基于原生的小程序（埋点）插件：ani-weapp

推一款基于原生的小程序插件：ani-weapp

真的可以提供太多方便

用最简单的方式实现跨组件实时通信，路由拦截，页面监听，storage管理，防抖节流区域化

最最最重要的一点： 引入真的简单！！！！

---

---

---

---

---

---

小程序在组件化开发的时候可能没有达到vue那样的便捷，例如跨组件状态同步等。

这个插件：

• 1.为小程序添加了跨组件实时通信；父子组件实时同步状态功能；

• 2.与vue相似的WatchStore功能，监听全局状态的变化；

• 3.更加简单的引入，还内置了如同Vue中的mixin 功能， 将页面中复杂的功能拆解开，使后期维护更加方便；

• 4.内置了屏幕安全域功能 直接方便避免苹果系列手机下方黑条；

• 5.内置封装的跳转功能 可以直接在wxml中实现带参跳转，js带参跳转 ，封装成为比官方更加简便的调用方式，参数传递 ；同时也增加了 类似Vue中的路由拦截功能。

• 6.功能性作用域内置了节流，防抖，只允许触发一次等作用区域。区块化的管理功能函数。

• 7.引入简单 只需要在app.js中进行引入 无需修改页面 即可使用相关功能

开始

引入

在app.js中全局引入

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

App({
   
  Ani:new Ani()
  
})

---

内置功能

Store:

同步监听修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsIEufqu-1629035125339)(https://z3.ax1x.com/2021/08/07/fM46OI.gif)]

触发：通过 构造器.setStore(key,value) 将监听值加入Store

//apps为app.Ani.Component函数
apps.setStore(key,value)

例子：

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

监听Store:

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

例子：

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

  // 监听器
  watchStore: {