元件化h5活動模板的實現

需求：

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

幾種狀態：登入，未登入，遊客狀態等（狀態具體內容不做解釋）。

兩個專案支援：

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

活動模板編輯器：

活動模板編輯器主要實現3個功能：各個元件，內容容器 ，生成json。

（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
) )

大致處理**如下：

var map =;

for(var i = 0, len = this.data.content.length; i < len; i++) )
var mod = new map[item.type][0]();
mod.render();
}} 

最終效果：

總結：

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

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

商量介面、除錯介面

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

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

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

元件化h5活動模板的實現

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

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 ...