위 챗 애플 릿 은 canvas 로 그림 을 그리고 공유 합 니 다.

최근 에 위 챗 애플 릿 을 만 들 기 시 작 했 는데 이런 수요 가 있 습 니 다.
목록 페이지 에서 상세 한 상황 으로 들 어가 모든 상세 한 페이지 에서 공유 하고 공 유 된 그림 은 현재 상세 한 데 이 터 를 가 진 그림 입 니 다.
다음 그림 의 목록:

공유 하 는 모습:

솔 루 션 과 아이디어:canvas 그림 생 성 그림
상위 코드:
[html 부분]

<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>
<button open-type='share'>  </button>

[js 부분]

var ctx = "" //     canvas
var leftMargin = "" //        
var topMargin = "" //        
Page({

 /**
 *        
 */
 data: {
 title: '     ',
 salary: '500-8000 / ',
 rtype: '  ',
 rmoney: '20 ',
 canvasWidth: '', // canvas  
 canvasHeight: '', // canvas  
 imagePath: '' //        
 },

 /**
 *       --      
 */
 onLoad: function (options) {
 var that = this
 var sysInfo = wx.getSystemInfo({
  success: function (res) {
  that.setData({
   //        ，      80%，       5:4
   canvasWidth: res.windowWidth,
   canvasHeight: res.windowWidth * 0.8
  })
  leftMargin = res.windowWidth
  topMargin = res.windowWidth * 0.8
  },
 })
 },

 /**
 *       --          
 */
 onReady: function () {
 ctx = wx.createCanvasContext('myCanvas')
 this.addImage()
 this.tempFilePath()
 
 },
 //    
 addImage: function () {
 var context = wx.createContext();
 var that = this;
 var path = "/images/share.jpg";
 //        canvas,      drawImage()     ，     
 //        ，         
 ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
 this.addTitle()
 this.addRtype()
 this.addRmoney()
 this.addSalary()
 ctx.draw()
 },
 //   
 addTitle: function (){
 var str = this.data.title
 ctx.font = 'normal bold 20px sans-serif';
 ctx.setTextAlign('center'); //     
 ctx.setFillStyle("#222222");
 ctx.fillText(str, this.data.canvasWidth/2,65)
 },
 //      
 addRtype: function () {
 var str = this.data.rtype
 ctx.setFontSize(16)
 ctx.setFillStyle("#ff4200");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
 },
 //      
 addRmoney: function () {
 var str = this.data.rmoney
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)
 },
 //    
 addSalary: function () {
 var str = this.data.salary
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)
 },
 /**
 *          
 */
 onShareAppMessage: function (res) {
 // return eventHandler        
 return {
  title: this.data.title,
  path: '/pages/test/test',
  imageUrl: this.data.imagePath
 };
 },
 //    
 tempFilePath: function(){
 let that = this;
 wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function success(res) {
  wx.saveFile({
   tempFilePath: res.tempFilePath,
   success: function success(res) {
   that.setData({
    imagePath: res.savedFilePath
   });
   }
  });
  }
 });
 },

 /**
 *       --      
 */
 onShow: function () {

 },

 /**
 *       --      
 */
 onHide: function () {

 },

 /**
 *       --      
 */
 onUnload: function () {

 },

 /**
 *           --        
 */
 onPullDownRefresh: function () {

 },

 /**
 *              
 */
 onReachBottom: function () {

 }


})

현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.