npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rx-miniprogram

v1.1.5

Published

微信小程序轻量级集中存储组件,仿照 DvaJS 的 API 定义。

Downloads

5

Readme

rx-miniprogram v1.0.2

微信小程序轻量级集中存储组件,仿照 DvaJS 的 API 定义。

快速上手

注:[TS] 表示如果您使用 TypeScript 开发小程序,需要执行此步骤。

1. 使用 npm 安装 rx-miniprogram

npm i -S rx-miniprogram

2. 点击菜单 -> 工具 -> 构建 npm

  • 如果报错 NPM packages not found.,修改 project.config.json 文件(如下)。
{
  "miniprogramRoot": "miniprogram/",
  "settings": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ]
  }
}
  • 然后关掉小程序开发者工具,重新打开。
  • 再次点击菜单 -> 工具 -> 构建 npm。
  • 最后再次关闭开发者工具,并重新打开。

3. [TS] 将 node_modules/rx-miniprogram/store.d.ts 复制到小程序项目的 typings/types 目录下。

[Windows]

copy node_modules\rx-miniprogram\lib\store.d.ts typings\types\store.d.ts

[Linux/Mac]

cp node_modules/rx-miniprogram/lib/store.d.ts typings/types/store.d.ts

3. [TS] 删除 typings/index.d.ts 中的 IAppOption 定义

/// <reference path="./types/index.d.ts" />

// 下面的删除
// interface IAppOption {
//   globalData: {
//     userInfo?: WechatMiniprogram.UserInfo,
//   }
//   userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback,
// }

4. 修改 app.ts 文件

[TS]

// app.ts
App<IAppOption>({
  store: {},
});

5. 注册登录模型

  • [TS] 创建 miniprogram/models/login.model.ts
import { register, isAction, IAction } from "rx-miniprogram";
import { login } from "../api/login.api";

// 全局定义
declare global {
  interface LoginContext {
    token: string;
  }

  /** 登录状态 */
  interface LoginState extends IState {
    /** 登录上下文信息 */
    loginContext?: LoginContext;
  }

  // 向 IStore 注入 LoginState
  interface IStore {
    login?: LoginState;
  }
}

// 定义登录完成行为。此行为对应 reduces.loginSuccess
interface LoginSuccessAction extends IAction {
  /** 定义 Action Type。格式为 [namespace]/[function name] */
  type: "login/loginSuccess";
  /** 登录上下文 */
  loginContext: LoginContext;
}

// 注册登录模型
register<LoginState>({
  // 这里建议和 IStore 中注入的 LoginState 名称保持一致
  namespace: "login",

  // 初始化状态
  state: {},

  // 带有副作用的 Action
  effects: {
    // 这里提供的是迭代器
    *login(action, { call, put }) {
      // 验证 Action Type
      if (!isAction("login/login", action)) return;

      // 通过 call 调用 wx.login
      const { code } = (yield call(
        wx.login
      )) as WechatMiniprogram.LoginSuccessCallbackResult;

      // 通过 call 调用服务端 login api
      const loginContext = (yield call(login, code)) as LoginContext;

      // 调用 loginSuccess,更新 LoginState
      yield put<LoginSuccessAction>({
        type: "login/loginSuccess",
        loginContext,
      });
    },
  },

  // reduces 中定义的函数必须是纯函数,不可使用 async await
  reduces: {
    // 登录完成后,通过此函数更新 LoginState 的状态
    loginSuccess(state, action) {
      // 验证 Action Type,并将 action 类型限制为 LoginSuccessAction
      if (!isAction<LoginSuccessAction>("login/loginSuccess", action))
        return state;

      const { loginContext } = action;
      return { ...state, loginContext };
    },
  },
});

6. 修改首页

  • [TS] pages/index/index.ts
import { connect, dispatch } from "rx-miniprogram";

// 引入当前页面需要的模型
import "../../models/login.model";

// 将全局状态连接至页面
connect(
  // 定义 store 至 page data 的转换函数
  ({ login }) => ({ loginContext: login?.loginContext }),
  // PageOptions
  {
    // 转换函数中的返回值会被合并到 data 中,本例可访问 data.loginContext
    data: {},

    // 定义其它页面参数
    async onLoad() {
      // 调用 login.model.ts 中的 effects: login 函数
      await dispatch({ type: "login/login" });
    },
  }
);
  • pages/index/index.wxml
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">

  <view>
    <!-- 显示 data.loginContext.token -->
    <text>Login Token: {{loginContext.token}}</text>
  </view>

</scroll-view>