一、目標實現

左側：為可用的組件列表，可拖動任一組件到中間的預覽區域

中間：為頁面預覽效果頁面，選中任一組件，可在右側進行參數配置

右側：為組件的參數配置（選中中間的組件時出現），頁面配置（選中頁面管理tab按鈕時出現），組件管理（選中組件管理tab時出現），更改配置，中間的預覽區域立即更新視圖

對于電商類的小程序，這種微頁面有大量的需求，頻繁的改動頁面樣式、結構和內容，以及發布內嵌的H5頁面，后臺做到靈活可配置。可免去頻繁發布小程序的煩惱。

二、開發設計規范

后臺部分

管理后臺文件目錄結構

1. 可將以上的頁面進行模塊拆分：

components目錄放一些常用的組件，leftComponentsPage.vue和rightConfigPage.vue分別為左側和右側的集成組件

configComponents目錄是右側顯示的對應組件和頁面的配置相關的組件，每個組件對應一個配置，封裝成對應的組件

viewComponents目錄放置組件對應的樣式結構代碼，每個組件封裝成一個樣式組件，名稱和配置組件一一對應

details.vue為整合頁面，分別調用左側的leftComponentsPage.vue組件和右側的rightConfigPage.vue組件，以及中間預覽遍歷組件按需加載樣式組件

2.?數據流方向

3.?組件數據格式

以圖片組件為例：

{"image":{"showMethod":"YHYG", // 顯示的排列方式，一行一個"borderWidth":0, "pageMargin":0,"maxImageNum":10,"cornerType":"ZJ","imageType":"normal","showNum":6,"indicator":"style1","items":[{"title":"","imageUrl":"","imageWidth":345,"imageHeight":241,"action":"webview","maAppid":"","maPagePath":"","extLink":"","actionArea":"hotArea","hotAreas":{"width":100,"height":100,"xAxis":128,"yAxis":63}}]} }

image下面為組件的屬性，由云端接口直接返回，items下面的每一項對應單個圖片屬性，右側配置區域可對每個屬性進行配置，每上傳一張圖片，往items里增加一項

4.?視圖組件結構和對應樣式

<template> <!-- 組件1：圖片組件 --> <div class="component-wrapper image-component" :style="wrapperStyle"> <div class="image-list"><div :style="imgItemStyle" class="image-item" v-for="(img, imgIndex) in imgObject.items" :key="imgIndex"><img class="image" :src="img.imageUrl ? img.imageUrl : defaultImg"> <div :class="['hotarea', debugMode ? 'debug' : '' ]" :style="img.hotAreaStyle" @click="redirectPageTo(img.action, img.extLink, img.maAppid, img.maPagePath)" v-if="img.action !== 'nothing'"> </div></div> </div> </div> </template>

類名為component-wrapper的圖層為最外層，寬度為屏幕寬度100%（后臺預覽頁面寬度定為375px），為這個圖層設置左右padding值為組件傳過來的pageMargin的大小

computed: {wrapperStyle() {return {padding-left: this.comData.image.pageMargin + 'px',padding-right: this.comData.image.pageMargin + 'px'}} }

通過傳入組件數據items數組數據，動態計算相關圖層樣式動態綁定到對應的元素上熱區hot-area圖層樣式對象hotAreaStyle根據組件是否開啟點擊交互，是默認全區域還是選定區域計算而來

computed: {imgObject() {this.comData.image.items.map((item) => {if (item.action !== 'nothing') {item.hotAreaStyle = {width: (item.actionArea === 'hotArea' ? item.hotAreas.width : item.imageWidth) + 'px',height: (item.actionArea === 'hotArea' ? item.hotAreas.height : item.imageHeight) + 'px',left: item.actionArea === 'hotArea' ? item.hotAreas.xAxis + 'px' : 0 ,top: item.actionArea === 'hotArea' ? item.hotAreas.yAxis + 'px' : 0}}})return this.comData.image} }

小程序端

1. 小程序端頁面組件開發

小程序端的頁面樣式和結構可以部分復用viewComponents中的代碼，只需將結構標簽div改為view，將img改為image，v-if改為wx:if，v-for改為wx:for對應組件放在根目錄下的custom-components下的microPage目錄里

主頁面放在subpackage下面的microPage下

<view class="page-com" wx:for="{{ comData }}" wx:for-item="item" wx:key="index" wx:if="{{ pageStatus === 'ON' && pageDelete === 'NORMAL' }}"><!-- 圖片組件渲染 --><image-view comData="{{ item.components }}" wx:if="{{ item.comType === 'image' }}" /><!-- 按鈕組件渲染 --><button-view comData="{{ item.components }}" wx:if="{{ item.comType === 'btn' }}" /><!-- 懸浮組件渲染 --><absolute-view comData="{{ item.components }}" showCom="{{ showCom }}" wx:if="{{ item.comType === 'absolute' }}" /> </view>

循環遍歷傳過來的頁面組件數據，渲染不同的組件拿image圖片組件舉例，它的結構代碼

<!-- 組件1：圖片組件 --> <view class="component-wrapper image-component" style="{{ wrapperStyle }}"><view class="image-list"><view class="image-item" wx:for="{{ imgObject.items }}" wx:for-index="imgIndex" wx:for-item="img"wx:key="imgIndex"><image class="image" src="{{ img.imageUrl }}" style="width: {{ img.imageWidth }}px;" wx:if="{{ img.imageUrl }}" mode="widthFix"></image><view class="hotarea" style="{{ img.hotAreaStyle }}" wx:if="{{ img.action !== 'nothing' }}"bindtap="redirectPageTo" data-com="{{ img }}"></view></view></view> </view>

由于小程序里面不支持動態樣式綁定，我們將樣式拼接成字符串，加入到組件列表里，另外后臺傳過來的像素單位是px，需要做轉化rpx

attached() {this.data.comData.image.items.map((item) => {if (this.data.comData.image.action !== 'nothing') {let width = item.actionArea === 'hotArea' ? item.hotAreas.width : item.imageWidthlet height = item.actionArea === 'hotArea' ? item.hotAreas.height : item.imageHeightlet left = item.actionArea === 'hotArea' ? item.hotAreas.xAxis : 0let top = item.actionArea === 'hotArea' ? item.hotAreas.yAxis : 0item.hotAreaStyle = 'width: ' + app.pxToRpx(width) + 'rpx;height: ' +app.pxToRpx(height) + 'rpx;left: ' + app.pxToRpx(left) + 'rpx;top: ' + app.pxToRpx(top) + 'rpx;'}})this.setData({wrapperStyle: 'padding: 0 ' + app.pxToRpx(this.data.comData.image.pageMargin) + 'px',imgObject: this.data.comData.image}) }

像素單位轉化方法封裝在app下

pxToRpx(value) {return value * (750 / this.globalData.system.windowWidth); }

三、開發步驟

后臺部分

1.?增加組件圖標

首先在leftComponentsPage.vue為該組件指定顯示的圖標

comList(val) {val.map((item) = >{switch (item.type) {case 'image':item.icon = 'pic';break;case 'absolute':item.icon = 'absolutebtn';break;case 'btn':item.icon = 'operation';break;default:item.icon = 'pic'break;}}) this.buildComList = val }

2.?給組件增加配置文件

在configComponents目錄下新增?組件名.vue?對應的配置文件，然后在components下的rightConfigPage.vue中引入該組件

<!-- 組件配置 --> <div v-else-if="activeBtn === 'com'"> <!-- 1、圖片組件 --> <image-config v-if="previewComList[selectedComIndex].type === 'image'" v-on="$listeners":configData="previewComList[selectedComIndex]"></image-config> <!-- 2、懸浮按鈕組件 --> <absolute-config v-if="previewComList[selectedComIndex].type === 'absolute'"v-on="$listeners" :configData="previewComList[selectedComIndex]"></absolute-config> <!-- 3、按鈕組件 --> <btn-config v-if="previewComList[selectedComIndex].type === 'btn'" v-on="$listeners":configData="previewComList[selectedComIndex]"></btn-config> </div>

配置文件通過props接收傳過來的configData數據，賦值給本地的data里面的configs，配置文件里的input通過v-mode監聽改變configs，然后通過監聽configs數據調用$emit調用父組件傳過來的方法，達到數據從父組件 -> 孫子組件 -> 父組件的響應式

3.?給預覽頁面增加組件

在viewComponents下新建組件名.vue文件，然后在detail.vue中引入

<div :style="{position: 'relative'}" v-for="(com, comIndex) in previewComList" :key="comIndex"><div :class="['com-area', selectedComIndex === comIndex ? 'border-selected' : '']" @click="selectCom(com, comIndex)"><!-- 組件1：圖片組件 --><image-view :comData="com.configObj" :debugMode="debug" v-if="com.type ==='image'"></image-view><!-- 組件2：懸浮按鈕組件 --><absolute-view :comData="com.configObj" :debugMode="debug" v-if="com.type ==='absolute'"></absolute-view><!-- 組件刪除按鈕 --><div v-if="selectedComIndex === comIndex" class="delete-com-btn" @click="deleteCom(com, comIndex)"><i class="el-icon-delete"></i></div> </div>

小程序端

1.?增加組件對應的視圖組件

在根目錄custom-components下面的landingPage下新建以組件名命名的目錄，里面包含js,json,wxml,wxss文件，在subpackage/landingPage/index.json中引入該組件

"usingComponents": {"image-view": "../../custom-components/landingPage/image/index","button-view": "../../custom-components/landingPage/button/index","absolute-view": "../../custom-components/landingPage/absolute/index" }

在subpackage/landingPage/index.wxml文件中增加組件代碼

<!-- 圖片組件渲染 --> <image-view comData="{{ item.components }}" wx:if="{{ item.comType === 'image' }}" />

最終實現

四.?注意事項

小程序端需要做單位轉化，將傳過來的px統一轉成rpx用

小程序中組件中的wxml文件中每個熱區的hotarea元素需要增加一個監控的class，命名以hotarea-xxx（xxx為后臺定義熱區的時候的命名）

---

總結

以上是生活随笔為你收集整理的微页面设计开发指南的全部內容，希望文章能夠幫你解決所遇到的問題。

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