虽然都说不要重复造轮子, 但还是屡见不鲜, 下面给大家推荐几款实用的小程序npm包, 欢迎各位同志评论区继续补充.
1.mobx-miniprogram, mobx-miniprogram-bindings, 小程序状态管理, 类似于vuex; mobx-miniprogram用于创建状态数据, mobx-miniprogram-bindings用于对页面或组件绑定状态数据;使用文档: https://github.com/wechat-miniprogram/mobx;
import { observable, action } from 'mobx-miniprogram';
export const store = observable({
// 数据字段
numA: 1,
numB: 2,
// 计算属性
get sum() {
return this.numA + this.numB;
},
// actions
update: action(function () {
this.numA++;
}),
});
// 页面使用
import{ createStoreBindings }from'mobx-miniprogram-bindings'
import{ store }from'./store'
Page({
data:{
someData:'...'
},
onLoad(){
// 绑定
this.storeBindings = createStoreBindings(this,{
store,
fields:['numA','numB','sum'],
actions:['update'],
})
},
onUnload(){
this.storeBindings.destroyStoreBindings()
},
})
2.dayjs, 时间处理工具, 包含时间解析, 时间格式化, 时间比较等常用功能, 最重要的尺寸较小, 非常适合移动端来使用, 使用文档: https://dayjs.fenxianglu.cn/category/;
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2022-10-27 13:50:12
dayjs().add(7, 'day') // 7天后
dayjs().isBefore(dayjs('2011-01-01')) // 是否在2011-01-01之前
3.mp-html, 富文本解析利器, 小程序提供的rich-text组件虽然可以解析富文本, 但存在若干缺陷: 1. 文字无法选择; 2. 链接无法跳转; 3.图片无法预览和自适应尺寸等, 使用mp-html可以很好解决上述问题, 使用文档: https://www.npmjs.com/package/mp-html;
1.安装npm
npm i mp-html
2.在需要使用页面的 json 文件中添加
{
"usingComponents": {
"mp-html": "mp-html"
}
}
在需要使用页面的 wxml 文件中添加
插眼