yii2扩展

2016-07-08 鲁鲁槟 1

一、QQ、微信、微博、Github 第三方登录

1.1、安装 lulubin/yii2-oauth

composer require --prefer-dist lulubin/yii2-oauth dev-master

1.2、配置

在components中增加如下内容

'components' => [
    'authClientCollection' => [
        'class' => 'yii\authclient\Collection',
        'clients' => [
            'qq' => [
                'class' => 'lulubin\oauth\Qq',
                'clientId' => '***',
                'clientSecret' => '***',
            ],
            'weibo' => [
                'class' => 'lulubin\oauth\Weibo',
                'clientId' => '***',
                'clientSecret' => '***',
            ],
            'weixin' => [
                'class' => 'lulubin\oauth\Weixin',
                'clientId' => '***',
                'clientSecret' => '***',
            ],
            'github' => [
                'class' => 'yii\authclient\clients\GitHub',
                'clientId' => '***',
                'clientSecret' => '***,
            ],
        ]
    ]
]

1.3、在登录操作的控制器下

class SiteController extends Controller
{
    public function actions()
    {
        return [
            'auth' => [
                'class' => 'yii\authclient\AuthAction',
                'successCallback' => [$this, 'successCallback'],
            ],
        ];
    }

    public function successCallback($client)
    {
        $id = $client->getId();
        $attributes = $client->getUserAttributes();
        var_dump($id, $attributes);
    }
}

1.4、在登录界面添 加以下代码

use yii\helpers\Html;
use lulubin\oauth\assets\AuthChoiceAsset;
AuthChoiceAsset::register($this);
<div class="form-group other-way">
    <?=Html::a('',['/site/auth','authclient'=>'qq'],['class'=>'qq'])?>
    <?=Html::a('',['/site/auth','authclient'=>'weibo'],['class'=>'weibo'])?>
    <?=Html::a('',['/site/auth','authclient'=>'weixin'],['class'=>'weixin'])?>
    <?=Html::a('',['/site/auth','authclient'=>'github'],['class'=>'github'])?>
</div>

1.5、申请上述第三方的 APP ID 和 APP KEY

(1)QQ 互联

(2)微信开放 平台

(3)新浪微博开放平台

(4)Github Developer applications

QQ、微信、微博的申请比较麻烦,时间久、网站需要备案;Github 的申请则十分迅速,建议先申请这个测试。

二、检测访问网站的设备

2.1、下载安装

lulubin/yii2-component-devicedetect

composer require --prefer-dist lulubin/yii2-component-devicedetect "dev-master"

2.2、在配置文件中添加

'bootstrap' => ['devicedetect'],
'components' => [
    'devicedetect' => [
        'class' => 'lulubin\devicedetect\DeviceDetect'
    ],
]

2.3、使用

var_dump(Yii::$app->params['devicedetect']);
var_dump(Yii::$app->devicedetect->isMobile());
var_dump(Yii::$app->devicedetect->isTablet());
var_dump(Yii::getAlias('@device'));

三、富文本编辑器 redactor

3.1、安装

composer require --prefer-dist lulubin/yii2-widget-redactor "dev-master"

3.2、界面预览

3.3、使用

①、配置 php fileinfo 扩展

打开 php.ini 文件去掉 extension=php_fileinfo.dll 前面的分号即可

②、配置 modules

'modules' => [
    //使用默认配置
    'redactor' => 'lulubin\redactor\RedactorModule',
],
'modules' => [
    'redactor' => [
        'class' => 'lulubin\redactor\RedactorModule',
        //修改默认配置
        'uploadDir' => '@webroot/uploads',
        'uploadUrl' => '@web/uploads',
        'imageAllowExtensions'=>['jpg','png','gif']
    ],
],

③、视图

<?= lulubin\redactor\widgets\Redactor::widget(['name' => 'redactor']) ?>
<?= $form->field($model, 'redactor')->widget(lulubin\redactor\widgets\Redactor::className()) ?>
<?= $form->field($model, 'redactor')->widget(lulubin\redactor\widgets\Redactor::className(), [
    'clientOptions' => [
      'lang'=>'zh_cn',
        //更多插件,请查看assets/plugins
        'plugins' => ['fontcolor','fontsize','fontfamily','fullscreen','imagemanager','table','textexpander']
    ]
])?>

④、自定义 RedactorModule

A、复制一份 vendor/lulubin/yii2-widget-RedactorModule.php 到 components 文件夹

B、修改命名空间 namespace app\components;

C、修改 modules 配置

 'modules' => [ 'redactor' => 'app\components\RedactorModule' ],

D、配置完后你就可以尽情修改 app\components\RedactorModule.php 文件了,比如你可以修改 文件上传的目录

public function getOwnerPath()
{
    //原来是三级目录,现在是一级目录了
    return date('Y').date('m').date('d');     
}

四、百度编辑器 ueditor

4.1、安装

composer require --prefer-dist lulubin/yii2-widget-ueditor "dev-master"

4.2、界面预览

4.3、使用方法

①、 配置 controller

public function actions()
{
    return [
        'upload' => [
            'class' => 'lulubin\ueditor\UEditorAction',
        ]
    ];
}

②、View 视图

<?= lulubin\ueditor\Ueditor::widget(['name'=>'ueditor'])?>
<?= $form->field($model,'ueditor')->widget('lulubin\ueditor\UEditor');?>

③、Configuration 配置

A、语言配置

ueditor 只支持 2 种语言,en-us 和 zh-cn ,默认跟随系统语言 Yii::$app->language,可以通过2种方式设置:
方法一、修改系统语言,在 main.php (高级版) 或者 web.php (基础版)添加 'language' => 'zh-CN'

方法二、实例化的时候配置语言选项

<?= lulubin\ueditor\UEditor::widget(['clientOptions' => ['lang' =>'en']);?>

B、修改图片保存路径

public function actions()
{
    return [
        'upload' => [
            'class' => 'kucha\ueditor\UEditorAction',
            'config' => [
                "imageUrlPrefix"  => "", //图片访问路径前缀,默认为 web 目录
                "imagePathFormat" => "images/{yyyy}/{mm}/{dd}/{time}{rand:6}", //上传图片保存路径
                "imageRoot" => Yii::getAlias("@webroot"),
                "filePathFormat" => "images/post/{yyyy}/{mm}/{dd}/{time}{rand:6}", //上传文件保存路径
            ],
        ]
    ];
}

C、编辑器相关配置

请在view 中配置,参数为clientOptions,比如定制菜单,编辑器大小等等,具体参数请查看 UEditor 官网文档

<?= lulubin\ueditor\UEditor::widget([
    'clientOptions' => [
        //编辑区域大小
        'initialFrameHeight' => '200',
        //定制菜单,个人推荐菜单
        'toolbars' => [
            [
                'fullscreen', 'source', 'undo', 'redo','simpleupload','insertorderedlist',
                'fontsize','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat',
                'forecolor', 'backcolor', 'lineheight', 'link','inserttable','attachment','insertunorderedlist',
            ],
        ]
]);?>

五、Yii2 使用 jquery 插件 —— lightbox

5.1、下载 lightbox

解压后将 lightbox.min.js 放置 web/js,将 lightbox.css 放置 web/css

5.2、使用

<?php
use app\assets\AppAsset;
AppAsset::addScript($this,"@web/js/lightbox.min.js");
AppAsset::addCss($this,"@web/css/lightbox.css");
?>
<div id="img">
    <img lay-src="/images/demo/lightbox01.jpg" height="200px"/>
    <img lay-src="/images/demo/lightbox02.jpg" height="200px"/>
</div>
<?php 
$js = <<<JS
    //bootstrap图自适应,让文章中页面的非gif图片自适应大小
    $("#img").find("img").each(function(){
        $(this).wrap("<a href='"+$(this).attr('src')+"' data-imagelightbox='e'>");
    });
JS;
$this->registerJs($js,\yii\web\View::POS_END);
?>

5.3、演示

六、yii2 下拉加载更多

6.1、使用layui前端框架

①下载layui

解压后放置web目录下

②、使用

<?php
namespace app\controllers;
use modules\post\models\Post;

class DemoController extends \app\controllers\FrontController
{
    public function actionLayui()
    {
        return $this->render('layui');
    } 
    public function actionGetMorePost()
    {
        $offset = \Yii::$app->request->get('offset');
        $model = Post::find()->where(['is_visible'=>1])->offset($offset)->limit(50)->select('title')->asArray()->all();
        return json_encode($model);
    }
}
<?php
use modules\post\models\Post;
use app\assets\AppAsset;
use yii\helpers\Url;
AppAsset::addCss($this, '@web/layui/css/layui.css');
AppAsset::addScript($this, '@web/layui/layui.js');
$page = ceil(Post::find()->where(['is_visible'=>1])->count()/50);
$res= Post::find()->limit(50)->all();
?>
<div class='panel panel-default'>
    <div class='panel-body'>
        <ul class='media-list'>
            <?php foreach ($res as $r):?>
            <li class='media'><div class='media-body'><div class='media-heading media-action'><?=$r['title']?></div></div></li>
            <?php endforeach;?>
        </ul>
    </div>
</div>
<?php $this->beginBlock('testJS')?>
    layui.use('flow', function(){
        var flow = layui.flow;
        flow.load({
            elem: '.media-list', //流加载容器
            done: function(page, next){ //加载下一页
                  $.ajax({
                      type: 'get',
                      data: {offset:$('.media-list li').length},
                      url: "<?=Url::toRoute(['/demo/get-more-post'])?>",
                      success: function(res){
                          res = JSON.parse(res);
                        var lis = [];
                        for(var i=0;i < res.length;i++){
                            lis.push("<li class='media'><div class='media-body'><div class='media-heading media-action'>"+res[i]['title']+"</div></div></li>");
                        }
                        //当总的页面大于等于总的页数时,加载完毕
                        next(lis.join(''), page >= <?=$page?> ? 0 : 1);
                    },
                    error: function(){
                        alert('网络错误,请稍后重试');
                    }
                  });
            }
        });
    });
<?php $this->endBlock()?>
<?php $this->registerJS($this->blocks['testJS'],\yii\web\View::POS_END)?>

③、效果预览

6.2、使用 dropload.min.js

①、下载,放置 web/js 目录下

②、代码

namespace app\controllers;
use modules\post\models\Post;

class DemoController extends \app\controllers\FrontController
{
    public function actionDropLoad()
    {
        return $this->render('dropLoad');
    }
    public function actionGetMorePost()
    {
        $offset = \Yii::$app->request->get('offset');
        $model = Post::find()->where(['is_visible'=>1])->offset($offset)->limit(50)->select('title')->asArray()->all();
        return json_encode($model);
    }
}
<?php
use modules\post\models\Post;
use app\assets\AppAsset;
use yii\helpers\Url;
AppAsset::addScript($this, '@web/js/dropload.min.js');
$count = Post::find()->where(['is_visible'=>1])->count();
$res= Post::find()->limit(50)->all();
?>
<div class='panel panel-default'>
    <div class='panel-body'>
        <ul class='media-list'>
            <?php foreach ($res as $r):?>
            <li class='media'><div class='media-body'><div class='media-heading media-action'><?=$r['title']?></div></div></li>
            <?php endforeach;?>
        </ul>
    </div>
</div>
<?php $this->beginBlock('test')?>
    $('.panel').dropload({
        scrollArea : window,
        autoLoad: false,
        loadDownFn : function(me){
            $.ajax({
                url: "<?=Url::toRoute(['/demo/get-more-post'])?>",
                type: "get",
                data: {offset:$('.media-list li').length},
                success: function(res){
                    res = JSON.parse(res);
                    var lg = '';
                    for(var i=0;i < res.length;i++){
                        lg += "<li class='media'><div class='media-body'><div class='media-heading media-action'>"+res[i]['title']+"</div></div></li>";
                    }
                    $(".media-list").append(lg);
                     if($(".media-list li").length >= <?=$count?>){
                        me.noData(); //记载完成后显示加载完毕
                        me.lock('down'); //锁定下拉
                    }
                    me.resetload(); //每次数据加载完,必须重置
                },
                error: function(){
                    alert('网络错误,请稍后重试');
                    me.resetload(); //即使加载出错,也得重置
                }
            });
        }
    });                                                                                                                                                    
<?php $this->endBlock()?>
<?php $this->registerJS($this->blocks['test'],\yii\web\View::POS_END)?>

③、效果预览

七、页面加载进度条

7.1、下载安装

 lulubin/yi2-widget-pace

composer require --prefer-dist lulubin/yii2-widget-pace "dev-master"

7.2、在布局文件main.php文件中添加

<div class="container">
    <?=lulubin\pace\Pace::widget()?>
     <?= $content ?>
</div>

7.3、效果预览

八、yii2 图片懒加载

8.1、下载 layui

解压后放置web目录下

8.2、使用方法

<?php 
use app\assets\AppAsset;
AppAsset::addScript($this, '@web/layui/layui.js');
?>
<div>
    <img lay-lay-src="/images/demo/lightbox01.jpg" height="200px"/>
    <img lay-lay-src="/images/demo/lightbox02.jpg" height="200px"/>
    <img lay-lay-src="/images/demo/lightbox01.jpg" height="200px"/>
</div>
<div>
    <img lay-lay-src="/images/demo/lightbox01.jpg" height="200px"/>
    <img lay-lay-src="/images/demo/lightbox02.jpg" height="200px"/>
    <img lay-lay-src="/images/demo/lightbox01.jpg" height="200px"/>
</div>
<?php $this->beginBlock('layuiPicLazyLoadJS')?>
    layui.use('flow', function(){
          var flow = layui.flow;
          //当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
          flow.lazyimg();
    });
<?php $this->endBlock()?>
<?php $this->registerJS($this->blocks['layuiPicLazyLoadJS'],\yii\web\View::POS_END)?>

8.3、效果预览

共 2条评论

  • marine0516
    marine0516 评论于2018-01-06

    请问按你的做法弄好了,但是怎么使用呢,找不到你的说明文件

    鲁鲁槟
    回复于 2018-01-08 回复

    使用方法的步骤3中,获取用户信息

发表评论

您需要登录后才可以评论。登录 | 立即注册
阅读 2909 4