fresh模板组件制作第一课 - 制作自己第一个组件

模板教程   © 文章版权由 admin 解释,禁止匿名转载

#楼主# 2021-2-5

fresh模板,是一款很强大的DIV模板!

但是拥有强大的DIV功能就必须学会如果制作组件!

所以本期教程,就是教大家如何制作一个属于自己的DIV独立的模板组件!


【第一步:创建组件】

已经拥有模板方法:

首先我们登陆模板后台,在左侧点击界面排版!

如果没有页面随便先创建一个页面,然后点击右侧的【编辑页面内容】

然后在表格的上面,点击【自制组件】

然后输入相关信息:

文本文档

组件名: 组件的中文名称,供使用者查看

组件别名:就是对应的组件的目录名,这个名称必须为英文大小写和下划线!且独一无二!可以使用自己名字作为前戳!

版本号:就是当前的版本号,必须使用标准的版本号比如 :1.0、2.0、2.0.1等

组件分类:根据你组件的类型自行选择

组件作者:填写你名字,或网名,或艺名等..

数据类型:帖子模块,会带调用帖子的相关数据。用户模块,会带调用用户的相关数据。纯HTML,不会调用任何数据库的纯HTML内容

组件配置:顾名思义,就是组件是否自带配置项

然后点击创建,会在/Plugin/xr_fresh/block/组件别名 

创建一个新的目录!

还未购买模板的创建组件方法:

找个空白目录,新建一个文件夹,这个文件夹就是上面对应的【组件别名】

然后按照下面的目录结构创建文件夹和相关文件:


test 组件别名,就是在这个目录下面的
├─view                  组件HTML目录
│  ├─fresh_view.php     组件的HTML模板文件
│  ├─fresh_style.css    组件CSS文件
├─conf.html             组件配置HTML
├─fresh_image.png       组件演示图
├─info.php              组件信息


上面就是一个组件的目录结构,首先在创建的组件别名下创建一个info.php文件

代码如下

Php

return array(

    'name'     => '测试组件', //组件名

    'dir'          => 'test', //组件别名

    'version'   => '1.0.0', //组件版本

    'class'       => '3', //组件分类

    'author'    => '渲染', //组件作者

    'type'        => 'thread', //数据类型

);

可以参考上面的输入信息,对着的参数类型!

其中 组件分类 数字对应的类型:

文本文档

1. 图片列表

2. 文字列表

3. 静态组件

4. 滑动组件

5. 广告组件

6. 插件组件

7. 其他组件

[/code=text]

数据调用类型对应:

[code=text]

thread  -> 帖子数据

user      -> 用户数据

html      -> 纯HTML静态组件

如果你的组件有配置项的话,就创建一个conf.html文件:

如果有这个文件,说明你组件拥有自己的独立配置项!


然后,基本这个组件就能被模板识别了!


thread作用:

表示用户选择组件后,可以在该页面的组件列表里通过用户的自由选择来调用获取的帖子列表内容!

user作用:

用户选择组件后在后台的组件列表内通过自定义选择来控制调用的用户数据



如果组件是thread的话,默认会根据上面用户选择的条件,在数据库中进行数据调用!

然后组件就可以获取到相关数据了!


【第二步:开发组件】

开发组件,首先咱们必须要懂得HTML、CSS、JavaScript、和PHP相关的知识!

至少是了解它们!

然后我们来到之前创建好的组件目录,

在组件目录下新建一个view目录,如果您使用的【自制组件】自动生成的话,一般都有这个目录!

然后新建一个fresh_view.php文件,

然后在文件第一行写入:

Php

<?php !defined('HY_PATH') && exit('HY_PATH not defined.'); ?>

用来防止他人非法请求该文件!如果您使用的是【自制组件】自动生成的话,一般默认会自带这个文件和上面的第一行!


首先来了解每个组件fresh_view.php默认会定义一个如下变量:

Php

$data = [

    'data'=>array(...),

    'conf'=>array(...),

    'info'=>array(...)

];

就是一个为数组类型的$data变量!$data变量下拥有三个数据

'data' => 返回的是根据组件类型调用数据库的数据

'conf' => 是当前组件的独立的配置

'info'  => 对应的是组件目录下info.php的数据


其中如果组件类型为thread :

[data] => Array
        (
            [0] => Array
                (
                    [tid] => 1
                    [fid] => 1
                    [uid] => 2
                    [pid] => 1
                    [title] => 帖子标题
                    [summary] => 帖子简介
                    [atime] => 1571665500
                    [etime] => 1571665500
                    [euid] => 0
                    [btime] => 1572248039
                    [buid] => 0
                    [views] => 11238
                    [posts] => 0
                    [goods] => 1
                    [nos] => 0
                    [img] => 
                    [img_count] => 5
                    [top] => 0
                    [files] => 0
                    [reply] => 0
                    [digest] => 1
                    [gold] => 0
                    [state] => 1
                    [user_info] => Array
                        (
                            [uid] => 2
                            [user] => 作者用户名
                            [pass] => b5b4b0bf4d76202e919df8d9bbd0de87
                            [email] => 1947361208@qq.com
                            [salt] => 60b1052a
                            [threads] => 2
                            [posts] => 2
                            [post_ps] => 0
                            [atime] => 1572248039
                            [gid] => 2
                            [gold] => 14
                            [credits] => 4
                            [etime] => 1582871432
                            [ps] => 
                            [fans] => 0
                            [follow] => 0
                            [ctime] => 1582871190
                            [file_size] => 0
                            [chat_size] => 0
                            [ban_post] => 0
                            [ban_login] => 0
                            [sex] => 0
                            [rmb] => 0.00
                            [emailstatus] => 0
                            [phonestatus] => 0
                            [phone] => 
                        )

                    [user] => 空条承太郎
                    [avatar] => Array
                        (
                            [a] => upload/avatar/xxxxx-a.jpg
                            [b] => upload/avatar/xxxxx-b.jpg
                            [c] => upload/avatar/xxxxx-c.jpg
                        )

                    [image] => Array
                        (
                            [0] => /upload/tid/1/bd1b4bd7e2b545fb8ebff975d20a67ad.jpg
                            [1] => /upload/tid/1/431f0788bced7e03f78961a6420c3c97.jpg
                            [2] => /upload/tid/1/eb5b6014565b3f24e35587efefc5542d.jpg
                            [3] => /upload/tid/1/66733d418e9bcaf229527d22ee81e04b.jpg
                            [4] => /upload/tid/1/f8eb92c57c34510fb97ae513c5fe52dc.jpg
                            [5] => 
                        )

                    [image_count] => 5
                )

          [1]=>..........

如果组件类型是thread则$data['data']里面的数据就是用户之前在后台通过数据调用配置所获取到的帖子列表数据!

而且这个帖子列表数据默认带了一个user_info参数,这个参数是楼主的hy_user表的数据

而组件开发者只需要通过php 的foreach就能输出这些数据,无需再通过其他PHP代码来调用数据让组件开发者更快的开发组件!


如果组件是user类型的这默认调用hy_user表的数据返回的数据形式和hy_thread的形式是一样的,如下:

[data] => Array
        (
            [0] => Array
                (
                    [uid] => 1
                    [user] => admin
                    [pass] => 990ea863317b0afe468278cf20f035cb
                    [email] => admin@qq.com
                    [salt] => cf72fa33
                    [threads] => 5
                    [posts] => 58
                    [post_ps] => 0
                    [atime] => 1571746552
                    [gid] => 1
                    [gold] => 72118
                    [credits] => 81795
                    [etime] => 0
                    [ps] => 我是个性签名
                    [fans] => 0
                    [follow] => 4
                    [ctime] => 1584084474
                    [file_size] => 1009221
                    [chat_size] => 5307
                    [ban_post] => 0
                    [ban_login] => 0
                    [sex] => 2
                    [rmb] => 0.00
                    [emailstatus] => 0
                    [phonestatus] => 0
                    [phone] => 
                )
            [1]=>......

上面是user类型的$data['data']数据!

后期会增加更多的类型供开发者以及用户调用!


那么html纯静态类型的组件则表示不会对数据进行任何调用,用户也无法在后台对数据调用选项进行配置!

也就是说没有这个配置项!

而且$data['data']这个变量则会是一个空的数组变量!


然后是$data['conf']的数据

这个变量里包含了组件的配置!

也就是之前所说的conf.html里用户填写的一些配置项数据!

如果你开发的组件可以由用户进行其他的配置则可以在组件目录内创建这个文件,然后在这个文件填写html


例如:

Html

<div class="layui-form-item">
    <label class="layui-form-label">广告图片</label>
    <div class="layui-input-block">
      <input type="text" name="image" value="{#empty($inc['image'])?'':$inc['image']}" required placeholder="请输入图片链接" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">链接</label>
    <div class="layui-input-block">
      <input type="text" name="url" value="{#empty($inc['url'])?'':$inc['url']}" required placeholder="请输入点击广告跳转的地址" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">广告文字</label>
    <div class="layui-input-block">
      <input type="text" name="text" value="{#empty($inc['text'])?'':$inc['text']}" required placeholder="展示在右下角" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">打开方式</label>
    <div class="layui-input-block">
      <input type="radio" name="open" value="1" title="新窗口打开">
      <input type="radio" name="open" value="2" title="直接打开" checked>
      <input type="radio" name="open" value="3" title="pjax无刷新打开(仅支持自己网站链接)" checked>
    </div>
</div>

由于模板的后台采用的layui进行开发,所以form的一些界面样式可以去https://www.layui.com/doc/查看

上面的html在后台所展示的:


开发者无需放置提交按钮等,后台会默认自带提交按钮!开发者只需要将form里面的input等各项参数写好即可!

当用户保存设置后在view/fresh_view.php文件内的$data['conf']可以获取所有的配置数据!


而上面的html结构所产生的配置数据如下:

        [conf] => Array
        (
            [image] => http://www.ktwap.net/View/xr_fresh_pc/pic/1.jpg
            [url] => http://ktwap.net
            [text] => 参数
            [open] => 1
        )

数据保存的方式是根据input所提交的post请求而保存的!


注意: 由于组件配置默认是空的所有开发者需要在开发时对数据调用是要做判断例如empty()或isset()来做数据是否存在的判断,如果不存在最好是有默认的数据,而防止前台展示时没有任何内容!


最后是$data['info']的数据:

        [info] => Array
        (
            [id] => 3 //属于该组件独一无二的ID值
            [pid] => 5 //当前组件所在页面的页面ID
            [name] => 测试组件 //组件名
            [dir] => test //组件英文名
            [config] => null //组件的其他配置,作为保留参数,以后可能会增加
            [show] => 1 //是否显示该组件,如果不显示,一般得到的都是1
            [sort] => 3 //排序,组件的排列顺序,越大越靠后,
            [desc] => 我是描述 //用户对该组件的描述.
        )

这个数据保存的是组件的相关信息的数据,上面已经对这些内容做了详细介绍!


然后就是fresh_view.php的详细内容了:

这个文件支持HYBBS的模板形式作为内容,也支持PHP的模板形式作为内容!

例如:

输入

{$user.user}

在使用该组件时前台就会输出:当前访问网站的用户名了!

也支持PHP:

<?php echo $user['user']; ?>


都是差不多的!这里也可以输入其他的一些HTML代码和JS代码!


其中组件的dom被一个id为 fresh_page_block_3 的div标签包围!

而后面的3表示这个组件的唯一id值!

如果要通过JQ插件来获取这个组件内的dom则可以使用$("#fresh_page_block_3")来获取!

一个页面的fresh_page_block_3是独一无二的!

例如轮播图组件的dom




注意:因为一个页面可以调用多个组件!

所以在写fresh_view.php样式的时候!需要做独一无二处理,所以在$data['info']['id']提供了一个属于该页面独一无二的ID值!

在JS开发上面,获取组件的某个DOM例如:

$('#test')时,如果用户再该页面上使用了两个相同的组件时就会有两个id="test"的标签出现!

所以在调用是最好使用$('#test_{$data.info.id}')这个实际在页面展示的就是$('#test_1')了,唯一性就出来了!希望各位在开发组件时注意唯一性!!!



接下来就是fresh_style.css文件的作用了!

这个文件是组件的CSS样式文件:

可以将组件的样式写入到这个文件!

这个样式文件为纯CSS文件,不支持任何其他语言!!


以上只是对组件开发的一些简单教程,以及一两个组件的相关的代码效果!

而开发者可以根据上面的一些实例代码对组件更好的开发!


开发者可以将自己开发的组件在:

http://fresh.ktwap.net/index.php/index/my/index.html

提交上传!

(点击进去后若提示未登陆请等待几秒跳转到登陆界面)

首先您需要联系QQ:1947361208申请成为开发者!

然后再在"产品中心->开发者->添加组件"这里上传你已经制作好的组件!


通过审核后便会对用户进行展示 ,下载 , 以及购买!!


我们会在每个礼拜6对开发者提交的提现申请进行结算操作! 提现的手续费为3%!



若你是插件的开发者想对fresh模板进行适配的可以将类型设置为6插件组件,然后你就可以在fresh模板中的任意页面调用您插件的数据进行展示!这里就不过多进行讲解了!开发方法也是同上面一样。


另外用户可能涉及了一些自定义页面的!而自定义页面的链接则是

http://{域名}/page/{$pid}.html

上面的pid所对应的是$data['info']['pid']的数据

例如:http://ktwap.net/page/5.html


以上便是所有组件开发的全部教程!欢迎各位开发者对模板组件进行开发上传,通过组件的销售来增加自身的收入!


附件是一个轮播图组件的实例

感谢支持!






附件列表

成为第一个回答人

评论

登录后才可发表内容
  • 主题

    951

  • 帖子

    21666

  • 关注者

    53

Copyright © 2019 凯特网.   Powered by HYBBS 2.3.4  

Runtime:0.0793s Mem:2117Kb