집 > 기사 > 위챗 애플릿 > 친구 그룹을 공유하는 WeChat 애플릿은 포스터를 생성합니다.

친구 그룹을 공유하는 WeChat 애플릿은 포스터를 생성합니다.

马冠亚원래의: 2020-07-08 18:45:01213검색

WeChat 애플릿은 Moments에 대한 공유를 실현합니다

Moments에서 공유 요즘 모든 사람이 흔히 사용하는 방법은 Canvas를 통해 사진을 생성하고 저장한 다음 직접 Moments에 전달하는 것입니다. 최근 프로젝트에 이런 요구 사항이 있어서 기록해 두었습니다.

포스터의 QR 코드를 스캔한 후 지정된 페이지로 바로 이동하려면 매개변수를 사용하여 QR 코드를 생성해야 합니다. 먼저 렌더링을 살펴보세요.

친구 그룹을 공유하는 WeChat 애플릿은 포스터를 생성합니다.

1. 먼저 , index.json 내부에

index.wxml 코드:

<view class="container">
    <image src="{{shareImage}}" class="share-image"></image>
    <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
    <button bind:tap="eventDraw">绘制</button>
    <button bind:tap="eventSave">保存到本地</button>
</view>

index.wxss 코드:

.share-image {
    width: 600rpx;
    height: 810rpx;  
    margin: 0 75rpx;  
    padding: 1px;  
    margin-top: 40px;
}
button {
    margin-top: 100rpx;
}

index.js 코드:

Page({
    data: {
        painting: {},
        shareImage: &#39;&#39;,
    },
    onLoad() {
        this.eventDraw()
    },
    eventDraw() {
        var that = this;
        wx.showLoading({
            title: &#39;绘制分享图片中&#39;,
            mask: true
        })
        this.setData({
            painting: {
                width: 375,
                height: 568,
                clear: true,
                views: [
                  //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
                  {
                    type: &#39;image&#39;,
                    url: &#39;https://XXX.com/weixin/item/bai.jpg&#39;,
                    width: 375,
                    height: 568
                  },
                  //边框,直接拿了一张图,当做边框
                  {
                    type: &#39;image&#39;,
                    url: &#39;https://XXXXX.com/weixin/item/biankuang.png&#39;,
                    width: 375,
                    height: 568
                  },
                  //商品图
                  {
                    type: &#39;image&#39;,
                    url: &#39;https://XXX.com/seafood/public78fffad452d2e158636b.jpg&#39;,
                    width: 328,
                    height: 328,
                    top:20,
                    left:22,
                  },
                  //商品名称
                  {
                    type: &#39;text&#39;,
                    content: &#39;产品名称产品11111&#39;,
                    fontSize: 20,
                    lineHeight: 21,
                    color: &#39;#000000&#39;,
                    textAlign: &#39;left&#39;,
                    top: 360,
                    left: 36,
                    width: 290,
                    MaxLineNumber: 2,
                    breakWord: true,
                    bolder: true
                  },
                  //线条,同样也是用的图
                  {
                    type: &#39;image&#39;,
                    url: &#39;https://XXXX.com/weixin/item/xiantiao.png&#39;,
                    width: 325,
                    height: 5,
                    top: 443,
                    left:22
                  },
                  //商品价格
                  {
                      type: &#39;text&#39;,
                      content: &#39;￥198.00&#39;,
                      fontSize: 20,
                      color: &#39;#E62004&#39;,
                      textAlign: &#39;left&#39;,
                      top: 414,
                      left: 36,
                      bolder: true
                  },
                  //名称
                  {
                    type: &#39;text&#39;,
                    content: &#39;名称名称&#39;,
                    fontSize: 15,
                    lineHeight: 21,
                    color: &#39;#7E7E8B&#39;,
                    textAlign: &#39;left&#39;,
                    top: 414,
                    left: 267,
                    width: 70,
                    MaxLineNumber: 1,
                    breakWord: true,
                  },
                  // 文字, 打不出这个文字带阴影的效果, 所以也用的图
                  {
                    type: &#39;image&#39;,
                    url: &#39;https://XXXX.com/weixin/item/wenzi.png&#39;,
                    width: 145,
                    height: 75,
                    top: 460,
                    left: 36,
                  },
                  //二维码
                  {
                    type: &#39;image&#39;,
                    url: &#39;https://XXXX.com/Public/Home/images/banner/min_code.jpg&#39;,
                    top: 455,
                    left: 260,
                    width: 85,
                    height: 85
                  },
                ]
            }
        })
    },
    eventSave() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.shareImage,
            success(res) {
                wx.showToast({
                    title: &#39;保存图片成功&#39;,
                    icon: &#39;success&#39;,
                    duration: 2000
                })
            }
        })
    },
    eventGetImage(event) {
        console.log(event)
        wx.hideLoading()
        const {
            tempFilePath,
            errMsg
        } = event.detail
        if (errMsg === &#39;canvasdrawer:ok&#39;) {
            this.setData({
                shareImage: tempFilePath
            })
        }
    }
})

code를 작성하세요.

{
  "navigationBarTitleText": "生成海报",
  "usingComponents": {
    //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer" 
  }
}

구성 요소 다운로드 주소:

链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 
提取码：8hrj

2. 개체 구조

1 데이터 개체의 첫 번째 레이어에는 너비, 높이, 뷰의 세 가지 매개 변수가 필요합니다. 구성의 모든 숫자는 단위가 없습니다. 이는 캔버스가 비례적인 이미지를 그리는 것을 의미합니다. 특정 디스플레이 크기를 결정하려면 반환된 이미지 경로를 이미지 태그에 배치하기만 하면 됩니다.

2. 현재 이미지, 텍스트, 직사각형의 3가지 구성 유형을 그릴 수 있습니다. 구성된 속성은 기본적으로 CSS의 Camel Case 이름을 사용하므로 비교적 이해하기 쉽습니다. 이미지 이미지 주소는 ：/images/1.jpeg

top

왼쪽 상단 모서리와 드로잉 보드 상단 사이의 거리와 같은 로컬 이미지일 수 있습니다. left그림의 왼쪽 상단 사이의 거리 보드의 왼쪽까지의 거리width그리는 폭0그리는 높이

높이

text(text)

거짓 true, falsetextDecoration

property	meaning	기본값	선택값
content	텍스트 그리기	기본적으로 비어 있음
color	Color	검정색
fontSize	Font Size	16
textAlign	텍스트 정렬	왼쪽	가운데, 왼쪽, 오른쪽
lineHeight	줄 높이, 여러 줄 텍스트에만 유용함	20
top	텍스트의 왼쪽 상단과 아트보드 상단 사이의 거리	0
left	텍스트 왼쪽 상단과 아트보드 왼쪽 사이의 거리	0
breakWord	줄 바꿈이 필요한지 여부	false	true, false
MaxLineNumber	최대 줄 수, set breakWord: true 로만 설정, 현재 속성은 유효하며 줄 수를 초과하는 내용은 다음과 같이 표시됩니다...	2
width	MaxLineNumber 속성과 함께 사용되며 width는 줄 바꿈에 도달하는 너비입니다.

밑줄 및 밑줄 효과 표시

없음

밑줄, 줄넘기(밑줄)

직사각형(직사각형, 선)

이 방법은 매우 간단하고 쉽습니다. 이해하고 서로에게서 배울 수 있습니다.

property	meaning	기본값	선택값
배경	배경 색상	블랙
top	왼쪽 상단 모서리와 아트보드 상단 사이의 거리
left	왼쪽 상단 모서리와 아트보드 왼쪽 사이의 거리		ㅋㅋㅋ

위 내용은 친구 그룹을 공유하는 WeChat 애플릿은 포스터를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：WeChat 미니 프로그램의 기본 원칙을 분석합니다.다음 기사：WeChat 미니 프로그램의 기본 원칙을 분석합니다.