司徒正美

支付宝样式处理 ``` previous: ->

prettify-xml js-beautify html-minifier

大约从11月份开始，我们切换到branch3开发 原来master上使用 template机制来编写组件，它其实规避了许多问题，因为4大小程序的自定义组件机制都各有不同， template则是兼容成本最低的方案。但是用template编写组件，其实那不是组件，对于小程序来说就是视图片段。换言之， 一个页面只有一个组件，而这个组件的数据则是非常庞大。果不其然，它在支付宝小程序的IOS8/9中因为性能问题挂掉，只好 匆匆切到branch3 branch3使用自定义组件机制实现组件，目前来看，微信与百度很相似，内部是运行一个迷你React,加上我们的迷你React， 事实上是两个React拼接视图，创建组件。并且这两套React生命周期触发顺序与官方React是一样的。 我们的组件机制是这样的实现的，首先，anu diff 虚拟DOM ，在onBeforeRender时机 将组件实例放到构造器上的reactInstances数组上， 然后小程序在渲染视图，它内部也diff 虚拟DOM，在created生命周期钩子中，拿到this(小程序的组件实例)， 然后再从reactInstances shift出一个React组件实例，让它们互相关联，用React的数据刷新小程序组件实例。 但，支付宝的生命周期名字不一样，并且少了created钩子，那我们想在didMount钩子（对应微信的attached钩子）拿到this，然后。。。 可惜支付宝没有让我们这么顺利。 假设一个页面有4个名为Dialog的组件，那么它们钩子的触发顺序应该根据它们在视图的位置从上到下，从左至右触发的， 而支付宝是随机触发的。于是我们在编译阶段，在React的JSX 与 支付宝的awxml上都添加了一个UUID，确保我们的React实例能找到真正对应的支付宝小程序实例。 快应用就更麻烦些，它像vue那样三种格式都放在同一个文件中，而script标签是无法export出任何东西，于是我只好将组件定义单独拆到另一个文件。这样搞定引用父类的问题。

支付宝的React基本完工！

An expiration time represents a time in the future by which an update should flush. The priority of the update is related to the difference between the current clock time...

快应用现在遇到的问题与难点 1. 现在 this.$app 这个东西是无法保存起来，希望有类似getApp()全局方法，得到app.ux的对象，在里面加方法或数据 能跨页面保存不会丢失。 重要！！ 2. 希望有类似的 wx.createSelectorQuery API 传入id或类名，得到页面上某一元素的位置与长宽 https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html 这在开发UI组件时非常有用 3. 希望有类似scrollTo的方法 , 用于设置滚动条的位置 4. 事件对象希望有pageX, pageY这样的位置属性 5. text，span等标签中能使用slot机制 6. CSS的支持要更为完善 7. 希望开发者工具有预览功能

需要重新实现的组件 slider, swiper（它们都依赖于touch事件，快应用暂时不支持，可以先在微信上测试）,picker, scroll-view, icon, button

checkbox, radio， picker的重新实现， window下的路径问题， 一个页面内有多个相同的组件它们与react实例对接时是否正常，YIS render的支持

```jsx import { registeredComponents, usingComponents, updateMiniApp } from './utils'; import { dispatchEvent } from './eventSystemQuick'; export function registerComponent(type, name) { registeredComponents[name] = type; type.ali = true; var reactInstances = (type.reactInstances...