微信小程序"海报"需求 - 新闻资讯 - 云南小程序开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序"海报"需求

发表时间:2021-4-13

发布人:葵宇科技

浏览次数:1

背景

  • 最近手上有一个小程序项目,上周接到这样一个需求,用戶可以将一个页面下载到本地,分享给朋友/朋友圈(这里的分享是指将当前页面作为小程序的缩略图进行小程序的分享),需要下载或分享的页面如下:

  • 用户需要下载、分享的就是红色框内的海报。

OK,需求明确开始干活了

  • 实现方式,第一次该类型的需求,网上了解到两种实现方式(应该还有更多)

    1. wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景。该组件是由微信提供的
    2. Painter 一款轻量级的小程序海报生成组件,我在项目中使用了这一种实现方式,因为它支持可视化拖拽生成painter代码,简直不要太香。① 可视化工具地址 ② git地址

    【PS】:两种实现的方式原理是一致的,提供物料--绘制canvas--生成图片,关于物料提供:支持矩形,图片,文字等...如果你的需求有canvas,考虑使用 wx.downloadFile 将 canvas 转为图片进行物料提供,我在项目中是这么做的。

  • 分析用户需要下载的海报元素组成,图片、文字、canvas(下方的雷达图是canvas标签,需要先将canvas转为图片提供物料)

  • 将 painter 重git拉下来放在自己项目的组件中,并在需要使用的页面中注册组件。

.json
 "usingComponents": {
    "painter":"../../components/painter/painter"
  } 
复制代码
.wxml
 <painter :dirty="true" palette="{{paintPallette}}" bind:imgOK="onImgOK"bind:touchEnd="touchEnd" widthPixels="1000" />
 
 //palette 物料对象
 //imgOK 绘制成功的回调
 //touchEnd 绘制失败的回调
 还支持很多方法属性不一一说了
复制代码
//物料文件 在上面说的可视化工具画完之后导出json文件就是以下代码,根据你的需求再调整一下
export default class LastMayday {
  palette(params) {
    return (
      {
        "width": "375px",
        "height": "580px",
        "background": "#040406",
        "views": [
          {
            "type": "image",
            "url": "网络图片",
            "css": {
              "width": "355px",
              "height": "560px",
              "top": "3px",
              "left": "10px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "image",
            "url": "网络图片",
            "css": {
              "width": "11px",
              "height": "13px",
              "top": "16px",
              "left": "64px",
              "borderColor": "#000000",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "text": params.point + '',
            "css": {
              "color": "#fff",
              "background": "rgba(0,0,0,0)",
              "width": "100px",
              "height": "20.02px",
              "top": "13px",
              "left": "81px",
              "borderColor": "#000000",
              "fontSize": "14px",
              "fontWeight": "normal",
              "maxLines": "2",
              "lineHeight": "20px",
              "textAlign": "left"
            }
          },
          {
            "type": "image",
            "url": "网络图片",
            "css": {
              "width": "211px",
              "height": "209px",
              "top": "43px",
              "left": "82px",
              "borderColor": "#000000",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "text": params.email,
            "css": {
              "color": "#d4d4d4",
              "width": "355px",
              "height": "18px",
              "top": "300px",
              "borderColor": "#000000",
              "fontSize": "13px",
              "lineHeight": "18",
              "textAlign": "center"
            }
          },
          {
            "type": "image",
            "url": "网络图片",
            "css": {
              "width": "120px",
              "height": "80px",
              "top": "327px",
              "left": "130px",
              "borderColor": "#000000",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "text",
            "text": params.highestValue,
            "css": {
              "color": "#f5a623",
              "width": "355px",
              "height": "33.9px",
              "top": "344px",
              "left": "10px",
              "borderColor": "#000000",
              "fontSize": "30px",
              "fontWeight": "600",
              "lineHeight": "33px",
              "textAlign": "center"
            }
          },
          {
            "type": "text",
            "text": params.highestValueLabel,
            "css": {
              "color": "#f5a623",
              "width": "355px",
              "height": "14px",
              "top": "381px",
              "left": "11px",
              "borderColor": "#000000",
              "fontSize": "12px",
              "fontWeight": "500",
              "lineHeight": "13.32px",
              "textDecoration": "none",
              "textAlign": "center"
            }
          },
          {
            "type": "image",
            "url": params.radarUrl,
            "css": {
              "width": "348.55px",
              "height": "129.46px",
              "top": "426px",
              "left": "12px",
              "borderColor": "#000000",
            }
          },
          {
            "type": "text",
            "text": params.name,
            "css": {
              "color": "#99eff4",
              "background": "rgba(0,0,0,0)",
              "width": "177.5px",
              "height": "24px",
              "top": "266px",
              "left": "26px",
              "fontSize": "21px",
              "fontWeight": "600",
              "lineHeight": "23px",
              "fontFamily": "PingFangSC",
              "textAlign": "right"
            }
          },
          {
            "type": "text",
            "text": params.position,
            "css": {
              "color": "#d4d4d4",
              "width": "155px",
              "height": "15px",
              "top": "272px",
              "left": "207.5px",
              "borderColor": "#000000",
              "fontSize": "13px",
              "fontWeight": "normal",
              "lineHeight": "15px",
              "textDecoration": "none",
              "fontFamily": "PingFangSC",
              "textAlign": "left"
            }
          },
          {
            "type": "rect",
            "css": {
              "background": "rgba(247, 107, 28, 1)",
              "width": "180px",
              "height": "180px",
              "top": "60px",
              "left": "98px",
              "borderRadius": "90px",
              "color": "rgba(247, 107, 28, 1)"
            }
          },
          {
            "type": "rect",
            "css": {
              "background": "#000",
              "width": "162px",
              "height": "162px",
              "top": "69px",
              "left": "107px",
              "borderRadius": "76px",
              "color": "#000"
            }
          },
          {
            "type": "image",
            "url": params.headUrl,
            "css": {
              "width": "150px",
              "height": "150px",
              "top": "74px",
              "left": "113px",
              "borderRadius": "75px",
              "borderColor": "#000000",
              "mode": "scaleToFill"
            }
          }
        ]
      }
    );
  }
}
复制代码
  • 将该文件引入你的js文件中

import Card from './card'

  • 再合适的时机生成对应canvas(用户主动触发或者页面加载完成?看你需求)

this.setData({ paintPallette: new Card().palette(‘需要动态生成的参数’), });

  • 看一下绘制成功的回调执行了吗
onImgOK(e) {
   console.log(e.detail.path) //到这,你的海报已经生成成功了
  },
复制代码
  • 接下来就是剩下最简单的步骤了

    • 分享
    onShareAppMessage()
    onShareTimeline()
    复制代码
    • 保存到本地
    saveImageToPhotosAlbum() //这里需要注意保存到本地需要用户授权,需要处理的是:如果用户第一次点击拒绝,想再次拉起授权框的时候
    复制代码

    以上,没有贴很多代码,以思路为主,不足的地方请各位大佬指导~

相关案例查看更多