元件化h5活動模板的實現

2021-09-08 18:52:20 字數 2494 閱讀 5918

需求:

實現一套靈活的活動元件模板,編輯人員只需要開啟後台,拖拽相應元件,填入相應內容,最終就生成乙個活動頁面。

幾種狀態:登入,未登入,遊客狀態等(狀態具體內容不做解釋)。

兩個專案支援:

那麼實現這一套,需要兩個專案,乙個專案是活動模板編輯器,乙個是前端展示h5頁面。

活動模板編輯器:

(1)元件:每個元件對應屬性,可以填寫相應內容

(2)內容容器:乙個可視的容器,把上圖相應元件拖拽到內容容器中進行排版

(3)生成json:生成乙個json,供h5獲取,根據相應規則展示。下面這個json是當前專案生成的。

這個json還不夠完善,給到h5的json需要經過後端處理,比如根據使用者的登入狀態,會有不同的標示和狀態展示

[,,

]},,,

,,,,

,],"id": 1467788580095},

]

好,這個專案說完了,反正不是我做的。哈哈。

前端h5展示實現:

該我出場了,目前我們知道,我們獲取的大致資料格式了。但是這些我都先不管。

我需要實現這個專案的流程如下:

1. 新建專案,劃分好功能和專案結構 

2. 實現各個元件的展示和互動

3. 開啟乙個入口檔案,引入所有元件。

4. 入口檔案中獲取json,根據type的內容找到相應元件,載入頁面,渲染。

(1)新建專案,劃分好功能和專案結構 :

這裡主要是寫好乙個入口檔案,新建乙個元件資料夾裡面寫所有元件,最終通過requirejs在入口檔案把所有元件引用進來。

元件結構如下:

(2) 具體元件實現跳過不說

(3)當元件寫好,在入口index中引入,大致如下:

define([

//content

'commonpath/content/en.content',

'commonpath/content/mod.content',

//title

'commonpath/title/en.title',

'commonpath/title/mod.title',

//user

'commonpath/user/en.user',

'commonpath/user/mod.user',

], function

(

//content

contententity,

contentmod,

//title

titleentity,

titlemod,

//user

userentity,

usermod

) )

(4)通過介面,我們獲取到json,對json進行處理。

大致處理**如下:

var map =;

for(var i = 0, len = this.data.content.length; i < len; i++) )

var mod = new map[item.type][0]();

mod.render();

}}

以上**,就是進行乙個匹配,匹配到對應type,插入資料,載入模板到頁面,並且渲染。

最終效果:

總結:

開發過程中,問題還是很多的,專案看起來內容不算太多,但確實也不是那麼簡單的。

除了以上步驟,開發過程中還要處理一些事情:

商量介面、除錯介面

開發過程中也會因為一些bug耽誤了很多時間。

總之最終發現是fastclick的原因,加上nofastclick類在dom上就解決了。不過這個問題確實也離不開x5瀏覽器自身的問題。

打完收工,不容易,不容易~

元件化h5活動模板的實現

需求 實現一套靈活的活動元件模板,編輯人員只需要開啟後台,拖拽相應元件,填入相應內容,最終就生成乙個活動頁面。幾種狀態 登入,未登入,遊客狀態等 狀態具體內容不做解釋 兩個專案支援 那麼實現這一套,需要兩個專案,乙個專案是活動模板編輯器,乙個是前端展示h5頁面。活動模板編輯器 活動模板編輯器主要實現...

h5的語義化部分 H5的語義化標籤

這次給大家帶來h5的語義化標籤,使用h5語義化標籤的注意事項有哪些,下面就是實戰案例,一起來看一下。html5新特性 簡潔的doctype html5 只有乙個簡單的文件型別 表示瀏覽器會按照標準模式解析。簡單易記的編碼型別 你現在可以在meta 標籤中使用 charset 指令碼和鏈結無需type...

H5中date元件的格式化

前一陣子想把date中yyyy mm dd的格式改為mm dd yyyy,存到資料庫中,查了好多資料,沒找到合適的方式。後來在同事的幫助下,雖然用到的方式有點偏,但總歸是實現了。所謂偏方治大病。如下 var datemin document.getelementbyid datemin value ...