快應用的開發注意點

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

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

下面就展開描述吧vue

CSS層node

  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 這些方式指定顏色值,但快應用只支持前兩種。

標籤層面git

  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-*屬性,在編譯時會發出警告

事件系統github

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

其餘web

  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...小程序

相關文章
相關標籤/搜索