我相信我们的读者里有很多都是原生浏览器爱好者，比如 Chrome 、 Edge 或者是 Safari ，我用的就是 Chrome 。我非常喜欢 Chrome 干净简洁的界面，但是有些时候会发现这个浏览器在功能上也有一点太“干净简洁”了，于是乎我就开始研究起了 Chrome 插件，于是乎我就发现了我今天要推荐的 Tampermonkey ……

Tampermonkey是个什么东西？

Tampermonkey ，俗称“油猴”，是一款在浏览器上运行和管理脚本的插件。所谓脚本就是一段代码，它们能够优化您的网页浏览体验。安装之后，有些脚本能为网站添加新的功能，有些能使网站的界面更加易用，有些则能隐藏网站上烦人的部分内容。

有了 Tampermonkey ，你能够轻松有效地使用和管理网页脚本，让你的上网体验更加舒适。

你需要准备什么？

Chrome浏览器

这款插件除了Chrome之外还支持 Microsoft Edge 、 Safari 、 Opera Next 和 Firefox。

如何使用？

首先下载安装插件……


图片是chrome在应用商城中的的截图

如何安装插件

脚本我一般是在 Greasy Fork 这个网站上下载，步骤非常简单，找到你想安装的脚本，点一下安装此脚本就行了。

这个插件能干什么？

脚本数量可以说是数不胜数，我在这里给大家推荐几个我自己常用的。

视频去广告、音乐直接下载、百度网盘直接下载等功能

在Greasy Fork 中直接安装

示例图片
1.vip视频解析+去广告

2.vip音乐下载

问题

写【草书文档】这个应用的时候用到了目录树，相关配置挺多的，留存一下。
jstree中文官网
jsttee英文官网
英文官网要比中文的版本高一些，所以用要用github最新版的，看文档就都差不多了。

代码解析

$("#menu").jstree({
                    "core": {
                        "check_callback" : true,
                        "themes": {"stripes": true},
                        "data": d.menu
                    },
                    contextmenu   : {
                        items : function(node){
                            let menu = {
                                createCatalog  : {
                                    label   : "新建目录",
                                    icon    : "fa fa-folder-open",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"catalog"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建目录";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                createPage : {
                                    label: "新建文档",
                                    icon: "fa fa-file-o",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"page"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建文档";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                rename  : {
                                    label: "重命名",
                                    icon: "fa fa-share",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.edit(obj);
                                    }
                                },
                                delete  : {
                                    label: "删除",
                                    icon: "fa fa-times",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        if(inst.is_selected(obj)) {
                                            inst.delete_node(inst.get_selected());
                                        } else {
                                            inst.delete_node(obj);
                                        }
                                    }
                                },
                            }
                            if(node.type == "page"){
                                // 文档-重命名、删除
                                delete menu.createCatalog;
                                delete menu.createPage;
                            }
                            return menu;
                            
                        }
                    },
                    types : {
                        root    : {
                            icon  : "fa fa-home",
                            valid_children : ["catalog","page"]
                        },
                        catalog   : {
                            icon  : "fa fa-folder-open",
                            valid_children : ["catalog","page"]
                        },
                        page      : {
                            icon  : "fa fa-file-o",
                            valid_children : []
                        }
                    },
                    plugins : ["contextmenu", "dnd", "search","state", "types", "wholerow"]
                }).on("changed.jstree",function(e,d){
                    // console.log(d)
                    // if(d.node.children.length == 0 && d.node.original.type == "page"){
                    //     console.log(d.node.id)
                    // }
                });
 复制

问题

搞地产活动的H5页面，有个自动播放音乐的按钮，安卓手机自动播放正常，苹果手机中就会出现不自动播放的情况，而且点击播放按钮还是可以播放音乐的。

 复制

解决代码

<audio id="back_music" autoplay="" loop="" src="{if !empty($base['backmusic'])}{php echo tomedia($base['backmusic']);}{else}../addons/ruifan_yaoyiyao/static/background_music.mp3{/if}" preload="auto"></audio>
<div id="play_button">
    <img src="../addons/ruifan_yaoyiyao/images/audio.png" width="100%" />
</div>

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('back_music');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
 复制

前言

自己有个利用miniprogram-ci上传微信小程序的想法，这里设计到了nodejs npm的知识，先从一个hello world Web项目开始，再慢慢编写相关接口。

涉及

• nodejs
• npm
• 多进程
• express
• miniprogram-ci

实现过程

一、创建node项目

新建个项目文件夹node_wxapp 然后创建项目配置文件

cd 项目文件
mpn init
 复制

进入到项目所在的目录之后我们就可以直接执行npm init,执行了npm init之后,会让我们填写一些配置信息，如果还不知道怎么填写的话可以一路回车，因为我已经配置过了，所以这里就直接贴图：

• package name:你的项目名字叫啥
• version:版本号
• description:对项目的描述
• entry point:项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
• test command:项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
• git repository:如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
• keywirds:项目关键字（我也不知道有啥用，所以我就不写了）
• author:作者的名字（也就是你叫啥名字）
• license:发行项目需要的证书（这里也就自己玩玩，就不写了）

最后文件中出现package.json文件其主要内容有：

{
  "name": "node_wxapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js" // 后添加的，主要是为了npm start自动运行
  },
  "author": "",
  "license": "ISC"
}
 复制

二、安装依赖

这里用到了web项目，所以用express框架

npm install express --save
npm install miniprogram-ci --save
 复制

这里在项目目录中会生成node_module文件夹和package-lock.json文件

三、创建编辑项目主文件index.js

1.输出hello world

var express = require('express');
var app = express();
 
//  主页输出 "Hello World"
app.get('/', function (req, res) {
   console.log("主页 GET 请求");
   var data = {"code":0,"data":"123"};
   res.send("Hello world");
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
})
 复制

这里直接在项目文件npm start，可以看到命令行打印应用实例，访问地址为 http://:::8081.
打开浏览器输入http://127.0.0.1:8081即可看到页面的hello world

2.进程管理

驻场的最后一天，小伙伴列的合并碰到了问题，帮忙解决一下。

效果如图：

具体代码：

<el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="amount1"
          label="数值 1（元）">
        </el-table-column>
        <el-table-column
          prop="amount2"
          label="数值 2（元）">
        </el-table-column>
        <el-table-column
          prop="amount3"
          label="数值 3（元）">
        </el-table-column>
      </el-table>
 复制

js部分

export default {
    data(){
        return {
          // 模拟后台返回数据
          tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, {
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
            }, {
              id: '12987124',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
            }, {
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
            }, {
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }, {
              id: '12987126',
              name: '王小虎3',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }, {
              id: '12987126',
              name: '王小虎2',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }, {
              id: '12987126',
              name: '王小虎2',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }],
        needMergeArr: ['name', 'id'], // 有合并项的列
         rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
        };
    },
    methods:{
            /**
             * @description 实现合并行或列
             * @param row:Object 需要合并的列name 如:'name' 'id'
             * @param column:Object 当前行的行数，由合并函数传入
             * @param rowIndex:Number 当前列的数据，由合并函数传入
             * @param columnIndex:Number 当前列的数据，由合并函数传入
             *
             * @return 函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象
             * 参考地址：https://element.eleme.cn/#/zh-CN/component/table#table-biao-ge
            */
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                // 没办法循环判断具体是那一列 所以就只好写了多个if
                if (column.property === 'name') return this.mergeAction('name', rowIndex, column);
                if (column.property === 'id') return this.mergeAction('id', rowIndex, column);
            },
            /**
             * @description 根据数组来确定单元格是否需要合并
             * @param val:String 需要合并的列name 如:'name' 'id'
             * @param rowIndex:Number 当前行的行数，由合并函数传入
             * @param colData:Object 当前列的数据，由合并函数传入
             *
             * @return 返回值为一个数组表示该单元格是否需要合并; 说明: [0,0]表示改行被合并了 [n+,1]n为1时表示该单元格不动,n大于1时表示合并了N-1个单元格
            */
            mergeAction(val, rowIndex, colData) {
                let _row = this.rowMergeArrs[val].rowArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                return [_row, _col];
            },
            /**
             * @description 根据数组将指定对象转化为相应的数组
             * @param arr:Array[String] 必填 必须是字符串形式的数组
             * @param data:Array 必填 需要转化的对象
             *
             * @return 返回一个对象
             * 例：rowMerge(['name','value'], [{value:'1', name:'小明'}, {value:'2', name:'小明'}, {value:'3', name:'小明'}, {value:'1', name:'小明'}, {value:'1', name:'小明'}])
             * 返回值: {
             *          name:{
             *            rowArr: [5, 0, 0, 0, 0]
             *            rowMergeNum: 0,
             *          },
             *          value: {
             *            rowArr: [1, 1, 1, 2, 0],
             *            rowMergeNum: 3
             *          }
             *        }
            */
            rowMergeHandle(arr, data) {
              if (!Array.isArray(arr) && !arr.length) return false;
              if (!Array.isArray(data) && !data.length) return false;
              let needMerge = {};
              arr.forEach(i => {
                needMerge[i] = {
                  rowArr: [],
                  rowMergeNum: 0
                };
                data.forEach((item, index) => {
                  if (index === 0) {
                    needMerge[i].rowArr.push(1);
                    needMerge[i].rowMergeNum = 0;
                  } else {
                    if (item[i] === data[index - 1][i]) {
                      needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                      needMerge[i].rowArr.push(0);
                    } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                    }
                  }
                });
              });
              return needMerge;
            }
          }
    },
    mounted(){
        this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData); // 处理数据
    }
}
 复制