rx-miniprogram
v1.1.5
Published
微信小程序轻量级集中存储组件,仿照 DvaJS 的 API 定义。
Downloads
9
Maintainers
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>