小(xiǎo)程序生(shēng)成海(hǎi)報(bào)插件(jiàn)painter♣®>✘（原生(shēng)小(xiǎo)程序版）

發表時(shí)間(jiān)：2020-10-19

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：122

1.先去(qù)下(xià)載插件(jiàn)github★♠< 下(xià)載 https://github.com/Kujiale-Mobile/Pain>↓ter 下(xià)載好(hǎo)了(le)把painter整個(gè)文(wéγε®©n)件(jiàn)放(fàng)在components裡(lǐ)面
在這(zhè)裡(lǐ)插入圖片描述

index.json

{
  "usingComponents": {
    "painter":"/components/painter/p≠βainter"
  }
}

index.wxml

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
<button bind:tap='createPoster'>生(shēng)成海(hǎi)報(bào)</button>
<image class="poster" src="{{imgURL}}" mode="cover"></image>
<painter 
	wx-if="{{showPainter}}"
    palette="{{template}}"
    bind:imgOK="onImgOK" 
    />

index.js

Page({
  data: {
    template: {},
    imgURL:'',
	showPainter:false,
	avatarUrl:''
  },
  createPoster(){
    this.getPattle()
  },
  onImgOK(e) {
    console.log("onImgOK")
    console.log(e.detail.path)
    this.setData({
      imgURL: e.detail.path
    })
  },
  getPattle(){
	  let _this = this
	  _this.setData({
	    template: {
	      width:"750rpx",
	      height:"1624rpx",
	      views:[
	         {
	            type: 'image',
	            url: "https://campaign.uglobal.c∏₹om.cn/ikea/images/havemeda> 'l.jpg",
	            css: {
	              top: '0rpx',
	              left: '0px',
	              width: '750rpx',
	              height: '1624rpx'
	            }
	          },{
	            type: 'image',
	            url: _this.data.avatarUrl,
	            css: {
	              top: '450rpx',
	              left: '270rpx',
	              width: '200rpx',
	              height: '200rpx',
	              borderRadius: '100rpx',
	              borderWidth: "10rpx",
				  borderColor: '#fed931'
	            }
	          }
	      ]
	    },
		showPainter:true
	  })
  },
  getUserInfo: function(e) {
    console.log(e)
    this.setData({
	  avatarUrl:e.detail.userInfo.avatarUrl
    })
  }
})

注意：
網絡圖片真機(jī)顯示空(kōng)白(bái)請(qǐng)檢查微(wēi)信公衆平台 ≠™服務器(qì)域名裡(lǐ)面的(de)安全域名有(yǒu)沒有(yǒu)添加"€λ'
微(wēi)信頭像顯示空(kōng)白(bái) 請(qǐδε↔₽ng)添加 https://thirdwx.qlogo.cn; 添加域名後重新啓動項目就λ§γ≥(jiù)可(kě)以成功顯示了(le)。

在這(zhè)裡(lǐ)插入圖片描述