uniapp开发app框架在提升开发效率中的独特优势与应用探索
997
2023-03-12
小程序状态管理插件（小程序状态管理插件怎么用）
本篇文章给大家谈谈小程序状态管理插件，以及小程序状态管理插件怎么用对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享小程序状态管理插件的知识，其中也会对小程序状态管理插件怎么用进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
并能够配置是否与缓存做绑定，使用方式类似与Vuex。通常可以用来解决多个试图共享同一
状态或者多个试图需要变更同一状态的场景。
针对2.2.1以下基础库版本，请将本库的dist目录复制到您的项目中，然后适用require或者import的方式引用即
或者
由于小程序的文件夹默认不采用npm的形式，所以第一步需要将小程序项目初始化成npm项目
然后根据你的包管理工具使用
或者
安装成功后，点击开发者工具中的菜单栏：工具 -- 构建 npm
勾选“使用 npm 模块”选项：
构建完成后即可使用 npm 包,js 中引入 npm 包：
Minax库的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state以及action)。
Minax 和单纯的全局对象有以下两点不同：
Minax 的状态存储是基于发布订阅模式的，当页面或组件从 中设置了 mapState 时，相当于向store订阅了该状态，若 store 中的状态发生变化，那么相应的组件、页面也会相应地得到高效更新。
你不能直接改变 store 中的状态，改变 store 中的状态的唯一途径就是显式地提交发布 (commit)，这样使得我们可以方便地跟踪每一个状态的变化。
我们建议在项目建一个store/index.js文件，一个简单的store编写如下：
现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
在项目的app.js中，将store引入
在Page、Component、Behavior中配置mapState属性，其对应的值为一个字符串或者字符串数组
mapState: ['cartCount', 'mark'],
或者
mapState: 'cartCount'，经mapState处理过的属性等效于设置月data中，您可以通过this.data.cartCount获取，也可以通过this.$store.state.cartCount获取
在wxml中，直接绑定改值既可
看到这里，你应该已经基本掌握本库的使用了
state是Minax的全部状态源，我们通过在state中设置的key来绑定状态，其有两个特性：
Minax支持于缓存绑定的模式，这一点你只需要知道即可，因为你无需操作缓存，这一切都由store帮你做好，初始化时会自动读取，更新时会自动写入，而你要做的知识在bindStorageMode等于true时，配置state的持久化属性即可
action通常用于处理异步事物（你实在要同步使用我也没办法）
使用时
好啦，暂时先到这里，你可以愉快的coding啦
既然需要提供事件注册（订阅）的功能，那么必然需要一个地方来存放所有的事件，同一个事件名可以有多个回调，那么显然数据结构如下：
所以事件中心的雏型如下：
订阅功能：在具名事件的回调数组中推入了一个新的回调，接受一个事件名和回调函数。
发布功能：调用对应事件名的所有回调函数，参数为事件名和回调参数。
该对象主要用于存储共享数据，当数据被更新时触发 stageChange 事件。
dispatch：调用 actions ，可以执行一些异步的操作，然后调用commit
commit：调用mutations
需求说明：在首页将一本书加入书架，书架列表自动更新。
store/state.js
store/mutation.js
store/action.js
store/index.js
订阅（书架页）
发布（首页）
目前我使用的是2.4.0版本，如果不知道的话可以在utils中的create.js中最上面注释查看版本号。
打开create.js，找到create方法。
将if语句中的 Page(option)放入create.Page中
这样就可以在app.js中使用了，引入create.js和store中的index.js.在app.js中直接写store.data.xxx就好
基础方法包含获取微信小程序监控SDK并初始化、上报和设置安全域名这三个步骤：
获取微信小程序监控SDK并初始化：
在微信小程序/utils目录下新建wxLogger.js文件，并将JS文件的内容复制并粘贴至新建的wxLogger.js文件中。
在/utils目录下新建monitor.js文件，并将以下内容添加至新建的monitor.js文件中以完成初始化。
说明 您可以自定义JS文件的名称和存放位置。
如果项目使用node module (require) 方式集成，则添加以下内容：
const WXLogger = require('./wxLogger.js');
const Monitor = WXLogger.init({
pid: 'xxx',
region: 'cn', // 指定应用部署的地域：中国设为cn，海外地区靠近新加坡的设为sg。
});
export default Monitor;
如果项目使用ES module (import) 方式集成，则添加以下内容：
import WXLogger from './wxLogger.js';
const Monitor = WXLogger.init({
pid: 'xxx',
region: 'cn', // 指定应用部署的地域：中国设为cn，海外地区靠近新加坡的设为sg。
});
export default Monitor;
说明 关于参数的详细配置，请参见通用SDK配置项。
使用以下方法静默采集PV、Error、API、性能及Health数据：
在app.js中，使用Monitor.hookApp(options)方法静默捕获Error类日志。其中的options即为App层相应的Object配置。
import Monitor from '/util/monitor';
App(Monitor.hookApp({
onError(err) {
console.log('进入onError:', err);
},
onLaunch() {
console.log('进入onLaunch');
},
onShow(options) {
},
onHide() {
}
}));
在page的JS文件中通过Monitor.hookPage(options)方法静默上报API请求、PV、Health数据。
import Monitor from '/util/monitor';
// 使用hookPage后，生命周期的API会自动打点。
Page(Monitor.hookPage({
data: {},
onLoad(query) {
},
onReady() {
// 页面加载完成。
},
onShow() {
},
onLoad(query) {
},
onHide() {
},
onUnload() {
}
}));
设置安全域名：
如果region设为cn，则将https://arms-retcode.aliyuncs.com添加到Request合法域名。
如果region设为sg，则将https://arms-retcode-sg.aliyuncs.com添加到Request合法域名。
API方法：静默打点基础API
方法 参数 备注 示例使用场景
hookApp {} 请传入原有的App参数。 在App的生命周期中自动打点。
hookPage {} 请传入原有的Page参数。 在Page的生命周期中自动打点。
说明 小程序监控项目如需使用hookApp、hookPage嵌入生命周期打点，必须符合标准小程序关于App和Page的规范，即App层有onError，Page层有onShow、onHide、onUnload。使用方法示例，请参见基础使用方法。
API方法：其他设置API
方法 参数 备注
setCommonInfo {[key: string]: string;} 设置日志基础字段，可用于灰度发布等场景。
setConfig {[key: string]: string;} 设置config字段，具体操作，请参见SDK参考。
说明 对于setConfig方法，小程序场景不支持配置uid，您可以使用setUsername代替uid标识用户。
pageShow {} Page Show打点，发送PV数据。
pageHide {} Page Hide打点，发送Health数据。
error String/Object 错误日志打点。
api 请参见API参考 API类日志上报。
sum/avg String 自定义求和、求均值日志上报。
进阶场景
当基础使用方法无法满足需求时，请参见以下进阶场景：
手动上报API相关信息（不采用静默上报方式）：
将disableHook设为true，不静默上报wx.request请求的日志。
手动调用api()方法上报API相关信息。
取消静默上报并改为手动打点：
在App和Page对应的JS文件中不再使用hookApp、hookPage方法。
如需发送当前页面的PV数据，则在Page的onShow方法下调用pageShow()方法。
说明 请勿与hookPage()方法同时使用此方法，否则会造成PV类日志重复上报。
import Monitor from '/util/monitor';
Page({
onShow: function() {
Monitor.pageShow();
}
})
如需发送当前页面的Health类数据，统计当前页面的健康度和页面停留时间，则在Page的onHide和onUnload方法下调用pageHide()方法。
说明 请勿与 hookPage()方法同时使用此方法，否则会造成日志重复上报。
import Monitor from '/util/monitor';
Page({
onHide: function() {
Monitor.pageHide();
},
onUnload: function() {
Monitor.pageHide();
}
...
})
通用SDK配置项
ARMS前端监控提供一系列SDK配置项，让您能够通过设置参数来满足额外需求。以下是适用于本文场景的通用配置项。
参数 类型 描述 是否必选 默认值
pid String 项目唯一ID，由ARMS在创建站点时自动生成。 是 无
uid String 用户ID，用于标识访问用户，可手动配置，用于根据用户ID检索。如果不配置，则由SDK随机自动生成且每半年更新一次。 否 由SDK自动生成
tag String 传入的标记，每条日志都会携带该标记。 否 无
release String 应用版本号。建议您配置，便于查看不同版本的上报信息。 否 undefined
environment String 环境字段，取值为：prod、gray、pre、daily和local，其中：
prod表示线上环境。
gray表示灰度环境。
pre表示预发环境。
daily表示日常环境。
local表示本地环境。
否 prod
sample Integer 日志采样配置，值为1~100的整数。对性能日志和成功API日志按照1/sample的比例采样，关于性能日志和成功API日志的指标说明，请参见统计指标说明。 否 1
behavior Boolean 是否为了便于排查错误而记录报错的用户行为。 否 false
enableLinkTrace Boolean 进行前后端链路追踪，请参见使用前后端链路追踪诊断API错误原因。 否 false
ARMS前端监控还提供了更多SDK配置项，可满足进一步的需求。更多信息，请参见SDK参考。 关于小程序状态管理插件和小程序状态管理插件怎么用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序状态管理插件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序状态管理插件怎么用、小程序状态管理插件的信息别忘了在本站进行查找喔。
本文目录一览：
小程序状态管理库-Minax
Minax是一个专为小程序开发的状态管理库，它采用集中式存储管理应用的所有组件的状态，并能够配置是否与缓存做绑定，使用方式类似与Vuex。通常可以用来解决多个试图共享同一
状态或者多个试图需要变更同一状态的场景。
针对2.2.1以下基础库版本，请将本库的dist目录复制到您的项目中，然后适用require或者import的方式引用即
或者
由于小程序的文件夹默认不采用npm的形式，所以第一步需要将小程序项目初始化成npm项目
然后根据你的包管理工具使用
或者
安装成功后，点击开发者工具中的菜单栏：工具 -- 构建 npm
勾选“使用 npm 模块”选项：
构建完成后即可使用 npm 包,js 中引入 npm 包：
Minax库的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state以及action)。
Minax 和单纯的全局对象有以下两点不同：
Minax 的状态存储是基于发布订阅模式的，当页面或组件从 中设置了 mapState 时，相当于向store订阅了该状态，若 store 中的状态发生变化，那么相应的组件、页面也会相应地得到高效更新。
你不能直接改变 store 中的状态，改变 store 中的状态的唯一途径就是显式地提交发布 (commit)，这样使得我们可以方便地跟踪每一个状态的变化。
我们建议在项目建一个store/index.js文件，一个简单的store编写如下：
现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
在项目的app.js中，将store引入
在Page、Component、Behavior中配置mapState属性，其对应的值为一个字符串或者字符串数组
mapState: ['cartCount', 'mark'],
或者
mapState: 'cartCount'，经mapState处理过的属性等效于设置月data中，您可以通过this.data.cartCount获取，也可以通过this.$store.state.cartCount获取
在wxml中，直接绑定改值既可
看到这里，你应该已经基本掌握本库的使用了
state是Minax的全部状态源，我们通过在state中设置的key来绑定状态，其有两个特性：
Minax支持于缓存绑定的模式，这一点你只需要知道即可，因为你无需操作缓存，这一切都由store帮你做好，初始化时会自动读取，更新时会自动写入，而你要做的知识在bindStorageMode等于true时，配置state的持久化属性即可
action通常用于处理异步事物（你实在要同步使用我也没办法）
使用时
好啦，暂时先到这里，你可以愉快的coding啦
微信小程序中实现状态管理
状态管理中非常重要的点就是发布/订阅模式，发布/订阅模式的原理非常简单，一边发布，一边订阅。订阅者在事件中心注册具名事件和回调函数，发布者通知事件中心执行所有同名的回调函数。既然需要提供事件注册（订阅）的功能，那么必然需要一个地方来存放所有的事件，同一个事件名可以有多个回调，那么显然数据结构如下：
所以事件中心的雏型如下：
订阅功能：在具名事件的回调数组中推入了一个新的回调，接受一个事件名和回调函数。
发布功能：调用对应事件名的所有回调函数，参数为事件名和回调参数。
该对象主要用于存储共享数据，当数据被更新时触发 stageChange 事件。
dispatch：调用 actions ，可以执行一些异步的操作，然后调用commit
commit：调用mutations
需求说明：在首页将一本书加入书架，书架列表自动更新。
store/state.js
store/mutation.js
store/action.js
store/index.js
订阅（书架页）
发布（首页）
改装OMIX2.0小程序框架，使app.js能够使用状态管理
腾讯原生小程序框架 OMIX2.0现在支持的是在页面中去使用状态管理，但实际工作中很多情况下需要我们在app.js中就去使用状态管理，比如说在onLaunch中我们需要授权登录并且获取用户的信息，这些就会需要在获取后用状态管理及时存储，方便以后的使用。所以我们需要对其改装。目前我使用的是2.4.0版本，如果不知道的话可以在utils中的create.js中最上面注释查看版本号。
打开create.js，找到create方法。
将if语句中的 Page(option)放入create.Page中
这样就可以在app.js中使用了，引入create.js和store中的index.js.在app.js中直接写store.data.xxx就好
怎样监控手机微信小程序记录
基础使用方法基础方法包含获取微信小程序监控SDK并初始化、上报和设置安全域名这三个步骤：
获取微信小程序监控SDK并初始化：
在微信小程序/utils目录下新建wxLogger.js文件，并将JS文件的内容复制并粘贴至新建的wxLogger.js文件中。
在/utils目录下新建monitor.js文件，并将以下内容添加至新建的monitor.js文件中以完成初始化。
说明 您可以自定义JS文件的名称和存放位置。
如果项目使用node module (require) 方式集成，则添加以下内容：
const WXLogger = require('./wxLogger.js');
const Monitor = WXLogger.init({
pid: 'xxx',
region: 'cn', // 指定应用部署的地域：中国设为cn，海外地区靠近新加坡的设为sg。
});
export default Monitor;
如果项目使用ES module (import) 方式集成，则添加以下内容：
import WXLogger from './wxLogger.js';
const Monitor = WXLogger.init({
pid: 'xxx',
region: 'cn', // 指定应用部署的地域：中国设为cn，海外地区靠近新加坡的设为sg。
});
export default Monitor;
说明 关于参数的详细配置，请参见通用SDK配置项。
使用以下方法静默采集PV、Error、API、性能及Health数据：
在app.js中，使用Monitor.hookApp(options)方法静默捕获Error类日志。其中的options即为App层相应的Object配置。
import Monitor from '/util/monitor';
App(Monitor.hookApp({
onError(err) {
console.log('进入onError:', err);
},
onLaunch() {
console.log('进入onLaunch');
},
onShow(options) {
},
onHide() {
}
}));
在page的JS文件中通过Monitor.hookPage(options)方法静默上报API请求、PV、Health数据。
import Monitor from '/util/monitor';
// 使用hookPage后，生命周期的API会自动打点。
Page(Monitor.hookPage({
data: {},
onLoad(query) {
},
onReady() {
// 页面加载完成。
},
onShow() {
},
onLoad(query) {
},
onHide() {
},
onUnload() {
}
}));
设置安全域名：
如果region设为cn，则将https://arms-retcode.aliyuncs.com添加到Request合法域名。
如果region设为sg，则将https://arms-retcode-sg.aliyuncs.com添加到Request合法域名。
API方法：静默打点基础API
方法 参数 备注 示例使用场景
hookApp {} 请传入原有的App参数。 在App的生命周期中自动打点。
hookPage {} 请传入原有的Page参数。 在Page的生命周期中自动打点。
说明 小程序监控项目如需使用hookApp、hookPage嵌入生命周期打点，必须符合标准小程序关于App和Page的规范，即App层有onError，Page层有onShow、onHide、onUnload。使用方法示例，请参见基础使用方法。
API方法：其他设置API
方法 参数 备注
setCommonInfo {[key: string]: string;} 设置日志基础字段，可用于灰度发布等场景。
setConfig {[key: string]: string;} 设置config字段，具体操作，请参见SDK参考。
说明 对于setConfig方法，小程序场景不支持配置uid，您可以使用setUsername代替uid标识用户。
pageShow {} Page Show打点，发送PV数据。
pageHide {} Page Hide打点，发送Health数据。
error String/Object 错误日志打点。
api 请参见API参考 API类日志上报。
sum/avg String 自定义求和、求均值日志上报。
进阶场景
当基础使用方法无法满足需求时，请参见以下进阶场景：
手动上报API相关信息（不采用静默上报方式）：
将disableHook设为true，不静默上报wx.request请求的日志。
手动调用api()方法上报API相关信息。
取消静默上报并改为手动打点：
在App和Page对应的JS文件中不再使用hookApp、hookPage方法。
如需发送当前页面的PV数据，则在Page的onShow方法下调用pageShow()方法。
说明 请勿与hookPage()方法同时使用此方法，否则会造成PV类日志重复上报。
import Monitor from '/util/monitor';
Page({
onShow: function() {
Monitor.pageShow();
}
})
如需发送当前页面的Health类数据，统计当前页面的健康度和页面停留时间，则在Page的onHide和onUnload方法下调用pageHide()方法。
说明 请勿与 hookPage()方法同时使用此方法，否则会造成日志重复上报。
import Monitor from '/util/monitor';
Page({
onHide: function() {
Monitor.pageHide();
},
onUnload: function() {
Monitor.pageHide();
}
...
})
通用SDK配置项
ARMS前端监控提供一系列SDK配置项，让您能够通过设置参数来满足额外需求。以下是适用于本文场景的通用配置项。
参数 类型 描述 是否必选 默认值
pid String 项目唯一ID，由ARMS在创建站点时自动生成。 是 无
uid String 用户ID，用于标识访问用户，可手动配置，用于根据用户ID检索。如果不配置，则由SDK随机自动生成且每半年更新一次。 否 由SDK自动生成
tag String 传入的标记，每条日志都会携带该标记。 否 无
release String 应用版本号。建议您配置，便于查看不同版本的上报信息。 否 undefined
environment String 环境字段，取值为：prod、gray、pre、daily和local，其中：
prod表示线上环境。
gray表示灰度环境。
pre表示预发环境。
daily表示日常环境。
local表示本地环境。
否 prod
sample Integer 日志采样配置，值为1~100的整数。对性能日志和成功API日志按照1/sample的比例采样，关于性能日志和成功API日志的指标说明，请参见统计指标说明。 否 1
behavior Boolean 是否为了便于排查错误而记录报错的用户行为。 否 false
enableLinkTrace Boolean 进行前后端链路追踪，请参见使用前后端链路追踪诊断API错误原因。 否 false
ARMS前端监控还提供了更多SDK配置项，可满足进一步的需求。更多信息，请参见SDK参考。 关于小程序状态管理插件和小程序状态管理插件怎么用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序状态管理插件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序状态管理插件怎么用、小程序状态管理插件的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~