avalon如何在移動端使用

cnio 發(fā)布于2019-08-21 10:54 / 1691人閱讀

摘要：移動端與端最大的區(qū)別是事件系統(tǒng)不一樣，并且移動端上的瀏覽器對新支持比較好。因?yàn)槲覀兛梢杂米鳛楹诵?，加上移動事件?gòu)建在這個(gè)目錄下提供了許多事件，并不是我們都會用到的。順便一提，在移動端最大兩個(gè)項(xiàng)目是吉野家與銀聯(lián)錢包，都上億級別的東西。

移動端與PC端最大的區(qū)別是事件系統(tǒng)不一樣，并且移動端上的瀏覽器對新API支持比較好。因?yàn)槲覀兛梢杂胊valon.modern.js作為核心，加上移動事件構(gòu)建avalon.mobile.

avalon2在這個(gè)目錄下提供了許多事件，并不是我們都會用到的。因此挑選用到的模塊加上就行。

比如我們用到swipe事件。

點(diǎn)擊下載zip，然后打開src 文件夾，建一個(gè)avalon.mobile.js

var avalon = require("../dist/avalon")
require("../src/gesture/swipe")

module.exports = avalon

然后打開webpack.config.js

entry配置項(xiàng)改成

entry: {
        avalon: "./src/avalon", //我們開發(fā)時(shí)的入口文件
        "avalon.modern": "./src/avalon.modern",
        "avalon.test": "./src/avalon.test",
        "avalon.next": "./src/avalon.next",
        "avalon.mobile": "./src/avalon.mobile"
    },

執(zhí)行webpack命令就能成功打包

perf目錄下建立一個(gè)html測試文件



    
        TODO supply a title
        
        
        
        
        
    
    
        TODO write content

注意移動端的事件都只能以ms-on-xxx 或:on-xxx方式綁定。事件對象里應(yīng)該有大家想要的屬性。

順便一提，avalon在移動端最大兩個(gè)項(xiàng)目是吉野家與銀聯(lián)錢包APP，都上億級別的東西。

云服務(wù)器 GPU云服務(wù)器華為云服務(wù)器移動端使用教程在云服務(wù)器端如何配置html 請教如何在云服務(wù)器架設(shè)服務(wù)端 linux下如何掛在移動硬盤

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86383.html

相關(guān)文章

吐槽專用

摘要：最終選擇了兼容到的，終于使用上框架，雖然它只是個(gè)。沒有對比就沒有傷害本來想著技術(shù)棧統(tǒng)一，移動端也準(zhǔn)備使用。于是，之后對移動端的技術(shù)選型上更加慎重了，最終采用了文檔更漂亮的。易用還真不易用，坑還真多。吐槽 avalon.js 歷史背景需求重大調(diào)整，所有業(yè)務(wù)推倒重來（pc端主要任務(wù)涉及管理后臺類型的網(wǎng)站）；開發(fā)周期很緊，過年前要上線；公司pc端業(yè)務(wù)要求兼容到ie8； 2015年前...

zxhaaa 2019-08-22 10:36 評論0 收藏0
avalon2初體驗(yàn)

摘要：最近因項(xiàng)目進(jìn)展需求對現(xiàn)有項(xiàng)目進(jìn)行重構(gòu)，由于目前項(xiàng)目還未實(shí)現(xiàn)真正意義上的前后端分離后續(xù)會循序重構(gòu)實(shí)現(xiàn)，在時(shí)間緊產(chǎn)品循序迭代的情況下，想一次性實(shí)現(xiàn)前后端分離精力實(shí)在有限主要是前端開發(fā)人力不足。最近因項(xiàng)目進(jìn)展需求對現(xiàn)有項(xiàng)目進(jìn)行重構(gòu)，由于目前項(xiàng)目還未實(shí)現(xiàn)真正意義上的前后端分離（后續(xù)會循序重構(gòu)實(shí)現(xiàn)），在時(shí)間緊產(chǎn)品循序迭代的情況下，想一次性實(shí)現(xiàn)前后端分離精力實(shí)在有限（主要是前端開發(fā)人力不足）。所...

youkede 2019-08-01 15:51 評論0 收藏0
一步步編寫avalon組件03：切換卡組件

摘要：那么組件容器是被誰替換呢當(dāng)然是組件。我們使用來定義組件時(shí)，必須有一個(gè)屬性，它是一個(gè)模塊，它會轉(zhuǎn)換為組件。一個(gè)組件可以擁有個(gè)元素，它們的值不能重復(fù)。好了，我們看一下切換卡是如何做的。本章開始介紹slot機(jī)制。 slot是WEBComponent引進(jìn)的東西，叫做插槽。在瀏覽器中，它為一個(gè)content元素。不過有資料表明，它會更名為slot。并且在其他語言的模板引擎中，slot標(biāo)簽更為...

kbyyd24 2019-08-22 10:35 評論0 收藏0
《從零構(gòu)建前后分離的web項(xiàng)目》：前端了解過關(guān)了嗎？

摘要：前端基礎(chǔ)架構(gòu)和硬核介紹技術(shù)棧的選擇首先我們構(gòu)建前端架構(gòu)需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術(shù)前瞻性，好的技術(shù)架構(gòu)可能日后會方便的擴(kuò)展，減少重構(gòu)的次數(shù)，即使重構(gòu)也不需要大動干戈，我通常選型技術(shù)棧會參考以下三點(diǎn)一提出自身業(yè)務(wù)的需求是 # 前端基礎(chǔ)架構(gòu)和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

lbool 2019-08-23 11:44 評論0 收藏0
《從零構(gòu)建前后分離的web項(xiàng)目》：前端了解過關(guān)了嗎？

摘要：前端基礎(chǔ)架構(gòu)和硬核介紹技術(shù)棧的選擇首先我們構(gòu)建前端架構(gòu)需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術(shù)前瞻性，好的技術(shù)架構(gòu)可能日后會方便的擴(kuò)展，減少重構(gòu)的次數(shù)，即使重構(gòu)也不需要大動干戈，我通常選型技術(shù)棧會參考以下三點(diǎn)一提出自身業(yè)務(wù)的需求是 # 前端基礎(chǔ)架構(gòu)和硬核介紹 showImg(https://segmentfault.com/img/remote/146000001626972...

cgspine 2019-08-19 11:06 評論0 收藏0