天道酬勤,学无止境

钉钉小程序+canvas生成公章

公司最近有一个需求,就是想在钉钉小程序上自动生成并上传公章。从网上查了一些资料,发现关于钉钉小程序的比较少,最后发现了这篇博客:https://blog.csdn.net/educast/article/details/79990326,它是html+js+canvas版的,下面是我修改过后的钉钉小程序版的,大体上的方法与原生是一样的

1、先上效果图

2、test.axml页面

<view>
  <view>
    输入公司名称:
    <input id="dw" width="50" type="text" placeholder="请输入公司名称" onInput="bindKeyInput1" />
  </view>
  <view>
      章下面文字:
    <input id="mdtext" width="50" type="text" placeholder="章下面的文字" onInput="bindKeyInput2" />
  </view>
  <canvas id="canvas" width="400" height="400" style="width:200px;height:200px;background:pink;"/>
  <view onTap="createSeal">
    生成公章
  </view>
</view>

3、test.js页面

Page({
  data: {
    company: "",
    name: ""
  },
  onLoad() { },
  bindKeyInput1: function (e) {
    var _this = this;
    _this.setData({
      company: e.detail.value
    })
  },
  bindKeyInput2: function (e) {
    var _this = this;
    _this.setData({
      name: e.detail.value
    })
  },
  createSeal: function () {
    var _this = this;
    var width = 200;
    var height = 200;

    // 1.创建canvas绘图上下文
    const ctx = dd.createCanvasContext('canvas');

    // 2.印章的圆形边框
    ctx.beginPath();
    ctx.setLineWidth(7);  // 设置线条的宽度
    ctx.setStrokeStyle('red');  // 设置边框颜色
    ctx.arc(width, height, 150, 0, Math.PI * 2);  // 画一条弧线
    ctx.stroke(); // 画出当前路径的边框,stroke()描绘的的路径是从 beginPath() 开始计算
    ctx.save(); // 保存当前的绘图上下文

    // 3.绘制印章名称   
    ctx.font = 'bolder 24px SimSun';  // 名称文字大小
    ctx.setTextBaseline('middle');//设置文本的垂直对齐方式
    ctx.setTextAlign('center'); //设置文本的水平对对齐方式
    ctx.setLineWidth(1);  // 设置线条的宽度
    ctx.setFillStyle('red');  // 设置填充色
    ctx.fillText(_this.data.name, width, height + 100);  // 在画布上绘制被填充的文本

    // 4.画五角星
    _this.create5star(ctx, width, height, 30, "#f00", 0);

    // 5.绘制印章单位   
    ctx.translate(width, height);// 平移原点到中心点,  
    ctx.font = 'bolder 30px SimSun'  // 单位文字大小
    var count = _this.data.company.length;// 字数   
    var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度   
    var chars = _this.data.company.split("");
    var c;
    for (var i = 0; i < count; i++) {
      c = chars[i];// 需要绘制的字符   
      if (i == 0)
        // 整个章顺时针旋转150度
        ctx.rotate(5 * Math.PI / 6);
      else
        ctx.rotate(angle);
      ctx.save();
      ctx.translate(125, 0);// 平移到此位置,此时字和x轴垂直,第一个参数是与圆外边的距离,越大距离越近   
      ctx.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴   
      ctx.fillText(c, 0, 5);// 此点为字的中心点   
      ctx.restore();
    }
    ctx.restore();  // 恢复之前保存的绘图上下文

    // 6.将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中
    ctx.draw(false);

    // 7.把当前画布的内容导出生成图片,并返回文件路径
    ctx.toTempFilePath({
      success(res) {
      	// 返回所生成公章的临时资源路径,可以使用dd.uploadFile上传到后台服务器
        console.log(res)
      },
    });
  },

  create5star: function (ctx, sx, sy, radius, color, rotato) {
    ctx.save(); // 保存当前的绘图上下文
    ctx.setFillStyle(color);  // 设置填充色
    ctx.translate(sx, sy);  // 移动坐标原点到中心点,此时x轴水平向右为正,y轴垂直向下为正
    ctx.rotate(Math.PI + rotato); // 顺时针旋转180度,此时x轴垂直向上为正,y轴水平向左为正
    ctx.beginPath();  // 创建路径  
    var dig = Math.PI / 5 * 4;
    // 画法,五角星的连接点都在半径为30的圆周上
    for (var i = 0; i < 5; i++) {// 画五角星的五条边  
      var x = Math.sin(i * dig);
      var y = Math.cos(i * dig);
      ctx.lineTo(x * radius, y * radius);
    }
    ctx.closePath();  // 关闭路径
    ctx.stroke(); // 画出当前路径的边框,stroke()描绘的的路径是从 beginPath() 开始计算
    ctx.fill(); // 对当前路径中的内容进行填充
    ctx.restore();  // 恢复之前保存的绘图上下文
  }
});

参考文档:https://blog.csdn.net/educast/article/details/79990326

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 钉钉小程序图表刷新 antv-f2
    钉钉小程序图表刷新 antv-f2 钉钉小程序引入F2一个页面多个图表图表数据自动刷新 公司有项目拟在钉钉小程序中实现部分功能,其中需要图表展示,经过与echart的比较,最终选择了阿里系的 F2,f2宣传的是“专注于移动,兼容多种环境(Node, 小程序,Weex)”,且有相关支持的文档,没有看到echart对阿里系的小程序支撑。 先上效果图: 钉钉小程序引入F2 首先钉钉小程序如何引入F2图表,点击这里,参考支付宝的内容即可。 f2官方文档点这里 新手建议直接用 npm install @antv/my-f2 的方式引入,不要研究js引入,以及插件化的引入。 一个页面多个图表 我这个程序需要一个页面里有多个图表展示,那么就需要多个 canvas 进行渲染。 图表数据自动刷新 同时,还有需求是点击页签后,图表数据需要刷新,一开始想的是一个页签对应一套图表,页签变化,对应的图表就展示出来,越想这种方式越low,查了半天文档,发现f2 有 chart.changeData(data) 这个方法,马上就上手试一试。问题又来了,点击事件后,如何获取chart 对象,毕竟小程序不像 HTML那么容易通过document进行DOM操作。晚上睡了一觉,第二天突然就想到了全局变量的方式,页面图表init的时候,就把chart 对象赋值给全局对象,页签变动后,直接操作chart对象即可
  • 钉钉小程序部署到Linux服务器上
    服务的程序编译,打包,生成对应得.pid文件 在Maven Projects 窗口中选择项目下Lifecycle 下得compile 执行编译,package 执行打包 在application.java 启动类main方法中添加生成pid得代码 public static void main(String[] args) { //SpringApplication.run(Application.class, args); SpringApplication app = new SpringApplication(Application.class); app.addListeners(new ApplicationPidFileWriter()); app.run(args); } 编写run.sh 的shell 启动脚本,指定jdk启动服务器。 部署过程中的错误: error1.:ERROR (HostAndPort.java:107)- cant resolve localhost address 错误原因:linux服务器主机文件/etc/hosts中没有添加当前服务器主机。 解决方法:1.查看Linux系统的主机名 [root@template conf]# hostname JD3 [root@template conf]# 2.查看/etc
  • 钉钉小程序自动转微信小程序
    花了一些时间 写了一个 钉钉小程序自动转微信小程序的代码 已经发布到了 npm 官网 安装指令 npm install dd2wx -D 使用方法 参考 https://www.npmjs.com/package/dd2wx github 地址 https://github.com/gaoqiang1112/dd2wx 如果好用 欢迎star 自动转换代码 基于正则及 不同api的 向上二次封装 本身并不难 只不过想将复杂反复操作的事情 变成自动话 欢迎 使用及指正 来源:https://blog.csdn.net/gaoqiang1112/article/details/106427007
  • 钉钉小程序以及服务器API开发遇到得坑得收集
    1、钉钉中得文件预览除去使用h5实现只支持将文件上传到钉盘后才可预览,且预览时必须先获取下载权限。 场景1:预览服务器上得文件 流程 1、后台通过获取企业下的自定义空间这个API获取到spaceid 也就是空间id 空间与空间之间是隔离得通过你设置的domain来区分 2、后台将文件通过单步文件上传API上传到钉盘服务器换取media_id最多支持8M 超过需要调用分块上传 3、后台调用保存文件到自定义或审批钉盘空间将文件存入自定义空间根据参数传递 获取到的spaceid和media_id 然后将会返回一个json字符串其中id就是fileid 4、后台调用授权用户访问企业的自定义空间API,获取权限 如果只是预览的话 type传递download ,fileid传递上方获取到的id,domain就是第一步的domain 5、小程序调用小程序jsAPI里的钉盘文件预览根据参数传递fileid、空间id、文件名称等等即可 场景2:预览本地文件 1、后台通过获取企业下的自定义空间这个API获取到spaceid 也就是空间id 空间与空间之间是隔离得通过你设置的domain来区分 2、后台调用授权用户访问企业的自定义空间API,获取权限 type传递download和add ,fileid传递上方获取到的id,domain就是第一步的domain 3、调用小程序jsapi上传附件到钉盘
  • 钉钉小程序不支持rich-text,怎么解析富文本框的内容呢?(uParse )
    忘了说,我使用的是uniapp框架 uni-app的官方给提供了富文本解析器uParse 富文本解析器uParse <template> <div> <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse> </div> </template> import uParse from '@/components/u-parse/u-parse.vue' export default { components: { uParse }, data () { return { article: '<div>我是HTML代码</div>' } }, methods: { preview(src, e) { // do something }, navigate(href, e) { // do something } } } <style> @import url("@/components/u-parse/u-parse.css"); </style> 渲染 Markdown 先将 markdown 转换为 html 即可 npm install marked ```javascript import marked from 'marked' import uParse from '@
  • 本地phpstudy内网穿透配置https
    微信小程序一定要用https访问,于是想着如何在钉钉小程序内网穿透工具基础上配置https访问。先按钉钉文档配置好内网穿透。 https://developers.dingtalk.com/document/resourcedownload/http-intranet-penetration?pnamespace=app 申请并下载证书,这里有两个办法试过可以申请到证书,宝塔面板和阿里都可以,步骤如下 1.选设置好自己的穿透内网域名,然后拿域名去上述两个任意一个平台去申请。 https://www.bt.cn/ https://homenew.console.aliyun.com/home/dashboard/ProductAndService 接下来根据提示申请,注意需要在本地启动内网穿透,按要求将验证文件放入相应目录,验证通过后,十几分钟后证书即可审核通过,然后下载来,解压后,根据自己的服务器配置来部署。我用的是nginx 打开phpstudy面板, 复制两个文件内容到相应文本框内,确定,OK 来源:https://blog.csdn.net/nanyue2004/article/details/115291963
  • HaaS EDU物联网教育开发板来啦!漂亮的不像开发板!
    2021年3月,HaaS EDU K1物联网教育开发板将正式上线。 一款集颜值和内涵于一身的物联网开发利器,云端一体全链路解决方案的积木平台。 下面我们一起来认识下这个小可爱吧! 有别于传统的裸板开发板,HaaS EDU K1外观鲜艳靓丽,透出青春活力。 内置1200mAh锂电池支持移动场景,OLED屏幕和游戏键盘设计提高可玩性。 本品采用阿里专用四核(Cortex-A7双核1GHz和Cortex-M33双核300MHz)高性能MCU-HaaS1000芯片,内置双频Wi-Fi和BT5.0天线。 板载丰富的物联网传感器(加速度、陀螺仪、惯性、磁力计、温湿度、大气压、环境光和声音等),可开发丰富的AIoT应用场景或解决方案。 内嵌的Z8IDA金融级国密芯片,为数据安全保驾护航。 另外,30pin扩展接口和SD卡槽满足更多应用需求,仅一条Type C数据线即可完成烧录、调试和充电,非常方便。 更让人惊喜的是,HaaS EDU K1在出厂的时候就预置了10个开源案例,比如陀螺仪小球,飞机大战,贪吃蛇,电子罗盘等, 针对不同的知识点,让你在玩的过程中就能把知识学了,真正做到寓教于乐。 HaaS EDU K1作为软硬件积木平台,深度集成了AliOS Things物联网操作系统、HaaS轻应用、钉钉小程序和阿里云物联网平台等技术和服务, 您可以轻松的学习和开发云钉端一体全链路实战项目
  • 小程序苹果手机不显示图片安卓正常显示
    做了一个钉钉小程序项目。 明明是两张图片,但是在苹果手机上只显示一张。 后台返回的图片在苹果手机上不显示。在安卓手机上正常显示。 查看了一下后台返回的接口,一个是正常jpg结尾的,一个是有?后又连接字符串的。而有?连接的字符串的图片无法正常显示。 经过后端的不断测试,发现是因为苹果手机不支持webp 解决办法:后端修改数据,或者前端对数据 进行二次处理经过判断后显示页面。 百度一下webp是啥 WebP(发音:weppy)是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。 webp百度的支持。的确说了苹果手机不支持webp。 当前网页浏览器当中,Google Chrome和Opera原生支持静态与动态的WebP格式,而Google Chrome自12版开始支持WebP的渐进式解码功能。此外所有可以原生播放WebM影像的浏览器,也可以透过javascript来显示WebP影像。又Pale Moon 26+浏览器仅支持静态的WebP图像。Firefox浏览器亦在65.0版本支持WebP图像。 网页浏览器GNOME Web和KDE图片浏览器Gwenview也支持WebP。 图像软件当中,Picasa(从3.9版本起)
  • 阿里小蜜新一代智能对话开发平台技术解析
    导读:本次分享的内容是“新一代智能对话开发平台”(Dialog Studio),中文名叫对话工厂,是小蜜家族中的一个做多轮任务型对话开发产品,目标是以平台的方式赋能更多开发者,让所有的对话者能创造自己的多轮对话机器人。大概分为四个部分,主要包括:为什么做平台?“新一代”对话开发平台“一站式”对话开发平台业务应用▌1. 为什么做平台首先给大家举个例子:机器人:您好,这里是114移车热线,您的车挡住了出行,请您移下车好吗?车主:哦,哪个车子啊?机器人:车牌是浙A,尾号是29,请问是您的车吗?车主:啊,什么情况?机器人:这手机登记的是您的号码,您能去看一下吗?车主:什么号码,我,你再说一遍机器人:车牌是浙A,尾号是29,请问是您的车吗?车主:哦,是我的,我打个电话机器人:那请您移一下车好吗?车主:嗯这是一个政务场景上114移车的 case,这个场景是用我们“对话工厂”开发的机器人实现的。114移车 case 只是一个我们真实生活中很小的一个点,还有很多的业务是需要对话机器人来帮助人类解决各种各样的问题,或者减少人类客服成本。比如说在政务的其他领域,我们希望机器人能帮助人来查社保、查医保、查公积金等;在电商领域,我们希望机器人能帮助做售后的客服,帮助消费者来开发票、催发货、查物流等;在电信领域,我们希望机器人能引导用户查话费、查流量等。但是创造一个对话机器人的门槛是非常高的,做一个
  • HaaS软件积木及解决方案总纲
    在物联网方案多样化与场景碎片化等大背景下,基于阿里云物联网数亿设备落地经验,阿里云物联网团队推出了HaaS这个加速AIoT中小开发者的创新平台。HaaS(Hardware as a service)硬件即服务。通过向用户提供物联网场景中的的标准硬件以及嵌入到硬件中的软件驱动及功能模块,为用户提供物联网设备高效开发服务。旨在帮助AIoT中小开发者聚焦业务,能做到低门槛快速组装软硬件积木,实现设备安全上云,加速AIoT创新迭代。 HaaS设备端软件基于阿里云智能自研物联网操作系统AliOS Things。同时创新地推出了HaaS云端钉全链路解决方案,将HaaS设备端,物联网平台,钉钉小程序结合起来,以一个个生动案例的方式,重塑物联网开发方式。开发者使用HaaS这个软硬件积木平台就可完成从传统嵌入式开发进阶到设备端-云平台-前端应用一体的智能化时代。 1、HaaS云端钉全链路解决方案示例 智能小车 : 1小时打造HaaS版小小蛮驴智能车 智能家居:基于HaaS100快速搭建智能家居应用 智能花卉养殖: 一步步打造能手机远程管理的HaaS花卉养植系统 RDID读卡器:基于HaaS100搭建云端一体RFID读卡器 JS语音播报音箱:用JS轻应用与HaaS600实现语音播报音箱 信息屏:HaaS100 OLED信息屏显示案例 4G模组连云: 实战HaaS100搭载4G模组连接阿里云物联网
  • 利用PS制作公章超详细教程
    现实中,要雕刻一枚公章,一般首先使用矢量软件(譬如印章大师。)制作公章图案,然后再通过雕刻机进行雕刻获得一枚公章。如果广告作品或者印刷品中需要公章图案,我们可以在AI或者CDR中制作,也可以在PS中制作。在PS中制作公章图案主要利用沿路径输入文字的功能,将文字环形排列。下面带领大家一起在PS中创建一枚公章图案。 在下方的教程重点内容包括: ◎公章的尺寸规格、文字字体 ◎公章圆边和圆边上的小缺口制作 ◎公章中的五星图形制作 ◎公章中的文字环形排列制作 效果: 步骤: (1)打开PS软件,按Ctrl+N新建文件。设置如下图1。 图1 知识拓展: 一般企业公章是圆形的,其直径是4.1cm(含圆边宽度1mm)。另外,因为我们将把公章图案用于印刷,所以设置分辨率为300像素/英寸,颜色模式为CMYK。 (2)按Ctrl+R显示标尺,效果如图2. 图2 知识拓展: 确保标尺的单位为厘米。如果你无法确认单位,请按Ctrl+K,在弹出的“首选项”对话框中单击左侧的“单位与标尺”选项,然后在右侧设置标尺的单位为“厘米”,如图3. 图3 (3)将鼠标移动到上方的水平标尺上,按下左键向下拖动鼠标至2.5厘米处创建一条水平辅助线,如图4.创建出的辅助线是一条蓝色的细线,如图5。 图4 图5 知识拓展: PS中的辅助线是一种虚拟的线条,可以看得见,但是无法打印出来。按快捷键Ctrl+H可以显示或隐藏辅助线
  • DevOps建设之基于钉钉OA审批流的自动化上线
    目录1、概述1.1 现有上线流程描述1.2 钉钉OA审批与生产上线的结合2、总体实现思路3、流程描述3.1 泳道图3.2 流程描述4、关键实现4.1、连接器的创建4.2、审批单的创建4.3、接口程序开发5、小结“DevOps”一词是由英文 Development(开发)和 Operations (运维)组合而成,但它所代表的理念和实践要比这广阔的多。DevOps 涵盖了安全、协作方式、数据分析等许多方面。但它是什么呢?DevOps 强调通过一系列手段来实现既快又稳的工作流程,使每个想法(比如一个新的软件功能,一个功能增强请求或者一个 bug 修复)在从开发到生产环境部署的整个流程中,都能不断地为用户带来价值。这种方式需要开发团队和运维团队密切交流、高效协作并且彼此体谅。此外,DevOps 还要能够方便扩展,灵活部署。有了 DevOps,需求最迫切的工作就能通过自助服务和自动化得到解决;通常在标准开发环境编写代码的开发人员也可与 IT 运维人员紧密合作,加速软件的构建、测试和发布,同时保障开发成果的稳定可靠。当然,这意味着更改代码会更频繁,基础架构的使用也会更灵活。所以传统的管理策略无法满足这种需求。您也需要应势而变,赢得先机。DevOps是一个循环递进的过程。通过文化的指引,打造符合当前组织和文化的相关工具链,固化协作的规范、流程;然后随着工具落地、实践推广
  • 钉钉开发(前端:钉钉企业内部小程序,后端:java)
    这里前端只按照模板写了大概,样式什么的都极简了 一、登录钉钉开放平台,点击应用开发,先创建一个小程序 二、设置服务器公网出口ip名单,多个用“,”隔开,这个是设置所有访问服务端的客户端ip。这里需要复制AgentId、AppKey、AppSecret,后面需要用 三、添加开发人员 四、设置设置安全域名,这里是设置服务端的ip 五、设置接口权限,把需要开通的权限开通 六、java后台controller代码:把AgentId、AppKey、AppSecret这三个值换成自己的。目前已实现的有获取accessToken,获取用户信息,获取用户详细信息,发送消息通知,撤回消息通知。 我这边小程序的登录逻辑是: package com.enter.net.system.sysadmin.controller; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.dingtalk.api.DefaultDingTalkClient; import com.dingtalk.api.DingTalkClient; import com.dingtalk.api.request.OapiMediaUploadRequest; import com.dingtalk.api
  • 对接钉钉审批_钉钉报销单对接用友、金蝶解决方案
    方案简介: 钉钉报销单对接用友、金蝶解决方案,在客户利用钉钉提供的审批流程引擎和表单工具实现电子报销流程的同时,帮助客户将产生的电子单据数据同步到用友、金蝶,智能自动生成财务凭证。 用户痛点: 易对接解决方案: 步骤1:钉钉 定义报销单格式,设置报销审批流程,提交报销单和完成审批。 步骤2:易对接网站 设置费用报销类型与财务系统科目、部门间的对应关系。 步骤3:用友、金蝶 通过易对接插件,用设置好的规则,将报销单数据转换为财务凭证,自动导入到用友、金蝶。 过程示例: 客户价值: 对于公司 实现费用报销到财务记账工作流程化、规范化和自动化提升效率,降低运营成本不需要程序开发,快速上线,价格透明记账规则在线保存,解决员工流动可能导致的规则丢失问题 对于财务人员 告别人工记账流程,降低手工录入工作避免手工录入可能造成的错误把财务部门从费时费力地重复性工作中解放出来,使其有更多精力为公司经营提升贡献力量 可对接系统与版本: 收费标准: 来源:https://blog.csdn.net/weixin_39702479/article/details/112245269
  • 解说关于陕西省2021年个人申报工程师职称申报程序
    一、材料申报 根据工作安排,2020年度职称评审实行网上申报。所有申报材料必须按要求上传完整原件扫描图片(JPG或PDF格式),不得以照片代替。 (一)个人申报 参评人员向所属单位提出申请,访问陕西省职称网上申报系统进行注册,按照网页提示及要求上传相关电子支撑材料。申报系统根据参评人员提交信息自动生成《专业技术任职资格申报人员评审简表》(以下简称《评审简表》)。参评人员确认填报的评审材料无误后,提交所属单位审核。 (二)推荐单位审核 参评人员所属单位通过互联网访问陕西省职称网上申报系统,审核参评人员提交的评审信息,并将参评人员《评审简表》在本单位公示不少于5个工作日,公示无异议后,上传至系统“公示证明”栏目,提交主管单位审核。实行专业技术岗位管理的事业单位,须上传岗位聘用情况。审核不通过的材料,推荐单位填写审核意见后回退参评人员。 (三)主管单位审核 有关市(区)人社局、省级有关部门、各有关企事业单位通过互联网访问陕西省职称网上申报系统,审核汇总本系统所属单位提交的参评人员信息。审核通过后,通过系统导出汇总花名册,打印加盖公章并生成JPG或PDF格式文件同委托评审函一起上传,提交省工信厅职称评审委员会。审核不通过的材料,填写审核意见后回退推荐单位。中央驻陕有关单位申报的,需上级主管单位出具委托评审函。 (四)材料将越来越规范,蒙混过关走捷径的时代已经过去了。评审结果进行随机抽查
  • uni-app解析及配置(小程序对应的转换)
    变化 文件变化: 以前是.html文件,现在是.vue文件 网络模型变化: 以前网页大多是b/s,服务端代码混合在页面里; 现在是c/s,前后端分离,通过js api(类似ajax的uni.request)获取json数据,把数据绑定在界面上渲染。 文件内代码架构变化: 以前一个html大节点,里面有script和style节点; 现在template是一级节点,用于写tag组件,script和style是并列的一级节点,也就是有3个一级节点。vue单文件组件规范 <template> <view> 必须有一个view,且只能有一个根view。写所有内容。 </view> </template> <script> export default { data(){ } } </script> <style> </style> 外部文件引用方式变化: 以前通过script src、link href引入外部的js和css; 现是es6的写法,import引入外部的js模块(注意不是文件)或css js要require进来,变成了对象。 在hello uni-app的common目录有一个工具类util.js,可以在hello uni-app中搜索这个例子查看。 <script> var util = require('../../../common/util.js'); /
  • 阿里钉钉技术分享:企业级IM王者——钉钉在后端架构上的过人之处
    本文引用了唐小智发表于InfoQ公众号上的“钉钉企业级IM存储架构创新之道”一文的部分内容,收录时有改动,感谢原作者的无私分享。 1、引言 业界的 IM 产品在功能上同质化较高,而企业级的 IM 产品对于高可用、安全性又有更高的要求,如何打造具备差异化的产品,又在高可用、安全性、数据一致性等方面具备较高的品质,是企业级 IM 产品成功的关键。钉钉在过去短短几年时间里,用户数已破 2 亿,企业组织数破千万,钉钉是在规划企业级 IM 产品的架构上有何过人之处?本文将围绕这个话题进行展开。 阅读提示:本文适合有一定IM后端架构设计经验的开发者阅读,或许出于商业产品技术秘密的考虑,分享者在本次所分享的内容上有所保留,鉴于阿里对于钉钉在技术上的内容分享做的非常少,所以本文虽然内容不够全面,但仍然值得一读。 学习交流: - 即时通讯/推送技术开发交流5群:215477170 [推荐] - 移动端IM开发入门文章:《新手入门一篇就够:从零开发移动端IM》 (本文同步发布于:http://www.52im.net/thread-2848-1-1.html) 2、相关文章 《企业微信客户端中组织架构数据的同步更新方案优化实战》 《现代IM系统中聊天消息的同步和存储方案探讨》 《钉钉——基于IM技术的新一代企业OA平台的技术挑战(视频+PPT) [附件下载]》 (* 推荐) 3、不同的场景
  • zabbix报警之钉钉报警配置
    一、概述前文我们介绍了zabbix的安装,zabbix自定义模板,zabbix自动发现,zabbix报警之前是基于邮件,本文将详细描述从钉钉配置,到zabbix报警钉钉脚本编写,到zabbix配置脚本;前文的报警是基于邮件,不方便的地方在于,现在云主机禁用smtp协议从云主机发出;因此这种方便可能行不通,通过这种本地搭建邮件只能实验中了解zabbix报警原理;钉钉报警,方便,快速,免费,效率好,因此本文将对zabbix调用钉钉报警详细说明 二、钉钉配置1、说明钉钉是阿里云推出的即进聊天通讯工具;通常在企业里会加入;我们这边不介绍企业钉钉的注册,只从运维人员加入到企业后,创建群组;再创建机器人;再将机器人api封装成脚本 ,让其他程序,如zabbix调用,以此用来报警;要接收报警信息的人员,加到群组中,就能收到报警信息; 2、创建群组创建钉钉群组之前需要我们先用手机号注册钉钉账号;按手机平台下载安装好钉钉app;登录钉钉并创建群组,注册和下载安装登录钉钉这里不详述了;比如我这里创建了一个游戏运维组的群组如下: 3、创建钉钉机器人创建好群组后,我们点击群组右上角 弹出窗口 "群设置" → 智能群助手 如图在智能群助手面点击 "添加机器人" 在添加机器人 右侧 如图:选择自定义机器人添加机器人 给机器人取个名字如"运维小哥" ;说明: 安全设置的作用就是在调用时需要加的限制;有三种
  • 前端生成分享海报兼容H5和小程序
    移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果 源码地址请添加链接描述 前端框架使用的是uni-app方便打包成H5和小程序实现方案是拿到后端返回的数据后,利用canvas画布把各个数据拼在一起并且生成一张图片主要的参数有:背景图、商品图、二维码、价格、原价、标题 首先拿到产品图和二维码之后需要把它们下载下来用uni-app的api就可以先写一个下载方法并且在template 定义画布组件 <template> <canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas> </template> onReady(){ this.downloadFileImg('','pic'); this.downloadFileImg('','code'); }, methods:{ downloadFileImg(url,name){ let self = this uni.downloadFile({ url: url, success: function(res) { self[name] = res.tempFilePath; }, fail: function(erros) {
  • 微信小程序实现canvas生成海报保存到本地
    效果图 <view> <canvas class="canvas" style="width: {{canvas_width}}px;height:{{canvas_height}}px;" canvas-id="mycanvas"></canvas> <view class="pop"> <view class="popbg" bindtap="getclose"></view> <view class="popup"> <view class="poster"> <image src="{{canvas}}"></image> </view> <view class="save"> <view class="down"> <image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20200110105821-1.png"> </image> </view> <view bindtap="getsave">保存图片</view> </view> </view> </view> </view> .popbg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z