介绍

uni-app vue2 小程序端页面组件库；可视化编辑器采用@tmagic

setup

安装组件

注意： 组件库中使用的第三方UI组件@vant/weapp需自行在项目中安装，vant安装

yarn add papa-mp-vue2

使用配置

• vue.config.js

构建配置增加如下配置

module.exports = {
  transpileDependencies: ['papa-mp-vue2'],

  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      },
      symlinks: false
    }
  }
}

• pages.json

修改路由文件，增加easycom选项

{
  "easycom": {
    "custom": {
      "^papa-ui-(.*)": "papa-mp-vue2/src/$1/$1.vue"
    }
  },
  "pages": []
}

使用

<template>
  <papa-ui-page :config="getApp" />
</template>

<script>
// 测试数据
import DSL from '@/dsl.json'

export default {
  data() {
    return {}
  },
  computed: {
    getApp() {
      return DSL
    }
  }
}
</script>

DSL数据结构

{
  "name": "editor",
  "type": "app",
  "id": "nw-ui-editor-20221111",
  "codeBlocks": {},
  "items": [
    {
      "type": "page",
      "id": "page_202211",
      "name": "index",
      "title": "",
      "layout": "relative",
      "style": {
        "position": "relative",
        "left": 0,
        "top": 0,
        "right": "",
        "bottom": "",
        "width": "100%",
        "minHeight": "2000",
        "backgroundImage": "",
        "backgroundColor": "#fff",
        "backgroundRepeat": "no-repeat",
        "backgroundSize": "100% 100%",
        "color": "",
        "fontSize": "",
        "fontWeight": ""
      },
      "events": [],
      "items": [
        {
          "id": "swipe_fc847b06",
          "type": "swipe",
          "style": {
            "width": "auto",
            "height": "200px",
            "borderRadius": "15px",
            "paddingTop": "",
            "paddingBottom": "10px",
            "paddingRight": "10px",
            "paddingLeft": "10px",
            "position": "relative",
            "top": 0,
            "left": 0
          },
          "name": "轮播",
          "autoPlay": true,
          "indicators": true,
          "duration": 3000,
          "list": [
            {
              "name": "轮播3",
              "src": "https://img.niwotech.com/niwo_resource/20221201/eB7IhSg3sNpNEM5ztrBfEPfyyQE2SoD6.jpg",
              "url": "",
              "mode": "fill",
              "backgroundColor": "#FE38AB"
            }
          ]
        }
      ]
    }
  ]
}