小程序|浅谈小程序开发中的一些痛点小程序|计算机

最近工作任务安排了一个小程序开发项目，第一次实战解除小程序开发，还是遇到了很多问题。在这里做一个小结，也方便自己日后回顾。
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标签进行表单事件提交收集数据，但是使用上还是会受到很多限制。
我这里尝试过的解决方案：

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

还需要注意的是，自动弹起键盘会导致界面布局修改。部分安卓机型还会出现键盘收回去之后屏幕下方仍旧存在留白的现象。
4. 全局监听器在项目开发中应当维持一个全局的观察者，监听诸如网络状态变化等事件（感觉这里类似于vue中的计算属性？），官方指路数据监听器。
5. 异步解决方案开发中肯定遇到过这样的情况，一个登陆流程，一堆promise异步请求，出错开始debug的过程真的很艰辛。小程序中目前支持了ES6的promise语法，在开发者工具中有个增强编译的功能（默认关闭），开启它，开启新世界。