推一款基于原生的小程序插件：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++;修改storeapps.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: {'monitor'(news, old) {this.setData({monitor: news})}},})//其他组件
//这个地方很捞 组件的watchStore中触发时没拿到this无法绑定 所以暂时只能通过外部定义this来使用其他方法
const app=getApp()
let that;
app.Ani.Component({data: {},ready(){that=this},watchStore:{'monitor'(news){that.setData({ monitor:news })}}
})

Router

跳转
wxml页面中直接跳转:

<button 事件：$toPathbindtap="$toPath" 跳转类型：data-to-typedata-to-type="to" 跳转路径：data-pathdata-path="../item/item" 跳转参数：data-to-datadata-to-data="{{hh}}" >带参数跳转 </button>

$toPath：跳转事件名称
data-path：跳转路径
data-to-data：跳转参数
data-to-type：跳转类型
注：跳转类型同微信官方跳转方式，并支持简写

navigateTo：默认跳转方式；简写（to）
switchTab：简写（toTab）跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch：简写（launch）关闭所有页面，打开到应用内的某个页面
redirectTo：简写（offTo）关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
navigateBack：简写（back）关闭当前页面，返回上一页面或多级页面。

js中的跳转事件:

this.$toPath({跳转路径：pathpath: '../item/item',跳转参数：toDatatoData: {a:30},跳转类型：toDatatoType: 'offTo'})

BeforeRouter

执行跳转之前触发

可以在App.js中进行全局侦听
在回调函数routerData中会返回跳转相关信息
可以在其中进行修改跳转参数，跳转路径，以及跳转类型
return false 则会进行路由拦截

App({Ani:new Ani(),onLaunch() {/** 执行路由跳转之前* @param {object} routerData 跳转相关参数 可进行修改* */this.Ani.beforeRouter(function(routerData){console.log(routerData);// 禁止继续跳转// return false//修改跳转参数// return {//   data:{//     url:'111111'//   },//   routerType:'redirectTo'// }})}
}）

AfterRouter

执行跳转之后触发

可以在App.js中进行全局侦听
在回调函数page中会返回跳转到的页面实例
可以使用被跳转页面中的方法

App({Ani:new Ani(),onLaunch() {/** 执行路由跳转之后* @param {object} page* */this.Ani.afterRouter(function(page){console.log(page);page.setData({title:'返回信息'})})}
}）

Scope

功能性作用域在对应对象中书写函数即可

节流

 throttle: {// 允许再次触发时间time:'1200',//函数dbClick() {console.log('throttle');},},

防抖

debounce: {// 允许再次触发时间time:'500',//函数debounce() {console.log('debounce');}},

执行一次

 once: {//函数todoOnce() {console.log('once');}},

Storage

操作Storage 允许添加Storage的有效时间

添加Storage：

//添加一条有效时间为5秒的存储
this.$setStorage('key','value', 5)

获取Storage：

const key= this.$getStorage('key')

删除Storage：

this.$removeStorage('key')

Mixin

代码混入
注：mixin js中一样可以使用$toPath等功能
js中使用方法：

const app=getApp();
//引入js
import one from './one'
import two from './two '
....const apps = app.Ani.Page({//加入到mixins数组中mixins:[one,two ],onLoad(options){}
})

one.js ：

export default{data:{},onReady(){...},onShow(){...},showToast(){wx.showToast({title: '你好',})}
}

页面生命周期侦听

Listen

页面生命周期侦听事件可以统一侦听页面中的生命周期执行情况
可以用来参与页面埋点或页面统一管理等相关操作

onLoad

侦听onLoad事件

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

options 为带过来的页面参数
可以通过return 进行修改页面中onLoad接收到的参数
可以用来统一侦听处理页面参数相关
例子：

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

onShow

侦听onShow事件

 this.Ani.listen('onShow',function(options){console.log('onShow');//this即为当前显示页面中的thisconsole.log(this);})

例子：

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

onReady

侦听onReady事件

调用方法及使用同上onShow事件

onHide

侦听onHide

调用方法及使用同上onShow事件

其他小功能贱Demo

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

一款基于微信的小程序电商系统源码（前端+后台）带文字安装教程
小程序电商系统源码(前端+后台)带文字安装教程运行环境服务器宝塔面板 PHP 5.6 Mysql 5.5及以上版本 Linux Centos7以上系统介绍: 1.一款基于微信的小程序电商系统,是 ...
基于原生微信小程序的时间组件
作者的絮叨在开发原生微信小程序的时候,发现很少有基于原生微信小程序开发的相关插件或组件,不知道是不是我的孤陋寡闻,还是真的很少,暂且不管~下面我介绍一下我当时开发的一个时间组件,比较简陋,希望可以给 ...
微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
[js] 微信小程序实现轨迹回放，微信原生小程序，基于uniapp的小程序？
[js] 微信小程序实现轨迹回放,微信原生小程序,基于uniapp的小程序? 需要写出轨迹拖动,进度条,开始,暂停,结束功能. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
一款非常好玩的小程序游戏推荐给大家，基于cocos creator引擎开发的
一款非常好玩的小程序游戏推荐给大家,基于cocos creator引擎开发的,排名包含微信好友排行榜,全球榜,快邀请好友,一起来玩吧.
基于微信小程序电子产品商城系统（springboot+ mybatis-plus+mysql+原生微信小程序）
一.系统介绍近年来,随着微信在我国互联网中的广泛使用,基于微信的小程序应用也如雨后春笋,2020年全网小程序已超600万,其中,微信小程序数量超380万.本论文所研究的正是基于微信小程序的电子商城的 ...
（附源码）基于springboot微信小程序的长沙县图书馆图书导览系统毕业设计 170900
基于springboot微信小程序的长沙县图书馆图书导览系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也 ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
基于微信共享小程序系统设计与实现开题报告
毕业论文基于微信共享小程序开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓名 Xxx 学院 ...

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

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

真的可以提供太多方便

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

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

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

这个插件：

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

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

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

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

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

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

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

开始

引入

内置功能

Store:

Router

BeforeRouter

AfterRouter

Scope

节流

防抖

执行一次

Storage

Mixin

页面生命周期侦听

Listen

onLoad

onShow

onReady

onHide

其他小功能贱Demo

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

最新文章

热门文章

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

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

真的可以提供太多方便

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

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

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

这个插件：

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

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

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

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

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

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

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

开始

引入

内置功能

Store:

Router

BeforeRouter

AfterRouter

Scope

节流

防抖

执行一次

Storage

Mixin

页面生命周期侦听

Listen

onLoad

onShow

onReady

onHide

其他小功能贱Demo

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

最新文章

热门文章

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

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

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

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

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