加载项从入门到上线（二），批量插入二维码，部署加载项

插入二维码

今天继续实现第二个按钮功能，将选中列的单元格数据转换成二维码插入到单元格上

先安装依赖

插入二维码代码

实现效果，

部署到外网

假设你已经做好了上面的准备工作，接下来就是把我们的加载项部署到服务器上了

编译项目

build时选在线插件

处理一个小问题

wpsjs publish 出来的publish.html 多了一个test123，这个估计是wpsjs的bug，我们把这个无效的加载项信息删掉

上传CDN

前端的资源文件我们一般会上传到CDN上，当然，这步不是必要的，不需要的=可以选择跳过，我这里用的是七牛的

vite.config.js 也要修改一下，这一步要在 build 前做好

将html 文件部署到服务器

有些人可能会问了，我都已经将所有文件上传到CDN了，为什么还要部署到服务器

如果你的加载项以后不更新了，是可以直接用CDN的html地址的，如果还要更新，最好就是部署到服务器上，因为CDN的缓存时间很久，如果后面你更新了，估计要等半天或者好几天，用户才能看到最新的

完整的部署shell

# 编译项目
wpsjs build
wpsjs publish -s https://wpsadd.example.com/jsplugindir/
# 上传CDN
qshell='./tools/qshell'
${qshell} account "$AK" "$SK" "name"
${qshell} qupload ./qiniuconfig
# 部署服务器
tar -zcvf dist.tar.gz wps*
scp dist.tar.gz root@example.com:/usr/share/nginx/html/wpsaddin
ssh -t root@example.com <<EOF
    cd /usr/share/nginx/html/wpsaddin
    rm -rf jsplugindir wps-addon-publish
    tar -zxvf dist.tar.gz
    mv wps-addon-build jsplugindir
    cp jsplugindir/index.html .
    rm dist.tar.gz
EOF

nginx配置文件

server {
    listen 443;
    ssl on;
    ssl_certificate ssl/xxx.pem;
    ssl_certificate_key ssl/xxx.key;
    server_name wpsadd.example.com;
    charset UTF-8;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    gzip on;
    gzip_types application/json application/javascript text/css text/html;
    gzip_comp_level 6;
    gzip_vary on;
    location / {
        add_header Cache-Control no-store;
        root /usr/share/nginx/html/wpsaddin/;
        try_files $uri $uri/ /index.html;
    }
}

配置好这些后，重启 nginx ，用浏览器打开 https://wpsadd.example.com/wps-addon-publish/publish.html 应该就可以打开加载项的安装界面了

这个安装链接有点长，我第一次发布项目用的这是这个，搞的用户每次安装要输入一串字符串，体验非常不好，我们可以再弄一个短域名

server {
    listen 443;
    ssl on;
    ssl_certificate ssl/xx.pem;
    ssl_certificate_key ssl/xx.key;
    server_name d.example.com;
    charset UTF-8;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    gzip on;
    gzip_types application/json application/javascript text/css text/html;
    gzip_comp_level 6;
    gzip_vary on;
    location / {
        root /usr/share/nginx/html/wpsaddin/wps-addon-publish/;
        index publish.html;
        try_files $uri $uri/ /publish.html;
    }

}

这样用户直接打开 https://d.example.com 就可以安装加载项了

还等什么，赶紧行动起来吧