一个项目一篇随笔之淘宝口令复制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直接开的话可能

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

分割线

emmmm，这个方法似乎有些手机不兼容，复制不了，有个clipboard.js可以完美兼容

开头引用3个文件

    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js">script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>

中间做个循环

        <ul >
            <li v-for="(item,index) in topList" key="index">
                <div class="thumb">
                    <img v-bind:src=item.img alt="">
                div>
                <div class="info">
                    <div class="name"><span class="save">立省<i>{{item.save}}i>span>{{item.title}}div>
                    <div class="hot">{{item.hot}}div>
                    <div class="tag"><span>{{item.tag}}span>仅限{{item.stock}}件div>
                    <div class="price"><i>￥i>{{item.price}}   <span>券后价span> <button class="copy-btn" v-bind:data-clipboard-text="item.code">立即领券button>div>
                div>
                <div class="clear">div>
            li>
        ul>

结尾js走一遍

    clipboard.on('success', function(e) {
        layer.open({
            skin: 'redskin' //只对该层采用myskin皮肤
            ,title: false
            ,content: "恭喜，口令复制成功
请打开手机陶宝查看"
        });
        
    e.clearSelection();
    });

貌似是用了vue的组件，久了不看也不记得了，姑且记下来先