公司动态

责任撰稿绝非进阶向如是说该文，适宜有很大后端此基础的合作开发人员写作。

历经天前泡果的合作开发、试验、审查，目标公司的小流程上架了，这是一个著眼与贯通实体店新体验、圣戈当斯区买回业务流程的小应用领域，钟爱的能QQ内搜寻 辨认出匠物 展开新体验。

合作开发总体新体验

具体来说我们自述下最已经开始内测时非官方应用领域软件是个甚么模样：

• 每天撰稿完须要点选校对，偶而还须要再创下，即使创下完总返回主页，因此增容某一网页须要每天再次导航系统
• 校对手忙脚乱或是运转手忙脚乱看不出提示信息，合作开发人员根本无法对着CM3展开各式各样Jaunpur复原
• 常规性崩盘，高 CPU 高缓存挤占难题多发

前三个难题应用领域软件早已较好化解了，最终的难题在试验版正式发布后我也没再遇到过了，能说早已相对平稳了。

许多合作开发提议

• 采用 es6, 让你的标识符更慢更可信，有一点要特别注意的是 object spread 并不归属于 es6 规范化

// 以下的用法是不行的this.setData{obj,...data}// 参数 spread 是能的functionf(x,...y){// y is an Arrayreturnx*y.length;}

• 采用 polyfill， QQ尽管最大流程统一了 webview， 但是部分旧的 webview 依然是缺少部分常用方法的，例如：Array.find, Array.findIndex. 给出一份我采用的 polyfill.jshttps://gist.github.com/chemzqm/3653bdc576d7110acee4b9413d254ef6, 标识符多数来自MDN，仅供参考
• 采用 Promise，让你的异步并发和串行标识符更容易编写和维护。即使QQ旧版是没有原生 Promise 的，因此非官方屏蔽了 Promise，你须要自己做一个 Promise 实现，网上有兼容标注 Promise 规范化的实现，只需去掉相关 window 的判定即可：https://gist.github.com/chemzqm/8e50e23c35cc14992831027a40b8d871
• 分离 UI 标识符和请求逻辑，这样你的请求能在不同网页重用，将来维护相对容易些。我们有一个 service.js 文件，里面包含了所有请求后台的函数，返回均为 Promise， 这样方便做统一的控制管理
• 合理采用 wxml 中的 import 和 include，import 对应须要填充数据的模板，而 include 则用于引入静态的内容
• 避免把一个网页设计的太复杂，否则一个网页对象上过多的 data 数据和方法会变得很难管理
• 避免采用你不熟悉的第三方框架，例如采用 redux 来管理数据状态，即使小流程本身就有通过 data 属性实现了统一的数据管理，另外还提供了 devtools 工具方便增容，引入 redux 却不能在应用领域软件采用 redux 插件，结果可能只是增加了数据管理的难度
• 采用非官方 UI 简化设计合作开发业务流程，weui/weui-wxss: A UI library by WeChat official design team, includes the most useful widgets/modules.如果你的项目对 UI 定制要求不是很高的话
• QQ非官方的 animation API 只是封装相关 css 属性的生成，其实质还是采用 css 的 transtion 样式，你也能自己写相关样式后添加到元素 style 属性或是采用 animation 实现动画。出于性能考虑，不提议采用 tween 之类的库动态生成样式传递给 setData 函数
• 采用 svg data-uri 来做 icon， 小流程的 background 里根本无法采用完整的 image 路径，对于针对项目的 icon 来说，采用 svg 会更为方便许多，而且svg 是矢量图，具备完美的可伸缩性，采用 utf8 格式将来也能很容易展开调整（主要是颜色），参考Probably Dont Base64 SVG | CSS-Tricks。Material icons - Material Design提供了大量常用 icon 的多种格式，推荐采用。
• 尽可能利用 flex 展开布局，即使 flex 适应性最好，而且非常灵活，
• 合理采用 rpx 单位，rpx 是一个相当于屏幕宽度百分比的相对单位，我们在实现上对于部分padding 和 margin 样式采用了 rpx 来使得大屏上的布局获得更佳的展示效果，对于 font-size，border-width 等样式，不提议采用 rpx
• 不考虑性能难题能采用 css 反锯齿，让字体渲染更精细许多，只须要 app.wxss 中加入：

  page{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}

• 采用有质量的合作开发辅助工具，例如：
• chemzqm/wept: QQ小流程 web 端实时运转工具
• chemzqm/wxapp.vim: 提供QQ小流程合作开发全方位支持的 vim 插件
• chemzqm/mockapi: Create a mock api service in minutes（有待完善）

遇到的许多难题及化解办法

• html 无法采用，采用正则去掉 html 标签就是了，我们采用的标识符如下：

  exportfunctionformatHTML(html){html=html.replace(//gi,);html=html.replace(//gi,);html=html.replace(/<\/div>/ig,\n);html=html.replace(/<\/li>/ig,\n);html=html.replace(/
  /ig,*);html=html.replace(/<\/ul>/ig,\n);html=html.replace(/<\/p>/ig,\n);html=html.replace(//gi,"\n");html=html.replace(/<[^>]+>/ig,);html=html.replace(/\n{2,}/g,\n\n)html=html.replace(/\n+$/g,)html=html.replace(/ /g,)returnhtml}

  性能不是很高，但是现代浏览器性能还是不错的，完全感受不到。
• 网页深度限制，小流程出于性能角度考虑做了 5 层跳转层次的限制，化解办法就是尽可能避免深层次的交互
• 合并多个网页，例如将搜寻网页和搜寻结果网页放到同一个网页上
• 采用弹层而不是跳转，例如我们支付网页的添加收货地址采用了弹出层，而不是跳转添加网页
• 采用 switchTab API，该接口会清理之前的网页栈
• 采用 redirectTo 接口重定向而不是采用 navigateTo
• 原生组件总是显示在最上层，小流程中 canvas、textarea、video 等组件采用原生渲染，如果须要弹层交互的话它们会挡住弹层。化解办法就是在弹层后将这些组件 hidden 属性设置为 true，弹出消失时重置为 false 即可。另一个难题是如果这些组件在弹层内，它们不会限制在弹层中，而是会随着网页总体展开滚动。
• 并发请求限制，小流程限制了最多 5 个并发的 request 请求。我们遇到的一个情况是须要图片自适应高度，而小流程不支持图片高度自适应，须要显示用 wx.getImageInfo 接口获取图片尺寸信息，如果图片多于 5 个且同时请求就会触发这个限制。化解办法是采用一个 promise 队列函数，实现如下：

• exportfunctionqueue(fns,count){returnnewPromise(function(resolve,reject){leta=fns.slice(0,count)letb=fns.slice(count)letl=fns.lengthletruns=0if(fns.length==0)returnresolve()for(letfnofa){fn().then(()=>{runs+=1if(runs==l)returnresolve()letnext=function(){letfn=b.shift()if(!fn)returnreturnfn().then(()=>{runs+=1if(runs==l)returnresolve()returnnext()},reject)}returnnext()},reject)}})}

  第一个参数为返回 promise 的函数列表，第二个参数为并发个数，函数返回 Promise 对象。

• 小流程 url 生成限制。如果你想设置多个参数到二维码的 url 上，以下的调用是不行的：

• response=RestClient.post("https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token={token}",{path:"pages/affiliate/index?id={id}&{code}",width:430}.to_json)

  扫码后的 url 中 & 符号会变为 ％2C\u0026 (感觉是QQ的 bug)，化解办法是采用其它自定义分割符号，例如下划线 _, 然后在小流程标识符里对其展开单独解析。

最终，合作开发本身对于小流程而言根本无法算是刚已经开始的一小步，由于QQ的流量控制，后续的铺码之路任重道远。

以上，不希望对您有所帮助，即使小流程的合作开发实在不是一件能让人愉悦的事：）