cnyballk / wenaox Goto Github PK
View Code? Open in Web Editor NEW:dolphin: A light weight and good performance micro channel small program state management library
License: MIT License
:dolphin: A light weight and good performance micro channel small program state management library
License: MIT License
import {
Store,
Provider
} from 'wenaox';
const state = {
count: 0,
};
const methods = {
syncs: {
addCount(state, payload) {
state.count = state.count + 1;
},
subtractCount(state, payload) {
state.count = state.count - 1;
},
},
asyncs: {
async asyncAddCount(payload, rootState) {
const c = await new Promise(resolve => {
setTimeout(() => {
resolve(1);
}, 2000);
});
this.addCount(c);
},
},
};
//一个打印state改变前后的log中间件
const log = store => fn => next => payload => {
console.group('改变前:', store.state);
next(fn, payload);
console.log('改变后:', store.state);
console.groupEnd();
};
//使用Store注册store 第一个参数为控制器对象,第二个参数为中间件数组
const store = new Store({
state,
methods
}, [log]);
const appConfig = ({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
console.log(res)
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
},
})
// 定义App
App(Provider(store)(appConfig));
I want to use it in TS and get a complete prompt
控制台输入能看上一个页面传的categoryId,但是 通过this.data.categoryId拿不到值
const mapState = ({ user }, options) => ({
//userInfo: user.userInfo
...options, // 將query混入data 先注释 BUG
});
const mapMethods = ({ user }) => ({
//getGtqUserInfo: user.getGtqUserInfo,
});
const pageConfig = {
data: {
},
onLoad(options) {
this.getListData();
},
getListData() {
//获取列表数据
let { categoryId } = this.data;
console.log(888, this.data, this.data.categoryId); // BUG
console.log(888, JSON.stringify(this.data));// BUG
//空字符串查询全部
},
};
Page(orm(mapState, mapMethods)(pageConfig));
由于custom-tab-bar组件没有父页面,而ormComp是由监听父页面的show和hide来进行数据绑定的监听
版本:最新
比如这种情况
// moduleA.js
const state = { numA:1 } const methods = { syncs: { addNumA(state,payload) { state.numA += payload } }, asyncs: {} } export default {state,methods}
// store.js
`
import {Store} from 'wenaox'
import moduleA from './module-a/index'
const state = {
num:10
}
const methods = {
syncs: {
addNum(state,payload) {
state.num += payload
}
},
asyncs: {}
}
const store = new Store({state,methods, moduleA });
export default store
`
// index.js
`
import {ormComp} from 'wenaox'
const mapState = state =>({
number: state.num,
num: state.moduleA.numA
})
const mapMethods = methods => ({
addNum: methods.addNum,
addNumA: methods.moduleA.addNumA
})
Component(ormComp(mapState,mapMethods)({
data:{},
methods:{
clickBtn() {
this.addNum(12)
},
clickBtn2() {
this.addNumA(5)
}
}
}));
`
这种情况就报错,‘Cannot read property 'numA' of undefined’,如果store.js中这样导出
const store = new Store({globle:{state,methods},moduleA }); 取值都按照模块来取值则正常
目前发现在v6.6.7版本的微信不兼容,调试基础库2.2.0(npm从2.2.1才开始兼容),打开小程序白屏。
thirdScriptError
sdk uncaught third Error
module "models/wenaox.js" is not defined
Error: module "models/wenaox.js" is not defined
你好,你的wenaox真棒!
我有一个问题,在编写store的时候,在methods里需要syncs之间的函数相互引用,但是用this.xxx会报错,请问怎么解决?
如下图的例子:
@cnyballk @Caitingwei
微信小程序的组件使用了wenaox数据缓存,缓存的数据在页面调用asyncs内的方法更新,如果在页面中使用wx:if控制组件,组件内缓存的数据没有更新(bug)。
页面代码:
未登录
点击登录
问题描述
使用wenaox,orm连接页面后第一次进入页面正常触发onLoad,onShow事件,返回后再次进入页面后第二次只触发了onLoad事件,无触发onShow事件.
经过刚刚的测试,发现在mapState为空是就不触发onshow事件了。
const mapState = ({ user }) => ({
// 这个不会触发onShow
});
const mapState = ({ user }) => ({
data: user.data, // 这个正常触发onShow
});
wenaox版本: "wenaox": "^0.4.4"
page.js
import { orm } from 'wenaox';
const pageConfig = {
data: {
},
onLoad() {
console.warn('onLoad')
},
onShow() {
console.warn('onShow')
},
onShareAppMessage() {
},
};
Page(orm(({}) => ({}),({}) => ({}))(pageConfig));
app.json
"subpackages": [
{
"root": "pages/user/",
"pages": [
"about/index"
]
}
]
能看到有loading,但计数一直没有+1或-1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.