当前位置:首页 > php > 正文

微信小程序总结(scroll-view,缓存,redux状态管理等…)

最近参与开发了微云小程序,总体有些心得想在2016年之前总结下;希望对大家有帮助;

再开始之前,背景先说下:好久没有小程序的消息,当我们公司的大神张小龙对小程序站台,立马公司的股价从180到了190,让我本回来了一些;先感谢一下公司,感谢一下张小龙;

【文档】
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
经常会更新,不时有新的接口放出来,还是很令人兴奋的;小程序还是可以支持很多工具的;

【需求】
(1)用户下拉加载更多,是常规的需求;在小程序中有详细的介绍;scroll-view组件,对,就是它,可以方便的进行加载更多,
这样比开发H5方便太多了;

这样就实现了;不过这里有个小坑,就是在组件初始化的时候,需要定好高度;比如这里的200px;so? 如果没有高度,滚动加载就失败了;
怎么办?其实也很简单,设置即可;这里的高度直接通过组件参数实例化即可;就轻松的实现了下拉加载更多;

(2)为了进一步优化用户体验,数据缓存是常见的一个需求;如何实现数据缓存?很简单:

肯定是通过异步的方式来获取缓存数据,但是有点需要注意的,比如缓存的最大存储量为10M,对于微云的数据,其实可能有很多需要缓存的数据;如果失败了,比如缓存写入失败,是需要重点考虑的情况;会导致用户的数据异常,为什么?

一般我们的默认模式是先拉取用户的缓存数据,当用户主动下拉刷新的时候,会重新从服务器取最新的数据;但是数据不会一次性全部拉回来,必定涉及到分页,而且是有多个tab页面的分页数,所以这里是需要维护一个专门的页面pageNum和对应的缓存数据的;当在缓存失败的时候,对应的pageNum,记得别+1哦,否则页面记录会乱掉

通过上面的两处简单介绍,大家应该会有个感觉,就是微信小程序和业界现在流行的ES6,组件化开发,MV*的模式非常接近了;尤其是我在开发了vue之后,越来越对专注于model层有兴趣;任何的数据变化,都可以理论上通过更新model,进行响应式的更新view;

(3)很多小程序都会碰到类似的tab切换的场景,那么这里怎么体验更好?是SPA还是新开页面的方式?最后讨论了,参考了很多H5的多tab方式,还是觉得用SPA的方式,用户更加容易接受;不会涉及到多页面切换,返回的层级在微信有要求,不能超过5个层级;多TAB更加契合用户的期望;基本体验效果如下:

【总结】
谈谈状态管理:上面谈到了很多分页的TAB,每个TAB里面都有相应的数据需要保存缓存;然后再某个tab下面,有很多数据需要进行filter处理;很自然的想到了redux进行状态管理;所有的数据通过状态state进行管理;
这里先推荐两篇文章:
https://segmentfault.com/a/1190000007107646这里谈到了小程序的状态管理;和阮一峰老师讲解的redux
引用下专家的总结:redux就是:
(1)Web 应用是一个状态机,视图与状态是一一对应的。
(2)所有的状态,保存在一个对象里面。

redux的基本的几个概念:
(1)store:保存数据的容器,整个应用(SPA)就一个容器;特别适合类似微云小程序这样的SPA数据管理;通过createStore(fn)生成;
(2)state:容器中的所有数据;比如当前的时间,直接通过store.getState();这种和时间节点相关的就成为state;
【Redux 规定, 一个 State 对应一个 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什么样,反之亦然。】
(3)Action:用户只能操作view;Action 就是 View 发出的通知,表示 State 应该要发生变化了;例如:

【但是view如何发通知呢?store.dispatch()是 View 发出 Action 的唯一方法。】
(4)Reducer:Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。一般createStore()接受 Reducer 作为参数,生成一个新的 Store。
以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State,然后自动更新view;

·注意:Reducer是纯函数,输入一定的时候,输出一定一样;
·由于 Reducer 是纯函数,就可以保证同样的State,必定得到同样的 View。但也正因为这一点,Reducer 函数里面不能改变 State,必须返回一个全新的对象;比如通过Object.assign({}, state, { thingToChange });

【Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。】

生成store,createStore()方法的实现;

这里就可以对应store的三个方法,分别是getState(), dispatch(), subsribe();

大致的流程就是:

用户发出 Action =======> Store会自动调用 Reducer(老的State, action)纯方法并返回新的 State =======> 新和老的State比较,一旦有变化,Store 就会调用监听函数。 ==========> store.subscribe(listener) =============> listener可以获取最新的state,更新view;

盗图如下:

这里基本就简单介绍了微云小程序的背后故事;

暂无评论

发表评论

您必须 [ 登录 ] 才能发表留言!