浅谈小程序开发中的一些痛点

最近工作任务安排了一个小程序开发项目，第一次实战解除小程序开发，还是遇到了很多问题。在这里做一个小结， 也方便自己日后回顾。

1. 数据状态管理与同步

小程序可以有多个入口页面，每个页面及其组件维护自己的一套数据，通过js进行修改操作，setDate同步到页面显示，数据声明清晰。但是项目作为一个整体，数据状态之间必定有共同 可共享的项，操作这些多个界面都会使用到的数据时就要格外注意，增大了开发的时间成本，同时代码冗余易错，状态更新很难维护。常常一个孙组件的数据需要一层层的triggerEvent到最上层组件，中间出错异常处理，调试艰难。当然，在app.js里有有globalData这个对象可以存放全局都会使用到的数据项，但是每一次的引入、修改与手动触发页面渲染更新也很令人头痛。如果你是写原生小程序不带框架，那么需要注意你的项目中的数据与状态处理一块。
目前比较流行的解决跨组件与跨页面间通讯的方案有很多，官方给出的是 weStore。
API很简洁，注册到store上的数据可以直接使用 update 进行更新（感觉像是setData的语法糖，高性能JSON Diff库，效率更高）

update直接返回的是一个Promise对象，也就是可以对update操作返回的内容再进行链式操作，相较于setDate的把传入的回调作为第二个参数的写法也更加易于理解接受。store中注册的数据可以通过updateAll进行全局更新，当然如果需要按需diff更新，则在该Page的data中再作一次声明即可。其实weStore里的store和app.js中的globalData没啥区别，都是可以用来实现跨页面通讯的数据集，主要特点在于update这个api的性能更高效，在diff之后才调用的setData。

2. 毫无节制的使用setData

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。首先了解一下 小程序的视图层渲染（webView）和逻辑层（JSCore）处理是独立的两个模块，因此我们需要使用setData（小程序封装的黑盒api）来发送逻辑层数据到视图层（异步）。这个过程并不是实时的。官方指路相关setData的优化建议

3. 原生组件的限制

小程序中的部分组件是由客户端创建的（这里组件的具体展示和影响形态也要看客户端的差异， 所以会出现iOS表现正常而部分安卓显示失败的效果）在QQ小程序中还出现过 wx:if 判断无法清除掉页面上已完成渲染的原生组件的情况。原生组件具有层级最高的特性，官方文档上给出的解决方案是 使用cover-view和cover-image进行解决。但是我在项目中使用canvas标签时，发现并不能解决这一问题。同时还有一个很令人头疼的地方，input标签是无法进行换行输入的，也就是说所有内容都只会在一行上面显示。也有可以支持换行的textarea组件，但是这个组件的失去焦点事件发生在点击事件之后，也就是说我们通过自定义的点击完成按钮无法拿到正在聚焦的textarea框中的文案内容，可以配合 form标签进行表单事件提交收集数据，但是使用上还是会受到很多限制。
我这里尝试过的解决方案：

1. 在wxml上通过wx:if控制一个可以自动获取焦点的元素（如 input、textarea），当执行点击事件时 先setData触发wx:if控制的元素显示获取焦点 再收集处理textarea失去焦点的事件。弊端：获取焦点时会自动弹出键盘，使用效果不佳。
2. 控制点击按钮的显示，只有当textarea失去焦点时，再显示 完成提交的按钮（适用于我目前做的项目，这里只是提供一个思路）

还需要注意的是，自动弹起键盘会导致界面布局修改。部分安卓机型还会出现 键盘收回去之后屏幕下方仍旧存在留白的现象。

4. 全局监听器

在项目开发中应当维持一个全局的观察者，监听诸如网络状态变化等事件（感觉这里类似于vue中的计算属性？），官方指路数据监听器 。

5. 异步解决方案

开发中肯定遇到过这样的情况， 一个登陆流程，一堆promise异步请求，出错开始debug的过程真的很艰辛。小程序中目前支持了ES6的promise语法，在开发者工具中 有个增强编译的功能（默认关闭），开启它，开启新世界。

先写到这里吧 后续再补充。踩坑一时爽，bug火葬场，开发不谨慎，测试两行泪。