需求：

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

因為涉及投票，評論，關注等功能（每個功能都當做一個組件），所以一個富文本編輯器是無法實現的。

生成的h5活動頁面，還有幾種環境：公司APP內，外部瀏覽器，微信&QQ內置瀏覽器。

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

?

兩個項目支持：

　　那么實現這一套，需要兩個項目，一個項目是活動模板編輯器，一個是前端展示h5頁面。

?

活動模板編輯器：

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

? ? ? （1）組件：每個組件對應屬性，可以填寫相應內容

?

?

?

　　（2）內容容器：一個可視的容器，把上圖相應組件拖拽到內容容器中進行排版

　　

　　（3）生成json：生成一個json，供h5獲取，根據相應規則展示。下面這個json是當前項目生成的。

這個json還不夠完善，給到h5的json需要經過后端處理，比如根據用戶的登錄狀態，會有不同的標示和狀態展示

[{"type": "user","userId": 37907899,"avatar": "/male.png","author": "蒲xx",},{"type": "title","title": "這是一個有所有組件的測試活動"},{"type": "tag","items": [{"id": 0,"name": "標簽"}]},{"type": "title","text": "測個試","id": 1467788578568},{"type": "content","text": "那么我們就來做個測試，你喜歡哪個？","id": 1467788579375},{"type": "user","userId": "10001280","id": 1467788578375,"avatar": "/avatar/141153987724884.jpg","author": "張師","isFollow": false},{"type": "vote","title": "你喜歡吃什么程序員","voteId": 1,"items": [{"itemId": 1,"name": "大衛"},{"itemId": 2,"name": "飛狐"},{"itemId": 3,"name": "菜鍋"},{"itemId": 4,"name": "狼笛生"},{"itemId": 5,"name": "子慕"}],"id": 1467788580095},{"type": "image","name": "默認圖片","src": "/FvZvDcUNHGUxZoC5hKuHBdJstWyD","id": 1467788581943}]

?

?

?

　　好，這個項目說完了，反正不是我做的。哈哈。

?

前端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) {//index code... })

?

　　（4）通過接口，我們獲取到json，對json進行處理。

　　　　　大致處理代碼如下：

var map = {title: [TitleMod, TitleEntity],user: [UserMod, UserEntity],content: [ContentMod, ContentEntity]};for(var i = 0, len = this.data.content.length; i < len; i++) {item = this.data.content[i];if(map[item.type]) {var entity = new map[item.type][1]({data: this.data.content[i]})var mod = new map[item.type][0]({view: this,entity: entity});mod.render();} }

　　以上代碼，就是進行一個匹配，匹配到對應type，插入數據，載入模板到頁面，并且渲染。

　　　　

最終效果：

　　

　　

?

總結：

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

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

• 　　在APP外打開h5頁面，我們需要引流到APP，需要調用一些跳轉協議。
• 　　如果用戶未下載APP，需要引導下載。
• 　　在APP內打開h5未登錄，需要引導登錄，跳轉登錄協議。
• 　　在APP內需要通過橋接協議獲取用戶登錄信息，發送給后端，后端生成登錄態。
• 　　需要調用app內的分享協議，打開分享功能
• 　　微信分享這些功能當然也要有
• 　　商量接口、調試接口

?

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

• 　　fastclick引用問題：

　　　　　　在微信、qq的內置瀏覽器和小部分瀏覽器中，fastclick會影響video標簽的觸摸事件。

　　　　最開始以為是X5內置不支持video，點擊播放沒有反應。但是有時候又突然能點擊，概率很小。

　　　　后來又以為是第一次播放必須通過手動play才能播放。

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

• 　　后端登錄態問題，這個問題主要在后端，不過咱們也是配合了的。
• 　　需求矛盾，需求沖突，這個難免，具體情況不方便說~

?

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的组件化h5活动模板的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。