;

小程序海报绘制开发方案(原生,Uniapp,Taro)

2023-11-06 阅读:404
;
您当前位置:首页 | 新闻列表 | 新闻详情

背景

  1. 小程序海报绘制方案有很多,但是大多数都是基于canvas的,而且都是自己封装的,不够通用,不够灵活,不够简单,不够好用。
  2. 本方使用一个开源的小程序海报绘制,非常灵活,扩展性非常好,仅布局就能得到一张海报。

准备工作

安装依赖,也可以把源码下载到本地,源码地址

npm install wxml2canvas

布局

无论哪种方案,布局都是一致的,需要注意一些暂未支持的属性:

  1. 变形:transform,但是节点元素使能读取此属性,但是库不支持,所以不要使用
  2. 圆角,border-radius,同上,不要使用,圆形图片有特定的属性去实现,除此之外无法实现其他类型的圆角

布局示例:

注意,除了uniapp,原生和Taro要使用原生组件的方式绘制canvas,因为Taro不支持data-xx的属性绑定方式,这一点很糟糕

<!-- 外层wrap用于fixed定位,使得整个布局离屏,离屏canvas暂未支持 --> <view class='wrap'> <!-- canvas id,一会 new 的时候需要 --> <canvas canvas-id="poster-canvas"></canvas> <view class="container"> <view data-type="text" data-text="测试文字绘制" class='text'>测试文字绘制</view> <image data-type="image" data-src="https://img.yzcdn.cn/vant/cat.jpeg" class='image'></image> <image data-type="radius-image" data-src="https://img.yzcdn.cn/vant/cat.jpeg" class='radius-image'></image> </view> </view> 

原生小程序

import Wxml2Canvas from 'wxml2canvas' Component({ methods: {
    paint() {
      wx.showLoading({ title: '生成海报' }); // 创建绘制实例 const drawInstance = new Wxml2canvas({ // 组件的this指向,组件内使用必传 obj: this, // 画布宽高 width: 275, height: 441, // canvas-id element: 'poster-canvas', // 画布背景色 background: '#f0f0f0', // 成功回调 finish: (url) => { console.log('生成的海报url,开发者工具点击可预览', url);
          wx.hideLoading();
        }, // 失败回调 error: (err) => { console.error(err);
          wx.hideLoading();
        },
      }); // 节点数据 const data = { list: [
          { // 此方式固定 wxml type: 'wxml', class: '.text', // draw_canvas指定待绘制的元素 limit: '.container', // 限定绘制元素的范围,取指定元素与它的相对位置计算 }
          { // 此方式固定 wxml type: 'wxml', class: '.image', // draw_canvas指定待绘制的元素 limit: '.container', // 限定绘制元素的范围,取指定元素与它的相对位置计算 }
          { // 此方式固定 wxml type: 'wxml', class: '.radius-image', // draw_canvas指定待绘制的元素 limit: '.container', // 限定绘制元素的范围,取指定元素与它的相对位置计算 }
        ]
      } // 调用绘制方法 drawInstance.draw(data);
    }
  }
})

Uniapp

uniapp 主要讲Vue3的版本,因为涉及 this,需要获取 this 以及时机

import {  getCurrentInstance} from 'vue'; // 调用时机 setup内,不能在其他时机 // @see https://github.com/dcloudio/uni-app/issues/3174 const instance = getCurrentInstance(); function paint() {
  uni.showLoading({ title: '生成海报' }); const drawInstance = new Wxml2Canvas({ width: 290, // 宽, 以iphone6为基准,传具体数值,其他机型自动适配 height: 430, // 高 element: 'poster-canvas', // canvas-id background: '#f0f0f0', obj: instance,
    finish(url: string) { console.log('生成的海报url,开发者工具点击可预览', url);
      uni.hideLoading();
    },
    error(err: Error) { console.error(err);
      uni.hideLoading();
    },
  }); // 节点数据 const data = { list: [
      { // 此方式固定 wxml type: 'wxml', class: '.text', // draw_canvas指定待绘制的元素 }
      { // 此方式固定 wxml type: 'wxml', class: '.image', // draw_canvas指定待绘制的元素 }
      { // 此方式固定 wxml type: 'wxml', class: '.radius-image', // draw_canvas指定待绘制的元素 }
    ]
  } // 调用绘制方法 drawInstance.draw(data);
}

Taro

Taro 比较特殊,框架层面的设计缺陷导致了 Taro 组件增加的 data-xx 属性在编译的时候是会清除的,因此Taro要使用这个库要用原生小程序开发的方式编写组件。

代码和原生的一样,只是要用原生的方式编写组件,然后在 Taro 中使用。
参考原生的代码,原生小程序js参考这

假设原生组件名为 draw-poster,那么首先需要再Taro的页面中引入这个组件,然后在页面中使用这个组件,然后在组件中使用这个库。

export default { navigationBarTitleText: '', usingComponents: { 'draw-poster': '../../components/draw-poster/index',
  },
};
const draw = useCallback(() => { const { page } = Taro.getCurrentInstance(); // 拿到目标组件实例调用里面的方法 const instance = page!.selectComponent('#draw_poster'); // 调用原生组件绘制方法 instance.paint();
  }, []); return <draw-poster id="draw_poster"/> 

总结

对比原生的canvas绘制方案,布局的方式获取节点的方式都是一样的,只是绘制的时候不一样,原生的是直接绘制到canvas上,而这个库是先把布局转换成canvas,然后再绘制到canvas上,所以这个库的性能会比原生的差一些,但是这个库的优势在于布局的方式,不需要自己去计算位置,只需要布局,然后调用绘制方法就可以了,非常方便,而且扩展性非常好,可以自己扩展一些布局方式,比如说flex布局,grid布局等等,这些都是可以的,只需要在布局的时候把布局转换成canvas的布局就可以了,这个库的布局方式是参考的微信小程序的布局方式,所以布局的时候可以参考微信小程序的布局方式,这样就可以很方便的布局了。

上一篇:社交论坛小程序怎么做,主要的功能有哪些 下一篇:选择上海公司定制商城小程序需要注意什么

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

在线预约

  • 您的姓名
  • 联系电话

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 小程序定制 生鲜小程序 全平台开发 网站建设 外包开发 自主研发产品 sitemap robots

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部