uni-app小程序使用wxml-to-canvas實(shí)現(xiàn)海報(bào)分享

先是在uni-app的插件庫(kù)找了N個(gè)插件杂数,都會(huì)報(bào)錯(cuò)??
canvasToTempFilePath: fail canvas is empty

搜了各種解決方案瘸洛,都不行揍移,只能棄用uni-app的插件,可能是因?yàn)榘姹镜脑蚍蠢撸〕绦虻腸anvas已經(jīng)改成了原生的canvas

可以在uni-app項(xiàng)目中引用原生的wxml-to-canvas
1.官網(wǎng)鏈接:https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/wxml-to-canvas.html
2.打開代碼片段代碼片段
3.在程序中新建wxcomponents文件夾那伐,將代碼片段中的miniprogram_npm下的widget-ui和wxml-to-canvas兩個(gè)文件夾復(fù)制進(jìn)去
4.將/wxcomponents/wxml-to-canvas/index.js中的module.exports = require("widget-ui");引用路徑改成module.exports = require("../widget-ui/index.js");
5.配置pages.json(這樣uni-app才會(huì)打包wxcomponents)

"pages": [
    {
      "path": "components/articleShare",
      "style": {
        "usingComponents": {
          "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
        }
      }
    }

wxml-to-canvas的使用問題

1. 要在彈出框unipopup中展示canvas有問題

由于需求是要在彈出框中展示canvas,但是wxml-to-canvas是在生命周期attached中就初始化了canvas信息石蔗,但此時(shí)canvas元素是彈出框被隱藏(可見源碼/wxcomponents/wxml-to-canvas/index.js第160行罕邀,或搜索attached

解決辦法:
思路:等對(duì)話框彈出后,再初始化canvas

  • methods中添加initCanvas方法养距,將上述attatched中的代碼剪切進(jìn)去
  • 在彈出對(duì)話框的方法中調(diào)用如下
open() {
  uni.showLoading();
  //先彈出對(duì)話框
  this.$refs.popup.open("center");
  this.$nextTick(() => {
    //等對(duì)話框展示后诉探,調(diào)用剛剛添加的方法
    this.$refs.widget.initCanvas();
    // 延時(shí),等canvas初始化
    setTimeout(() => {
      this.renderToCanvas();
    }, 500); attached
  });
},

2. wxml-to-canvas要注意的一些問題
  • 只能畫view棍厌,text肾胯,img
  • 每個(gè)元素必須要設(shè)置寬高
  • 默認(rèn)是flex布局,可以通過flexDirection: "column"來改變排列方式
3. 如何畫出自適應(yīng)的canvas(由于默認(rèn)是px單位,所以要改源代碼來實(shí)現(xiàn)自適應(yīng))

思路:用屏幕的寬度/設(shè)計(jì)圖的寬度

第一步,修改/wxcomponents/wxml-to-canvas/index.js
  • attached生命周期中,獲取設(shè)備的寬度,拿到屏幕寬度比率
lifetimes: {
    attached() {
      const sys = wx.getSystemInfoSync();
      //拿到設(shè)備的寬度牲览,跟設(shè)計(jì)圖寬度的比例
      const screenRatio = sys.screenWidth / 375;
      this.setData({
        screenRatio,
        width: this.data.width * screenRatio,
        height: this.data.height * screenRatio,
      });
    },
  },
  • 修改initCanvas方法中的代碼
// canvas.width = res[0].width * dpr;
// canvas.height = res[0].height * dpr;
//以上代碼改為如下代碼
canvas.width = this.data.width * dpr;
canvas.height = this.data.height * dpr;
  • 修改renderToCanvas方法
//const { wxml, style } = args;
//改為
const { wxml, fnGetStyle } = args;
const style = fnGetStyle(this.data.screenRatio)
第二步庸毫,修改傳入renderToCanvassytle對(duì)象改為函數(shù)fnGetStyle(屏幕的寬度比率)
const fnGetStyle = (screenRatio) => {
  return {
    share: {
      backgroundColor: "#fff",
      //所有數(shù)值都要拿設(shè)計(jì)圖上的數(shù)值再乘以屏幕寬度比率
      width: 320 * screenRatio,
      height: 395 * screenRatio,
      padding: 24 * screenRatio,
    },
    ...
}

The EndshareImage

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末炒事,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子欲侮,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宪哩,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)突倍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門秕磷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涂圆,“玉大人,你說我怎么就攤上這事踩衩『峙福” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵荞下,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任允乐,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘援岩。我一直安慰自己,他們只是感情好添瓷,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布凿滤。 她就那樣靜靜地躺著眷蚓,像睡著了一般投队。 火紅的嫁衣襯著肌膚如雪扒披。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音抢韭,去河邊找鬼鞍匾。 笑死梁棠,一個(gè)胖子當(dāng)著我的面吹牛濒蒋,可吹牛的內(nèi)容都是我干的围橡。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼叼旋,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼辟拷!你這毒婦竟也來了邻奠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤上煤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后独泞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衫画,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡削罩,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年微服,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了丛肮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡豌汇,死狀恐怖逻澳,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情暖呕,我是刑警寧澤斜做,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站湾揽,受9級(jí)特大地震影響瓤逼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜库物,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一霸旗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧戚揭,春花似錦诱告、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诲侮。三九已至,卻和暖如春箱蟆,著一層夾襖步出監(jiān)牢的瞬間沟绪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工空猜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绽慈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓辈毯,卻偏偏與公主長(zhǎng)得像坝疼,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子谆沃,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容