欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序"海報(bào)"需求 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序"海報(bào)"需求

發(fā)表時間：2021-4-13

發(fā)布人：葵宇科技

瀏覽次數(shù)：71

背景

  • 最近手上有一個小程序項(xiàng)目，上周接到這樣一個需求，用戶可以將一個頁面下載到本地，分享給朋友/朋友圈（這里的分享是指將當(dāng)前頁面作為小程序的縮略圖進(jìn)行小程序的分享），需要下載或分享的頁面如下：

  • 用戶需要下載、分享的就是紅色框內(nèi)的海報(bào)。

OK，需求明確開始干活了

  • 實(shí)現(xiàn)方式，第一次該類型的需求，網(wǎng)上了解到兩種實(shí)現(xiàn)方式（應(yīng)該還有更多）

    1. wxml-to-canvas 小程序內(nèi)通過靜態(tài)模板和樣式繪制 canvas ，導(dǎo)出圖片，可用于生成分享圖等場景。該組件是由微信提供的
    2. Painter 一款輕量級的小程序海報(bào)生成組件，我在項(xiàng)目中使用了這一種實(shí)現(xiàn)方式，因?yàn)樗С挚梢暬献蓀ainter代碼，簡直不要太香。① 可視化工具地址 ② git地址

    【PS】：兩種實(shí)現(xiàn)的方式原理是一致的，提供物料--繪制canvas--生成圖片，關(guān)于物料提供：支持矩形，圖片，文字等...如果你的需求有canvas，考慮使用 wx.downloadFile 將 canvas 轉(zhuǎn)為圖片進(jìn)行物料提供，我在項(xiàng)目中是這么做的。

  • 分析用戶需要下載的海報(bào)元素組成，圖片、文字、canvas（下方的雷達(dá)圖是canvas標(biāo)簽，需要先將canvas轉(zhuǎn)為圖片提供物料）

  • 將 painter 重git拉下來放在自己項(xiàng)目的組件中，并在需要使用的頁面中注冊組件。

.json
 "usingComponents": {
    "painter":"../../components/painter/painter"
  } 
復(fù)制代碼
.wxml
 <painter :dirty="true" palette="{{paintPallette}}" bind:imgOK="onImgOK"bind:touchEnd="touchEnd" widthPixels="1000" />
 
 //palette 物料對象
 //imgOK 繪制成功的回調(diào)
 //touchEnd 繪制失敗的回調(diào)
 還支持很多方法屬性不一一說了
復(fù)制代碼
//物料文件 在上面說的可視化工具畫完之后導(dǎo)出json文件就是以下代碼，根據(jù)你的需求再調(diào)整一下
export default class LastMayday {
  palette(params) {
    return (
      {
        "width": "375px",
        "height": "580px",
        "background": "#040406",
        "views": [
          {
            "type": "image",
            "url": "網(wǎng)絡(luò)圖片",
            "css": {
              "width": "355px",
              "height": "560px",
              "top": "3px",
              "left": "10px",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "mode": "scaleToFill"
            }
          },
          {
            "type": "image",
            "url": "網(wǎng)絡(luò)圖片",
            "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": "網(wǎng)絡(luò)圖片",
            "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": "網(wǎng)絡(luò)圖片",
            "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"
            }
          }
        ]
      }
    );
  }
}
復(fù)制代碼
  • 將該文件引入你的js文件中

import Card from './card'

  • 再合適的時機(jī)生成對應(yīng)canvas（用戶主動觸發(fā)或者頁面加載完成？看你需求）

this.setData({ paintPallette: new Card().palette(‘需要動態(tài)生成的參數(shù)’), });

  • 看一下繪制成功的回調(diào)執(zhí)行了嗎
onImgOK(e) {
   console.log(e.detail.path) //到這，你的海報(bào)已經(jīng)生成成功了
  },
復(fù)制代碼

  • 接下來就是剩下最簡單的步驟了

    • 分享
    onShareAppMessage()
onShareTimeline()
復(fù)制代碼
    • 保存到本地
    saveImageToPhotosAlbum() //這里需要注意保存到本地需要用戶授權(quán)，需要處理的是：如果用戶第一次點(diǎn)擊拒絕，想再次拉起授權(quán)框的時候
復(fù)制代碼

    以上，沒有貼很多代碼，以思路為主，不足的地方請各位大佬指導(dǎo)~

相關(guān)案例查看更多