微信小程序?qū)崿F(xiàn)分享商品海報功能
我們在微信小程序中經(jīng)常會使用到分享商品海報,或者是重繪微信小程序分享鏈的圖片功能。實(shí)現(xiàn)該功能只要跟著如下幾個步驟就可以快速實(shí)現(xiàn)啦?。ū疚氖纠a使用的是uni-app,原生或者其他框架需要將uni前綴該成對應(yīng)框架前綴即可;)
步驟描述不清晰或者不想看步驟?那就直接訪問完整代碼地址吧
完整代碼演示:微信小程序 - 分享商品海報
相關(guān)文檔:
第一步:提前將需要分享的圖片素材先緩存至本地臨時圖片路徑;
initPic(){ this.handleNetImg('網(wǎng)絡(luò)圖片地址').then((res)=>{ this.bgdSrc =res.path;//保存這個臨時圖片路徑 } } //生成臨時圖片 handleNetImg(imagePath) { return new Promise((resolve, reject) => { uni.getImageInfo({ src: imagePath, success: function (res) { resolve(res); } }); }); },
第二步:加入分享按鈕以及Canvas元素;
<button open-type="share">點(diǎn)擊分享</button> <button @click="getPhotosAlbumAuth">保存本地</button> <view class="canvas-box"> <canvas canvas-id='mycanvas'></canvas> </view>
第三步:初始Canvas,將內(nèi)容畫到Canvas上,畫完后將畫布生成臨時圖片;
createShareGoods(){ uni.showLoading({ title:'正在生成中...' }) var ctx = uni.createCanvasContext('mycanvas', this); ctx.drawImage(this.bgdSrc, 0, 0, 300, 240); //畫背景圖 ctx.drawImage(this.itemPic, 0, 0, 400, 400, 30, 45, 140, 140);//畫商品圖片 ctx.drawImage(this.qrcode, 0, 0, 400, 400, 225, 5, 100, 100);//畫二維碼,這邊可以變成小程序碼 //現(xiàn)價 ctx.setFillStyle('#E80013'); ctx.setFontSize(18); ctx.fillText('這邊可以寫一些說明之類的', 180, 100); ctx.setFillStyle('#E80013'); ctx.setFontSize(18); ctx.fillText('這邊可以寫一些說明之類的', 100, 100); //開始畫畫完后生成新的臨時圖片地址 ctx.draw(false, () => { setTimeout(()=>{ uni.canvasToTempFilePath({ canvasId: 'mycanvas', success: (res) => { uni.hideLoading(); this.picTempUrl=res.tempFilePath; } }); }, 300); }) },
第四步:點(diǎn)擊分享按鈕,完成分享;
/** * 分享頁面到微信好友 */ onShareAppMessage(){ return { title: '限時特賣:'+this.name, path: 'pages/index/index?data=這邊可以傳一些ID啥的', imageUrl: this.picTempUrl } },
第五步:保存到本地(獲取權(quán)限后保存);
//獲取手機(jī)相冊權(quán)限 getPhotosAlbumAuth(){ uni.getSetting({ success:(res)=> { if (!res.authSetting['scope.writePhotosAlbum']) { uni.authorize({ scope: 'scope.writePhotosAlbum', success:()=> { this.saveImage(); } }) } else { this.saveImage(); } } }) }, //保存海報 saveImage(){ uni.saveImageToPhotosAlbum({ filePath: this.picTempUrl, success: (data)=> { uni.showToast({ title: "圖片保存成功", icon: "success", mask: true }) }, complete: () => { this.posterStatus=false; } }) },
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的類與實(shí)例實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中的類與實(shí)例實(shí)現(xiàn)方法,非常巧妙的模擬了類與實(shí)例的實(shí)現(xiàn)過程,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
通過 bootstrap-table 的Column 配置項(xiàng)中的formatter,將獲取到的數(shù)據(jù)轉(zhuǎn)換為包含數(shù)據(jù)的 select 控件。然后根據(jù)用戶選擇項(xiàng)更新對應(yīng)單元格數(shù)據(jù),最后通過getallselection方法獲取所選行數(shù)據(jù)2017-07-07