You can quickly and efficiently develop your own applications based on niucloud-admin, and then we will explain how to quickly develop application components based on niucloud-admin.
How third-party developers can develop DIY components to extend the renovation function.
What is a DIY component?We call each small feature that can be added to a custom page a component.
These DIY widgets can be used on their own or open to other users (developers, end users). Extensions to DIY components are typically implemented by customizing them in third-party plugins. A plug-in can be a full-fledged business system, or it can be as small as a single DIY widget or a few DIY page components.
Steps to develop DIY page components
1. Create a directory of custom plug-ins, located in niucloud addon For example, hello world, then the final component root directory is niucloud addon hello world
2. In the Addon Hello World App Dict DIY directory, create Componentsphp file (created manually if the above directory does not exist).
Here are a few relevant documents to illustrate.
components.Dictionary definition of PHP DIY page components.
links.Dictionary definition of php hyperlinks.
pages.PHP DIY Page Description Definition, also known as Page Data Definition.
template.PHP DIY Template Definition.
Open componentsphp file for editing.
return [
basic' => [
title' => get_lang('dict_diy.component_type_basic'),'list' => [
hellotext' => [
title' => 'hello text','icon' => 'iconfont-iconhuiyuanzhongxin','path' => 'edit-hello-text','support_page' => ['uses' => 0,'sort' => 10007,'value' => [
height' => 20
Structure description: basic is the classification that needs to be placed in the component. Basic is the default classification of the system standard. Users can customize the category, and the category will automatically appear on the DIY page, and the category name defined by the category will be automatically displayed.
The title section indicates the name of the category that the self-defined component wants to place, and the following ** is loaded by the language pack (refer to how to use the language pack), and the developer can also write it directly'title' => 'I wrote the DIY component'
title' => get_lang('dict_diy.component_type_basics')
The list section is an array structure. Multiple DIY components can be included at the same time.
Here, hellotext is the name of the component I wrote.
title component title.
icon component icon.
path component path (where the step 5 file is located).
The support page indicates which DIY page templates the component can appear and use, and if it is empty, it means that any custom page can load and use the component.
uses the number of portlets added to the page. If =0, you can add any of these components to the page. If =1, only one component can be added to the page.
sort component.
valueDefine the fields and parameters of the component.
1.If you want to add some hyperlinks to the system for other places to call the relevant functions of the component when developing the component, you need to create linksphp file (created manually if the above directory does not exist).If you don't need this when developing a component, this step can be omitted.
Edit the contents of the file.
return [
system_link' => [
title' => get_lang('dict_diy.system_link'),'child_list' => [
name' => 'hello_world_info', page name.
title' => get_lang('dict_diy.hello_world_info'), page title.
url' => '/pages/hello_world/info', the view address of the page.
is_share'=> 1 Whether it can be shared. ,'hello_world_link' => [
title' => get_lang('dict_diy.hello_world_link'),'child_list' => [
name' => 'hello_world_index','title' => get_lang('dict_diy.hello_world_index'),'url' => '/pages/hello_world/index','is_share' => 1
In this way, when the niucloud-admin framework installs this plugin, it will automatically load the hyperlinks you have defined. Where other components need to reference hyperlinks, the hyperlinks you wrote will automatically appear.
1. You may want to add some custom page templates to the system when developing components, you need to create a template in the Addon Hello World App Dick DIY directoryphp file (created manually if the above directory does not exist).If you don't need this when developing a component, this step can be omitted. For the actual function, normally speaking, most of the pages are fixed page development, and individual pages are customized and open to user configuration. It is also possible to have a system composed entirely of fixed pages. Or the same page can support custom configurations at the same time, including fixed pages for users to choose to use. The niucloud-admin framework is fully supported.
Edit the contents of the file.
return [
diy_hello_world_index' => [
title' => get_lang('dict_diy.page_hello_world_index'),'page' => 'pages/hello_world/index',],'diy_hello_world_info' => [
title' => get_lang('dict_diy.page_hello_world_info'),'page' => 'pages/hello_world/info',], so that when the niucloud-admin framework installs this plugin, it will automatically load the custom page template you defined.
1. You may want to add some custom page data to the system when developing components, you need to create pages in the Addon Myctl App Dick DIY directoryphp file (created manually if the above directory does not exist).If you don't need this when developing a component, this step can be omitted.
Edit the contents of the file.
return [
diy_index' => [
hello_world_index'=> [ Page ID.]
title" => "Hello World homepage", page name.
cover' => '', page cover image.
preview' => '', page preview.
desc' => '', page description.
mode' => 'diy', page mode: DIY: Custom, fixed: fixed.
Page data source.
data" => [
global" => [
title" => "Hello World home page","pagebgcolor" => "#f8f8f8",'bgurl' => '','imgwidth' => '','imgheight' => '',"bottomtabbarswitch" => true,"template" => [
textcolor' => "#303133","pagebgcolor" => "","componentbgcolor" => "","toprounded" => 0,"bottomrounded" => 0,"elementbgcolor" => "","topelementrounded" => 0,"bottomelementrounded" => 0,"margin" => [
top" => 0,"bottom" => 0,"both" => 0,'topstatusbar' => [
bgcolor' => "#ffffff",'istransparent' => false,'isshow' => true,'style' => 'style-1','textcolor' => "#333333",'textalign' => 'center',],'popwindow' => [
imgurl' => "",'imgwidth' => '','imgheight' => '','count' => -1,'show' => 0,'link' => [
name' => "","value" => [
path" => "edit-image-ads","id" => "4640ld4k1pu0","componentname" => "imageads","componenttitle" => "Advertising","uses" => 0,"list" => [
link" => [
name" => "","imageurl" => "static/resource/images/diy/banner.png","imgwidth" => 750,"imgheight" => 320,"id" => "2xuytp7622w0","ignore" => ["pagebgcolor" => "","componentbgcolor" => "","toprounded" => 0,"bottomrounded" => 0,"elementbgcolor" => "","topelementrounded" => 0,"bottomelementrounded" => 0,"margin" => [
top" => 0,"bottom" => 0,"both" => 0
In this way, when the niucloud-admin framework installs this plugin, it will automatically load the custom page data you defined.
Through the above operations, the development and configuration of this back-end component is ready. If you install the plugin at this time, you will find that the component you developed is already displayed in the component list when editing the page. Just nothing is functional.
6.Develop the background setting function of the component.
In the addon hello world admin src views DIY components directory of the plugin, create edit-hello-textvue file.
Edit the file.
template>
Text set h3>
el-form-item>
el-form>
div>
div>
slot>
div>
template>
script lang="ts" setup>
import from '@/lang'
import usediystore from '@/stores/modules/diy'
const diystore = usediystore()
diystore.editcomponent.ignore = ignores common attributes.
defineexpose({}
script>
style lang="scss">
horz-blank-slider
style>style>
1.The next step is to develop the foreground functionality of the specific component. The ** file of the component is placed on the Addon Uni-App Components DIY
The following is the function of the specific component.
template>
Demo plugin text – custom components.
view>template>
script setup lang="ts">
import from 'vue';
import usediystore from '@/stores/diy';
const props = defineprops(['component', 'index']);
const diystore = usediystore();
const diycomponent = computed(()=> else
const warpcss = computed(()=> )script>style>
At this point, a custom component has been developed.