更新记录

1.0.0（2021-04-22）

1.0.0版本发布

平台兼容性

uni-admin插件通用教程：

uni-admin是一套基于uniCloud的开源应用管理端系统。详见：uni-admin 基础框架
本插件是uni-admin系统的扩展插件，为开发者的admin系统添加功能。
需先确保本机有uni-admin项目，然后将此插件导入到uni-admin项目下。
如本机没有uni-admin项目，需要先在HBuilderX中新建项目 -> uni-app项目 -> 选择uni-admin模板。
如本机的uni-admin项目版本过老，可能无法使用新插件，需及时升级本机的uni-admin项目。详见uni-admin项目更新日志

【me-page-design】页面装修插件 (uniCloud admin端)

基于uniCloud admin, 可快速自定义装修APP页面, 可配置图片热区,轮播banner,视频,浮层弹窗...

安装admin端

1. 更新HBuilderX, 至少3.1.0+版本, 因为使用到uni_modules
2. 在插件市场打开本插件页面, 在右侧点击使用 HBuilderX 导入插件, 选择uniCloud admin项目点击确定
3. 在/uniCloud目录，右键运行云服务空间初始化向导, 关联云空间和部署uniCloud admin所需的云函数和数据库
4. 在/uni_modules/me-page-design/uniCloud/cloudfunctions/me-page-design，右键上传部署云函数
5. 在/uni_modules/me-page-design/uniCloud/database/db_init.json，右键初始化数据库
6. 在pages.json中添加页面路径

   "pages": [
   // ……其他页面配置
   // 页面装修
   {
       "path": "uni_modules/me-page-design/pages/design/list",
       "style": {
           "navigationBarTitleText": "页面装修"
       }
   },
   {
       "path": "uni_modules/me-page-design/pages/design/edit",
       "style": {
           "navigationBarTitleText": "编辑装修页面"
       }
   }
   ]

安装APP端

APP端集成文档: https://ext.dcloud.net.cn/plugin?name=app-page-design

admin端的使用

1. 运行uniCloud admin项目到Chrome
2. 初次使用时, 点击菜单管理,会自动生成待添加菜单, 选中页面装修即可添加菜单
3. 点击页面装修的菜单,可查看示例,也可按照指引完成APP页面的装修

APP端的使用

场景一: 打开装修页

// 查询别名的方式打开
uni.navigateTo({url: "/uni_modules/app-page-design/pages/design?name=xxx"})
// 查询id的方式打开
// uni.navigateTo({url: "/uni_modules/app-page-design/pages/design?id=xxx"})

场景二: tab页是装修页 / 装修组件的单独使用

<template>
    <view>
        <app-page-design :res="res"></app-page-design>
    </view>
</template>

<script>
    import {apiDesignDetail} from '@/uni_modules/app-page-design/api/api.js'
    export default {
        data() {
            return {
                res: {}
            }
        },
        onLoad() {
            // 根据name或id查询装修页
            let param = {name: "xxx"} // 或 {id: "xxx"}
            apiDesignDetail(param).then(res=>{
                this.res = res
            })
        }
    }
</script>