快應用的開發注意點

隨着公司愈來愈多業務線開發快應用，咱們總結一下咱們這個月開發快應用的心得及給出必要的指導。由於快應用與咱們公司的預裝策略有關，咱們想要手機商預裝咱們的去哪兒App，那麼咱們就得幫他們推廣一下他們的快應用。至於快應用是否能比微信小程序帶來更多流量，那是另外一回事了。

快應用目前是由小米公司統一給九大手機商提供技術支持的，所以咱們在開發快應用有問題時，直接問小米的人就好了。而小米在早期就開發過相似小程序的東西，所以它的體系與微信小程序出入比較大，像百度，支付寶，頭條都是直接抄微信的，網上早有破解微信小程序的代碼，所以他們在開發者工具，模板，接口，實現得幾乎同樣。而快應用則本身獨立開發，是真正的native架構（其餘公司是多webview架構），前端模板又是走vue那套，又沒有統一的接口對象，許多經驗是不能直接遷移的。最坑的是，因爲沒有webview，須要本身實現CSS引擎，小米早期爲了性能考慮，許多CSS樣式不支持的。

下面就展開描述吧

CSS層

1. 不支持繼承。
2. display只有兩種值：flex與node。所以它勉強算是flexbox佈局，可是它是沒有inline-flex. 默認flex-direction爲row， 所以其餘小程序轉換過來的頁面大多數堆在一行裏。若是對純flexbox佈局不熟悉，能夠參考咱們官網的文章，這裏總結了一些佈局 https://rubylouvre.github.io/...
3. 沒有浮動與清理浮動的樣式，即 float與overflow。
4. 定位沒有相對定位與絕對定位，所以也沒有z-index , 所以想實現某個東西浮在另外一個東西的上面，須要用到它的stack標籤。固然你也可使用 負margin與transform 。
5. 沒有精細地處理文本的樣式，如text-overflow, letter-spacing, line-break ,overflow-wrap, tab-size, text-align, text-align-last, text-indent, text-justify, text-size-adjust, text-transform, white-space, word-break, word-spacing。
6. 瀏覽器中能夠用16進制，顏色名，RGB， RGBA， HSL， HSLA 這些方式指定顏色值，但快應用只支持前兩種。

標籤層面

1. 沒有button，建議用咱們提供Button。
2. 沒有icon， 建議用咱們提供Icon。
3. 文本節點必須放在text, span, a, label 標籤內，不然它們不會顯示。不過娜娜奇會幫你本身添加的。 而且text標籤內容不能再套text標籤， span標籤內容不能再套span標籤
4. checkbox、 radio必須放在checkbox-group、 radio-group中，這是爲了與其餘平臺保持一到，娜娜奇會幫你處理
5. 文本節點中有換行符，它們會真的換行的，不會像瀏覽器那樣自動忽略。所以咱們框架會自動去掉文本兩邊的空白或 移除純的空白節點。
6. list-item是一個巨坑，它老是會報各類BUG。爲了減小BUG，它內部就不要使用if指令，而改用show指令。
7. 百度、微信，支付寶小程序是使用hidden指令隱藏元素，而快應用是用 show指令，咱們會用娜娜奇作處理。
8. 組件render的第一行不能是 if， 三元表達式， 短路與， map循環，由於它們會生成block標籤，而快應用的根標籤不能爲block。
9. 因爲label下不能放text，所以不建議用label標籤。
10. swiper與其餘小程序有差別，每次只展現一個標籤，之後使用咱們封裝的swiper組件。
11. 快應用的標籤都必須有閉標籤，如<input />必須寫成<input ></input>。若是用娜娜奇，咱們會幫你作處理。
12. 快應用有div沒有view，其餘小程序有view沒有div，建議統一使用div，娜娜奇作處理
13. 不支持data-*屬性，在編譯時會發出警告

事件系統

1. 事件不能冒泡。
2. 事件不區分onXXX, catchXXX, 與其餘小程序不同，所以建議不想冒泡時必定要本身stopPropagation
3. input事件中，它的onChange事件至關於onInput事件。
4. 事件沒有pageX, pageY。
5. 暫時沒有touchstart, touchmove, touchend事件，據說下一版有。

其餘

1. 快應用沒有頁面組件這一律念，爲了實現與其餘小程序同樣的效果，如往下拉，tabBar, 分享，咱們是用了一層PageWrapper組件。若是你在app中使用enablePullDownRefresh，由於這會逼使娜娜奇在PageWrapper加一個list, list-item標籤。上面提過，list-item很坑的。所以不要在app中使用enablePullDownRefresh，而是在特定的頁面的config指定enablePullDownRefresh。

<template>
    <anu-page-wrapper>
        <div>
            <div style="{{props['style1233'] }}"><text>async/await</text></div>
            <div><text>status:</text><text>{{state.status}}</text></div>
            <anu-button>試一試</anu-button>
        </div>
    </anu-page-wrapper>
</template>

1. 頁面組件與普通組件的文件名都統一用index.js，這是方便咱們兼容各類小程序的路由系統。
2. 咱們想作日誌收集，在App退出時，快應用是觸發onDestory事件， 在其餘小程序是觸發onHide事件。

目前就發現這些，若是你們有新的發現請告通咱們。GITHUB提ISSUE或Qtalk找我都行。
https://github.com/RubyLouvre...