简介 基于 HTML 和 CSS 实现 Canvas 绘图。 项目地址 代码片段：https://developers.weixin.qq.com/s/9zFHKdmh7De2 原理 构建虚拟DOM 树，依据 CSS 规范计算样式，使用 CSS 盒模型对 DOM 进行布局，计算出所有元素的位置。最后将 DOM 树通过 Canvas Api 进行绘制。 小程序开发工具内运行 demo [代码]git clone https://github.com/alexayan/html-canvas.git npm i npm run watch [代码] 已支持的 CSS 属性 margin，margin-left，margin-top，margin-right，margin-bottom，padding，padding-left，padding-top，padding-right，padding-bottom，width，height，border，border-left，border-top，border-right，border-bottom，border-width，border-style，border-color，border-left-style，border-left-color，border-left-width，border-top-style，border-top-color，border-top-width，border-right-style，border-right-color，border-right-width，border-bottom-style，border-bottom-color，border-bottom-width，color，display，background-color，border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius，box-sizing，font，font-style，font-variant，font-weight，font-stretch，font-size，line-height，font-family，text-align，position，overflow，overflow-x，overflow-y，top，left，right，bottom，z-index demo canvas-draw.html [图片]

表单一直是类web项目中开发的难点，表单涉及UI,交互，校验，接口，回填等各种坑点，在项目中，我们遵循下列原则设计表单组件 配置化表单 统一的表单结构 丰富的API，简化出错，提示等操作 支持任一表单元素之间的联动 原生微信所有表单组件支持 示例代码 [代码]https://github.com/webkixi/aotoo-xquery => pages/form [代码] 表单组件配置说明 表单由配置文件生成，表单属性构成大致如下图 [图片] 文本表单使用 以文本类表单展开说明 wxml [代码]<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" /> [代码] js [代码]const Pager = require('../../components/aotoo/core/index') const config = [ { title: '文本框表单区域', desc: '说明信息', input: [ { id: 'aaa', type: 'text', title: '文本', placeholder: '数字输入键盘', error: '错误信息', desc: '说明信息' bindblur: 'onbindblur', bindinput: 'onbindinput', bindfocus: 'onbindfocus', bindconfirm: 'onbindconfirm', bindkeyboardheightchange: 'onbindkeyboardheightchange', }, ] }, { title: '数字表单区域', input: [ {id: 'ccc', type: 'number', title: '整数型', placeholder: '数字输入键盘', bindblur: 'onBlur'}, {id: 'ddd', type: 'idcard', title: '身份证', placeholder: '身份证输入键盘', bindblur: 'onBlur'}, {id: 'eee', type: 'password', title: '密码串', maxlength: 30, placeholder: '隐藏的密码串', bindblur: 'onBlur'} ] }, { title: 'TEXTAREA', input: [ {id: 'aaa', type: 'textarea', title: '文本域', placeholder: '输入文字', bindblur: 'onBlur'}, ] }, ] const mthSet = { onbindblur(e) { console.log('=====text', e.detail.value); }, onbindinput(e) { console.log('=====text', e); }, onbindfocus(e) { console.log('=====text', e); }, onbindconfirm(e) { console.log('=====text', e); }, onbindkeyboardheightchange(e) { console.log('=====text', e); }, } Pager({ data: { formConfig: { $$id: 'myForm', formStyle: 'width: 90vw;', data: config, methods: mthSet }, } }) [代码] 示例如下图所示 [图片] 更多说明 请移步 https://juejin.im/post/5eba58aaf265da7b9d50d7dd

需求 1）用户想要复制自己发送的内容，但是内容是富文本类型，至少是有图片插在中间。 2）复制不需要复制格式，只要文本就可以 然后 text 只能包含 text，不满足需求 rich-text 居然不能复制。。。 今天两个问题，都是不能完整结局问题。 问题来了，我不是百度小程序的水军，但是我 google 搜索，发现尼玛这个需求他们居然也支持了？？？？？ 所以我想知道我们什么时候支持。有需求谢谢

小程序中绘制 canvas 的小工具