小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)分享朋友圈功能

發(fā)布時間:2021-06-15 08:57 所屬欄目:小程序開發(fā)教程

  公司很多時候都會想要傳播自己的小程序,從而獲取更多的流量,從而分享朋友圈的功能就誕生了。

分享步驟:

  一、通過canvas組件把要分享出去的東西畫出來

  二、通過saveImageToPhotosAlbum方法把canvas生成的畫布轉(zhuǎn)成圖片保存到本地

  三、通過發(fā)朋友圈的方式把之前保存的圖片發(fā)到朋友圈

下面上代碼:

  一、通過canvas組件把要分享出去的東西畫出來

  首先在wxml添加一個畫布(canvas),畫布上會綁定一個bindtap事件(用來預覽圖片的功能)

  要實現(xiàn)分享,最重要的是獲取二維碼:為滿足不同需求和場景,這里提供了三個接口,開發(fā)者可挑選適合自己的接口。

  A接口,生成小程序碼,可接受path參數(shù)較長,生成個數(shù)受限。

  B接口,生成小程序碼,可接受頁面參數(shù)較短,生成個數(shù)不受限。

  C接口,生成二維碼,可接受path參數(shù)較長,生成個數(shù)受限。

  第一步:

  先通過AppId和AppSecret獲取AccessToken(注意:調(diào)用接口時,請登錄“微信公眾平臺-開發(fā)-基本配置”提前將服務器IP地址添加到IP白名單中,點擊查看設(shè)置方法,否則將無法調(diào)用成功,token有效期為兩小時)

  請求地址:https://api.weixin.qq.com/cgi-bin/token

  請求方式:GET

  請求參數(shù):

  返回參數(shù):

  第二步:

  有了AccessToken,我們就可以獲取不同的小程序二維碼了。

  小程序碼分兩種:前面一種為菊花式小程序碼(接口A和接口B),另一種是狗皮膏藥式QR碼(接口C)

  接口A: 適用于需要的碼數(shù)量較少的業(yè)務場景 接口地址:

  https://api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN

  注意:通過該接口生成的小程序碼,永久有效,數(shù)量限制見文末說明,請謹慎使用。用戶掃描該碼進入小程序后,將直接進入 path 對應的頁面。

  接口B:適用于需要的碼數(shù)量極多的業(yè)務場景

  接口地址:

  https://api.weixin.qq.com/wxa/ge ... _token=ACCESS_TOKEN

  注意:通過該接口生成的小程序碼,永久有效,數(shù)量暫無限制。用戶掃描該碼進入小程序后,開發(fā)者需在對應頁面獲取的碼中 scene 字段的值,再做處理邏輯。使用如下代碼可以獲取到二維碼中的 scene 字段的值。調(diào)試階段可以使用開發(fā)工具的條件編譯自定義參數(shù) scene=xxxx 進行模擬。首頁onLoad的時候獲取參數(shù)需varscene = decodeURIComponent(options.scene)

  接口C:適用于需要的碼數(shù)量較少的業(yè)務場景

  接口地址:

  https://api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN

  注意:通過該接口生成的小程序二維碼,永久有效,數(shù)量限制見文末說明,請謹慎使用。用戶掃描該碼進入小程序后,將直接進入 path 對應的頁面。

  // canvas生成圖片地址

  return new Promise(function (resolve, reject) {

  wx.getSystemInfo({

  success: function (res) {

  var arr = [res.windowWidth, res.windowHeight];

  resolve(arr);

  }

  })

  }).then(function (value) {

  wx.canvasToTempFilePath({

  destWidth: value[0] * 6, // 這里將圖片擴大6倍,是為了讓保存的圖片更清晰

  destHeight: value[1] * 6,

  fileType: "jpg",

  canvasId: 'shareCanvas',// 該id就是canvas組件的 canvas_id

  quality: 1,

  success: function (obj) {

  console.log(obj.tempFilePath);

  that.setData({

  tempFilePath: obj.tempFilePath

  })

  }

  })

  })

  二、最后通過saveImageToPhotosAlbum方法把canvas生成的畫布轉(zhuǎn)成圖片保存到相冊

  //保存至相冊

  saveImageToPhotosAlbum: function () {

  var that = this

  var value = that.data.tempFilePath;// 該圖片為你上面畫出來的圖片地址;

  wx.saveImageToPhotosAlbum({

  filePath: value,

  success: (res) => {

  // 保存成功

  },

  fail: function (res) {

  console.error("打開設(shè)置窗口");

  wx.openSetting({

  success(settingdata) {

  console.error(settingdata)

  if (settingdata.authSetting["scope.writePhotosAlbum"]) {

  console.error("獲取權(quán)限成功,再次點擊圖片保存到相冊")

  } else {

  console.error("獲取權(quán)限失敗")

  }

  }

  })

  }

  })

  },

  復制代碼

  三、通過發(fā)朋友圈的方式把之前保存的圖片發(fā)到朋友圈(相信這一步大家都懂,我就不介紹了)

  小程序的一些限制

  1.tip:通過該接口,僅能生成已發(fā)布的小程序的二維碼。

  2.tip:可以在開發(fā)者工具預覽時生成開發(fā)版的帶參二維碼。

  3.tip:接口A加上接口C,總共生成的碼數(shù)量限制為100,000,請謹慎調(diào)用。

  4.tip: POST 參數(shù)需要轉(zhuǎn)成 json 字符串,不支持 form 表單提交。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26488.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢