评论

小程序实用npm包推荐

小程序实用npm包

虽然都说不要重复造轮子, 但还是屡见不鲜, 下面给大家推荐几款实用的小程序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 文件中添加




最后一次编辑于  2022-10-27  
点赞 4
收藏
评论

1 个评论

  • 乐亦🤓
    乐亦🤓
    2022-11-01

    插眼

    2022-11-01
    赞同
    回复
登录 后发表内容