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

关键词：微擎　　人人商城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直接开的话可能

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

来源：https://www.cnblogs.com/gushengyan/p/11903605.html

标签

loop