微信小程序菊花码生成

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序菊花码生成相关的知识,希望对你有一定的参考价值。

参考技术A 1、第一步首先要去微信公众平台获取到自己的appid以及secret

获取access_token方法详见: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

其中access_token与scene必传,此处坑很多,建议先在postman中测试,一般都会提示data format error hint等等各种的错误,

因为按照官方文档的提示去做,微信服务器收到的是无法解析的数据,所以会返回各种错误码,首先如下图,在params中将上面获取到的access_token填入(access_token有效期只有两个小时)。再在Body中选择raw,将scene传入,scene随便填什么值都行,必须是json格式。之后请求接口 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token= 此处填你自己access_token,理论上就会获取到菊花码.

利用微信小程序中Canvas API来合成海报生成组件封装

每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下其他的一种实现方式吧

 

原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToTempFilePath()导出图片地址,从而可实现预览及保存至手机相册

一、如何使用

打开项目文件夹

1

1、 git  clone  https://github.com/WGinit/mini-poster.git

2、在待使用页面Json文件中注册该组件

1

2

3

4

5

{ “usingComponents“:

 

  { “share-image“: “/components/share_image/share_image“ }

 

}

3、在页面中使用该组件

1

2

3

4

5

<share–image

 

     drawDataList=“{{dataList}}“>

 

</share–image>

二、参数配置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

dataList: {

    canvasData:{

      type: ‘image‘,

      url: ‘‘,

      top: 0,

      left: 0,

      width: 750,

      height: 1334,

      comment: ‘背景图‘,

      btnText: ‘保存至相册‘

    },

    content: [{

      type: ‘image‘,

      url: ‘‘,

      top: 136,

      left: 100,

      shape: ‘square‘,

      width: 290,

      height: 186,

      comment: ‘头像‘

    }, {

      type: ‘text‘,

      content: ‘白山羊‘,

      top: 336,

      left: 100,

      fontSize: 40,

      lineHeight: 40,

      color: ‘#f00‘,

      textAlign: ‘left‘,

      weight: ‘bold‘,

      maxWidth: 287

    }]

  }

三、参数说明

canvasData------------canvas相关参数配置
参数类型默认值必填说明
type String image 文件类型, 这里为背景图,默认image
url String ‘‘ 网络图片地址
top Number 0 图像的左上角在可视区域上 Y 轴的位置, 单位px
left Number 0 图像的左上角在可视区域上 X 轴的位置, 单位px
width Number 750 画布的宽度, 单位px
height Number 1334 画布的高度, 单位px
comment String ‘背景图‘ 图片描述
btnText String ‘保存至相册‘ 生成按钮文字
content -------绘制内容参数
参数类型默认值必填说明
type String ‘‘ 绘制的类型,可选image和text
shape String ‘square‘ 绘制图片的形状, square 方形, circle 圆形
url String ‘‘ - 图片的网络地址, type为image必填
content String ‘‘ - 文本内容, type为text必填
top Number 0 图像的左上角在目标画布上 Y 轴的位置, 单位px
left NUmber 0 图像的左上角在目标画布上 X 轴的位置, 单位px
width Number 100 绘制图片的宽度,单位px
height Number 100 绘制图片的高度, 单位px
comment String ‘‘ 绘制图片的说明
fontSize Number 32 文本字体大小,单位px
lineHeight Number 32 文本行高, 单位px
color String ‘#FFFFFF ‘ 文本字体颜色
textAlign String ‘center‘ 文本水平对齐方式, 可选left, center, right
weight String ‘normal‘ 文本字体粗细
maxWidth Number 600 文本限制的最大宽度,单位px

四、备注

上述单位都是参照设计稿(750 * 1334)而来,实际情况可直接按设计稿上尺寸配置参数

以上是关于微信小程序菊花码生成的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序码如何生成 微信小程序码生成方法攻略教程大全

利用微信小程序中Canvas API来合成海报生成组件封装

利用微信小程序中Canvas API来合成海报生成组件封装

微信小程序码如何弄怎么生成 获取小程序二维码方法

微信小程序生成太阳码

微信小程序提示短信配置没有填写