小程序生成小程序码分享朋友圈

- 日理万妓 2022-03-14 17:58 347阅读 0赞

# **小程序实现分享** #

公司很多时候都会想要传播自己的小程序，从而获取更多的流量，从而分享朋友圈的功能就诞生了。

分享步骤：

一、通过canvas组件把要分享出去的东西画出来

二、通过saveImageToPhotosAlbum方法把canvas生成的画布转成图片保存到本地

三、通过发朋友圈的方式把之前保存的图片发到朋友圈

下面上代码：

## 一、通过canvas组件把要分享出去的东西画出来 ##

首先在wxml添加一个画布（canvas），画布上会绑定一个bindtap事件（用来预览图片的功能）

![20200529140515212.png][]

要实现分享，最重要的是获取二维码：为满足不同需求和场景，这里提供了三个接口，开发者可挑选适合自己的接口。

A接口，生成小程序码，可接受path参数较长，生成个数受限。

B接口，生成小程序码，可接受页面参数较短，生成个数不受限。

C接口，生成二维码，可接受path参数较长，生成个数受限。

### 第一步： ###

先通过AppId和AppSecret获取AccessToken（注意:调用接口时，请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，点击查看设置方法，否则将无法调用成功,token有效期为两小时）

请求地址：[https://api.weixin.qq.com/cgi-bin/token][https_api.weixin.qq.com_cgi-bin_token]

请求方式：GET

请求参数：

<table> 
 <tbody> 
  <tr> 
   <td> <p>参数</p> </td> 
   <td> <p>是否必须</p> </td> 
   <td> <p>说明</p> </td> 
  </tr> 
  <tr> 
   <td> <p>grant_type</p> </td> 
   <td> <p>是</p> </td> 
   <td> <p>获取access_token填写client_credential</p> </td> 
  </tr> 
  <tr> 
   <td> <p>appid</p> </td> 
   <td> <p>是</p> </td> 
   <td> <p>第三方用户唯一凭证</p> </td> 
  </tr> 
  <tr> 
   <td> <p>secret</p> </td> 
   <td> <p>是</p> </td> 
   <td> <p>第三方用户唯一凭证密钥，即appsecret</p> </td> 
  </tr> 
 </tbody> 
</table>

返回参数：

<table> 
 <tbody> 
  <tr> 
   <td> <p>参数</p> </td> 
   <td> <p>说明</p> </td> 
  </tr> 
  <tr> 
   <td> <p>access_token</p> </td> 
   <td> <p>获取到的凭证</p> </td> 
  </tr> 
  <tr> 
   <td> <p>expires_in</p> </td> 
   <td> <p>凭证有效时间，单位：秒</p> </td> 
  </tr> 
 </tbody> 
</table>

详细详细请看api文档：[https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421140183][https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421140183]

### 第二步： ###

有了AccessToken，我们就可以获取不同的小程序二维码了。

小程序码分两种：前面一种为菊花式小程序码（接口A和接口B），另一种是狗皮膏药式QR码（接口C）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70][]

**接口A：**适用于需要的码数量较少的业务场景 接口地址：

https://api.weixin.qq.com/wxa/getwxacode?access\_token=ACCESS\_TOKEN

注意：通过该接口生成的小程序码，永久有效，数量限制见文末说明，请谨慎使用。用户扫描该码进入小程序后，将直接进入 path 对应的页面。

**接口B：**适用于需要的码数量极多的业务场景

接口地址：

https://api.weixin.qq.com/wxa/getwxacodeunlimit?access\_token=ACCESS\_TOKEN

注意：通过该接口生成的小程序码，永久有效，数量暂无限制。用户扫描该码进入小程序后，开发者需在对应页面获取的码中 scene 字段的值，再做处理逻辑。使用如下代码可以获取到二维码中的 scene 字段的值。调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟。首页onLoad的时候获取参数需var scene = decodeURIComponent(options.scene)

**接口C：**适用于需要的码数量较少的业务场景

接口地址：

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access\_token=ACCESS\_TOKEN

注意：通过该接口生成的小程序二维码，永久有效，数量限制见文末说明，请谨慎使用。用户扫描该码进入小程序后，将直接进入 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生成的画布转成图片保存到相册** ##

//保存至相册

saveImageToPhotosAlbum: function () \{

var that = this

var value = that.data.tempFilePath;// 该图片为你上面画出来的图片地址；

wx.saveImageToPhotosAlbum(\{

filePath: value,

success: (res) => \{

// 保存成功

\},

fail: function (res) \{

console.error("打开设置窗口");

wx.openSetting(\{

success(settingdata) \{

console.error(settingdata)

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

console.error("获取权限成功，再次点击图片保存到相册")

\} else \{

console.error("获取权限失败")

\})

\},

## 三、通过发朋友圈的方式把之前保存的图片发到朋友圈（相信这一步大家都懂，我就不介绍了） ##

小程序的局限性

1. tip：通过该接口，仅能生成已发布的小程序的二维码。

2. tip：可以在开发者工具预览时生成开发版的带参二维码。

3. tip：接口A加上接口C，总共生成的码数量限制为100,000，请谨慎调用。

4. tip: POST 参数需要转成 json 字符串，不支持 form 表单提交。

**附：大家有不懂的可以一起探讨哦**

[20200529140515212.png]: /images/20220311/d4433ce11c8a4846b140dd084d05abb0.png
[https_api.weixin.qq.com_cgi-bin_token]: https://api.weixin.qq.com/cgi-bin/token
[https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421140183]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70]: /images/20220311/95cb130ad5324cdabb10f5f207601fe3.png