欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)分享商品海報功能

 更新時間:2019年09月30日 08:01:45   作者:泠青云  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享商品海報功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

我們在微信小程序中經(jīng)常會使用到分享商品海報,或者是重繪微信小程序分享鏈的圖片功能。實(shí)現(xiàn)該功能只要跟著如下幾個步驟就可以快速實(shí)現(xiàn)啦?。ū疚氖纠a使用的是uni-app,原生或者其他框架需要將uni前綴該成對應(yīng)框架前綴即可;)

步驟描述不清晰或者不想看步驟?那就直接訪問完整代碼地址吧

完整代碼演示:微信小程序 - 分享商品海報

相關(guān)文檔:

uni-app官方文檔
微信小程序官方文檔

第一步:提前將需要分享的圖片素材先緩存至本地臨時圖片路徑;

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)文章

  • jsjiami.v6解密原理示例分析

    jsjiami.v6解密原理示例分析

    這篇文章主要為大家介紹了jsjiami.v6解密原理示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • JavaScript常用對象的方法和屬性小結(jié)

    JavaScript常用對象的方法和屬性小結(jié)

    JavaScript是基于對象的語言。我們知道,對象是由一組數(shù)據(jù)(JavaScript中稱之為屬性)和施加在這組數(shù)據(jù)上的方法組成的。JavaScript中還有一些不屬于任何對象的系統(tǒng)函數(shù)
    2012-01-01
  • JavaScript中的類與實(shí)例實(shí)現(xiàn)方法

    JavaScript中的類與實(shí)例實(shí)現(xiàn)方法

    這篇文章主要介紹了JavaScript中的類與實(shí)例實(shí)現(xiàn)方法,非常巧妙的模擬了類與實(shí)例的實(shí)現(xiàn)過程,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • 微信小程序自定義Modal彈框

    微信小程序自定義Modal彈框

    這篇文章主要為大家詳細(xì)介紹了微信小程序自定義Modal彈框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • js如何清空input?file的值

    js如何清空input?file的值

    這篇文章主要介紹了js如何清空input?file的值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • JavaScript判斷對象是否為空對象的幾種常見方法

    JavaScript判斷對象是否為空對象的幾種常見方法

    經(jīng)典面試題,研發(fā)時也經(jīng)常遇見的一個問題,如何判斷一個對象是空對象,這篇文章主要給大家介紹了關(guān)于JavaScript判斷對象是否為空對象的幾種常見方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 獲取select元素被選中的文本內(nèi)容的js代碼

    獲取select元素被選中的文本內(nèi)容的js代碼

    獲取select元素被選中的文本內(nèi)容的方法有很多,本文為大家介紹下使用javascript來輕松實(shí)現(xiàn)下
    2014-01-01
  • 微信小程序頁面間傳值的實(shí)現(xiàn)方法示例

    微信小程序頁面間傳值的實(shí)現(xiàn)方法示例

    這篇文章主要給大家介紹了關(guān)于微信小程序頁面間傳值的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Bootstrap Table 在指定列中添加下拉框控件并獲取所選值

    Bootstrap 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
  • js判斷選擇時間不能小于當(dāng)前時間的示例代碼

    js判斷選擇時間不能小于當(dāng)前時間的示例代碼

    判斷選擇時間不能小于當(dāng)前時間的方法有很多,在本文為大家詳細(xì)介紹下使用js是如何實(shí)現(xiàn)的,感興趣的朋友可以嘗試操作下
    2013-09-09

最新評論