很火的助眠小程序睡眠助手白噪音助眠夜曲微信小程序源码支持分享海报 支持暗黑模式 附教程.zip

# Painter 画板 测试版 > uniapp 海报画板，更优雅的海报生成方案 > [查看更多 站点 1](https://limeui.qcoon.cn/#/painter) > [查看更多 站点 2](http://liangei.gitee.io/limeui/#/painter) > Q 群：806744170 ## 平台兼容 | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App | | --- | ---------- | ------------ | ---------- | ---------- | --------- | --- | | √ | √ | √ | 未测 | √ | √ | √ | ## 安装 在市场导入[海报画板](https://ext.dcloud.net.cn/plugin?id=2389)uni_modules版本的即可，无需`import` ## 代码演示 ### 基本用法 - 插件提供 JSON 及 XML 的方式绘制海报 - 参考了 css 块状流布局模拟 css schema 方式。 - 使用JSON的方式时，请使用驼峰key #### 方式一 XML - 提供`l-painter-view`、`l-painter-text`、`l-painter-image`、`l-painter-qrcode`四种类型组件 - 通过 `css` 属性绘制样式，与 style 使用方式保持一致。 ```html <l-painter> <l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block" ></l-painter-view> <l-painter-view css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;" ></l-painter-view> <l-painter-view css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block" ></l-painter-view> </l-painter> ``` #### 方式二 JSON - 在 json 里四种类型组件的`type`为`view`、`text`、`image`、`qrcode` - 通过 `board` 设置海报所需的 JSON 数据进行绘制或`ref`获取组件实例调用组件内的`render(json)` - 所有类型的 schema 都具有`css`字段，css 的 key 值使用**驼峰**如：`lineHeight` ```html <l-painter :board="poster"/> ``` ```js data() { return { poster: { css: { // 根节点若无尺寸，自动获取父级节点 width: '750rpx' }, views: [ { css: { background: "#07c160", height: "120rpx", width: "120rpx", display: "inline-block" }, type: "view" }, { css: { background: "#1989fa", height: "120rpx", width: "120rpx", borderTopRightRadius: "60rpx", borderBottomLeftRadius: "60rpx", display: "inline-block", margin: "0 30rpx" }, views: [], type: "view" }, { css: { background: "#ff9d00", height: "120rpx", width: "120rpx", borderRadius: "50%", display: "inline-block" }, views: [], type: "view" }, ] } } } ``` ### View 容器 - 类似于 `div` 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树 - 在 JSON 里具有 `views` 的数组字段，用于嵌套承载节点。 #### 方式一 XML ```html <l-painter> <l-painter-view css="background: #f0f0f0; padding-top: 100rpx;"> <l-painter-view css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block" ></l-painter-view> <l-painter-view css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block" ></l-painter-view> </l-painter-view> </l-painter> ``` #### 方式二 JSON ```js { css: {}, views: [ { type: 'view', css: { background: '#f0f0f0', paddingTop: '100rpx' }, views: [ { type: 'view', css: { background: '#d9d9d9', width: '33.33%', height: '100rpx', display: 'inline-block' } }, { type: 'view', css: { background: '#bfbfbf', width: '66.66%', height: '100rpx', display: 'inline-block' } } ], } ] } ``` ### Text 文本 - 通过 `text` 属性填写文本内容。 - 支持`\n`换行符 - 支持省略号，使用 css 的`line-clamp`设置行数，当文字内容超过会显示省略号。 - 支持`text-decoration` #### 方式一 XML ```html <l-painter> <l-painter-view css="background: #e0e2db; padding: 30rpx; color: #222a29"> <l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" /> <l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" css="text-align:center; padding-top: 20rpx; text-decoration: line-through " /> <l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" css="text-align:right; padding-top: 20rpx" /> <l-painter-text text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。" css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%); background-clip: text" /> </l-painter-view> </l-painter> ``` #### 方式二 JSON ```js // 基础用法 { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', }, { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', css: { // 设置居中对齐 textAlign: 'center', // 设置中划线 textDecoration: 'line-through' } }, { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', css: { // 设置右对齐 textAlign: 'right', } }, { type: 'text', text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼', css: { // 设置行数，超出显示省略号 lineClamp: 3, // 渐变文字 background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)', backgroundClip: 'text' } } ``` ### Image 图片 - 通过 `src` 属性填写图片路径。 - 图片路径支持：网络图片，本地 static 里的图片路径，缓存路径 - 通过 `css` 的 `object-fit`属性可以设置图片的填充方式，可选值见下方 CSS 表格。 - 通过 `css` 的 `object-position`配合 `object-fit` 可以设置图片的对齐方式，类似于`background-position`，详情见下方 CSS 表格。 - 使用网络图片时：小程序需要去公众平台配置 [downloadFile](https://mp.weixin.qq.com/) 域名 - 使用网络图片时：**H5 和 Nvue 需要决跨域问题** #### 方式一 XML ```html <l-painter> <!-- 基础用法 --> <l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg" css="width: 200rpx; height: 200rpx" /> <!-- 填充方式 --> <!-- css object-fit 设置 填充方式 见下方表格--> <l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg" css="width: 200rpx; height: 200rpx; object-fit: contain; background: #eee" /> <!-- css object-position 设置 图片的对齐方式--> <l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg" css="width: 200rpx; height: 200rpx; object-fit: contain; object-position: 50% 50%; background: #eee" /> </l-painter> ``` #### 方式二 JSON ```js // 基础用法 { type: 'image', src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg', css: { width: '200rpx', height: '200rpx' } }, // 填充方式 // css objectFit 设置 填充方式 见下方表格 { type: 'image', src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg', css: { width: '200rpx', height: '200rpx', objectFit: 'contain' } }, // css objectPosition 设置 图片的对齐方式 { type: 'image', src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg', css: { width: '200rpx',