最近、ユニアプリのプロジェクトに合成シェアの数字を必要と会った、実際には、初めは、元の文言を行うことです、PC側のテストで見つかった背景は可能ですが、問題は、APPシミュレータで表示されます、おそらくjsの二つの異なる環境は今、ユニアプリの公式ウェブサイトは、2つの同一視することはできないと言いました
のが主な方法を見てみましょうほとんどの書き始めました
1 // ダウンロードリンクを取得 2 getDownloadLinkを（）{ 。3 本。$ Axios 。4 に.get（ '/アプリケーション/アドレス' ） 。5 .then（RES => { 。6 にconsole.log（RES） 。7 この .downloadLink = res.data .DATA 。8 // 二次元コードを回す 9。 この.makeCode（） 10 }） 11。 。キャッチ（ERR => { 12である にconsole.log（ERR）; 13れます }）; 14 } 15 // リンクは、二次元コード、トランスフェクト 16 makeCodeを（）{ 17。 IMG = QR.createQrCodeImg（LET この .downloadLink、{ 'サイズ'：300 }）; 18は この .downloadImg = IMG 19 にconsole.log （IMG）は 20であり、 はconsole.log（この .detailsData.banners [0 ]） 21は 22である }、 23である // 共有産物合成画像 24 StarDrawの（）{ 25 LETは_that = この 26であるが base64Img1は= 'データ：画像/ GIF、BASE64、'せCONCAT（。この .detailsData.bannersBase64 [0 ]） 27 にconsole.log（base64Img1） 28 // はconsole.log（ 'データ：画像/ GIF、BASE64、'。連結（this.detailsData.bannersBase64 [0]）） 29 //を返す 30 のvarデータ= [base64Img1、この.downloadImg] 31 VARの BASE64 = [] 32 のvar = 'FN次方' bigName 33 のvar starName = この.detailsDataを。名前 34を 場合（この .detailsData.lowestPrice === この.highestPrice）{ 35 VARの価格= '¥' + この.detailsData.lowestPrice 36 } 他{ 37 のvar = '¥' +価格この .detailsData.lowestPrice + '〜' + この.detailsData.highestPrice 38 39 } 40 コンソール。 （ログこの .detailsData.banners [0 ]） 41 にconsole.log（価格） 42 VAR C =のdocument.createElement（ 'キャンバス' ）、 43 // VARのC =この。$ refs.canvas 44 CTX = c.getContext（ '2D' ）、 45 LEN = data.length 46 c.width = 300 47 c.height = 450 48 ctx.rect（0、0、300、300 ） 49 ctx.fillStyle =「#FFF ' 50 ctx.fill（） 51 関数描画（N）{ 52 であれば（N < LEN）{ 53 のvar IMG = 新しいイメージ 54 // img.setAttribute（ "crossOrigin"、'匿名） 55 // img.crossOrigin = 「匿名」; //解决跨域 56 img.crossOrigin = '匿名' 57 img.src = データ[N] 58 img.onload = 関数（）{ 59 であれば（N == 1 ）{ 60 ctx.fillRect（0、300、300、c.height- 300 ） 61 ctx.fillStyle = '#FFF' 62 ctx.drawImage（IMG、c.width-110、330、100、100 ）。 63 にconsole.log（1 ） 64 ctx.font = '14pxのサンセリフ' 65 ctx.textBaseline = '上部' 66 ctx.textAlign = '開始' 67 ctx.fillStyle = '＃000' 68 ctx.fillText（bigName、10320 ） 69 ctx.fillText（starName、10、340 ） 70 ctx.font = ' 14pxのサンセリフ」 71 ctx.fillStyle = '赤' 72 ctx.fillText（価格、10、380 ） 73 はconsole.log（2 ） 74 } 他{ 75 ctx.drawImage（IMG、0、0 、c.width、c.height） 76 } 77 描画（N + 1 ）; 78 } 79 } 他{ 80 // 結果のイメージ広告保存 81 base64.pushを（ c.toDataURL（））; 82 _that.base64Data = Base64で[0 ] 83 にconsole.log（_that.base64Data） 84 // のFn（）; 85 } 86 } 87 描画（0 ）。 88 }
ネイティブのようなことは、書かれたブラウザを使用してテストしたが、それは間違っているAPPになります
のは、解決するためにユニアプリを使用する方法を見てみましょう
1 copyFn（）{ 2 = LET この 3 VARの goodsName = この.detailsData.name 4 のvar = 'FN'テキスト 5 た場合（この .detailsData.lowestPrice === 本.highestPrice）{ 6 VARの価格= '¥' + この.detailsData.lowestPrice 7 } 他{ 8 のvar価格= '¥' + この .detailsData.lowestPrice + '〜' + この.detailsData.highestPrice 9 10 } 11 せWW、HH; 12である base64Img1は= 'データ：画像/ GIF、Base64で、'せCONCAT（。この .detailsData.bannersBase64 [0 ]） 13である ）= uni.createSelectorQueryクエリ（CONST。で（この）; 14 クエリ。 SELECT（ '＃のSSS'）boundingClientRect（データ=> { // 取得し、DOMキャンバス 15 WW = data.width; // 正確な幅と高さ 16 HH = 450 。17 VAR CTX = uni.createCanvasContext（ 'myCanvas'）/ / 結合キャンバス 18 ctx.drawImage（base64Img1、0、0、WW、300）; // 画像に充填 。19 // this.downloadImg 20 ctx.setFillStyle（ '＃000'） // テキストスタイルのコンテンツセット 21をれる ctx.setFontSize（20であります）; 22である ctx.rect（0、300、WW、300 ） 23が ctx.setFillStyle（ '＃FFF' ） 24 ctx.fill（） 25 ctx.drawImage（that.downloadImg、240、360、100、100 ） 26であります / / ctx.setTextAlign（ 'センター'） 27 ctx.setFillStyle（ '＃000'） 28 ctx.fillText（テキスト、50、HH / 2 + 120） 29 // ctx.setTextAlign（ 'センター'） 30 ctx.fillText（goodsName、50、HH / 2 + 150） 31は ctx.setFillStyle（ '赤' ） 32 ctx.setFontSize（16 ）; 33である ctx.fillText（価格、50、HH / 180 + 2）。 34である （ctx.draw）; // キャンバスに出力 35 uni.showLoading（{ // ローディングの効果を高める待つ 36 マスク：trueに 37 }） 38であります setTimeout（（）=> { // 遅延なし、次いで、時には不定付与 39 uni.canvasToTempFilePath（{ 40 canvasId 'myCanvas' 、 41がある 成功：（RES）=> { 42がある にconsole.log（res.tempFilePath） 43は この .shareImage = res.tempFilePath 44である } 45 }） 46である uni.hideLoading（）; 47 }、3000 ） 48 。}）Execの（）。 49 50 }
これは、その後、モンタージュをユニアプリ共有インタフェースのシェアを呼び出すことにより、エラーでAPPの問題を解決するだろう