凌雪
2018-10-10
来源 :网络
阅读 1827
评论 0
摘要:本文将带你了解微信小程序开发之Redux绑定 – wechat-weapp-redux,希望本文对大家学微信有所帮助。
本文将带你了解微信小程序开发之Redux绑定 – wechat-weapp-redux,希望本文对大家学微信有所帮助。
用于在微信小程序为页面绑定Redux Store。PS: 代码是基于react-redux修改的安装clone或者下载代码库到本地:git clone https://github.com/charleyw/wechat-weapp-redux将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下):cd wechat-weapp-redux
cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs上面的命令将包拷贝到小程序的libs目录下使用将Redux Store绑定到App上。const store = createStore(reducer) // redux store
const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
const {Provider} = WeAppRedux;Provider是用来把Redux的store绑定到App上。App(Provider(store)({
onLaunch: function () {
console.log("onLaunch")
}
}))provider的实现只是简单的将store加到App这个global对象上,方便在页面中用getApp取出来上面这段代码等同于:App({
onLaunch: function() {
console.log( "onLaunch" )
},
store: store
})在页面的定义上使用connect,绑定redux store到页面上。const pageConfig = {
data: {
},
...
}页面的定义const mapStateToData = state => ({
todos: state.todos,
visibilityFilter: state.visibilityFilter
})定义要映射哪些state到页面const mapDispatchToPage = dispatch => ({
setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
toggleTodo: id => dispatch(toggleTodo(id)),
addTodo: text => dispatch(addTodo(text)),
})定义要映射哪些方法到页面const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)使用connect将上述定义添加到pageConfig中。Page(nextPageConfig);注册小程序的页面说明完成上述两步之后,你就可以在this.data中访问你在mapStateToData定义的数据了。mapDispatchToPage定义的action会被映射到this对象上。Example详细的使用例子可以参照: wechat-weapp-redux-todos真机实测版请clone下面这个repo,用小程序开发工具开启预览:git clone -b release https://github.com/charleyw/wechat-weapp-redux-todos.gi
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了

请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号