推一款基于原生的小程序插件: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: {