首页 > Web开发 > 详细

一个项目一篇随笔之淘宝口令复制H5网页开发

时间:2019-11-21 10:47:15      阅读:100      评论:0      收藏:0      [点我收藏+]

关键词:微擎  人人商城V3  复制到剪贴板  分组循环

1.php分组方法 这个方法可以把整体数组按照关键词字段来分开 sql不会写的用这个还是很合适的

    /**
     * @param array $dataArr 需要分组的数组
     * @param $keyStr string  分组关键字段
     * @return array
     */
    public function dataGroup(array $dataArr,$keyStr)
    {
        $newArr = [];
        foreach ($dataArr as $k => $val) {
            $newArr[$val[$keyStr]][] = $val;
        }
        return $newArr;
    }

因为是结合微擎的人人商城,数组分好了之后在前端用loop循环

{loop $list $index $item}
    循环数据
{/loop}

这个loop我嵌套了两层,没有啥问题,$index打印出来就是索引,感觉跟foreach($list as $k=>$v)是一个意思

2.复制内容

百度了一大堆,最后用了textarea,给需要点击复制的代码给onclick到指定方法,因为我是循环嵌套的,所以需要有个参数,方法如下

    function getCode(id){
        var copyinput = document.getElementById("koulingContent"+id);
        console.log(copyinput);
        copyinput.select();
        document.execCommand("Copy")
        console.log(‘复制‘);
        showMB();
    }

但是在移动端相当于选中了文本框的所有文字,手机键盘会弹出来,所以需要给textarea添加一个readonly属性,代表只读

<textarea  readonly="readonly" style="opacity: 0;width: 1px;height: 1px;" id="koulingContent{$i[‘id‘]}">需要复制的内容</textarea>

千万不能给display:none的style,否则复制不会成功,网上说宽高不能为0;所以我象征性地给个地方让他透明吧(好没有存在感嘤嘤嘤~)

后端没有什么难度,因为是公司接的项目,直接就用微擎的人人商城搭建好了,但是讲道理,如果我用tp5直接开的话可能

这篇先到这里,下一篇我记录一下初接触微擎的心得。

一个项目一篇随笔之淘宝口令复制H5网页开发

原文:https://www.cnblogs.com/gushengyan/p/11903605.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!