微信小程序生成码B类分享朋友圈

这里我提供我个人的几个思路：

• 在小程序端发起请求，然后服务端请求微信 API 获取 ACCESS_TOKEN 。

• 服务端通过 ACCESS_TOKEN 去请求微信 API 生成二维码。

• 服务端保存二维码，把二维码保存的路径返回给小程序（路径线上可访问）。

• 小程序通过服务端保存的路径获取二维码，通过 canvas 将二维码画出。

• 保存图到本地，然后发圈。

小程序端实际操作代码示例：

// 多余的代码我就不贴了，贴关键代码，并且具体的逻辑处理自己酌情处理。
// 请求后端生成 ACCESS_TOKEN
wx.request({
    // 后端接口，自己实现，示例代码后面贴出
    url: 'https://your.domain.com/api/getaccess_token',
    method: "GET",
    success: function (res) {
      // 请求成功后，返回 ACCESS_TOKEN ，保存为临时变量（注：官方的 ACCESS_TOKEN 只具备有 7200 的有效时间）
      let access_token = res.data.data.access_token; // 你可以保存为 data 变量
    }
)}
// 上一步我们已经拿到 ACCESS_TOKEN ， 接下来请求继续请求服务端然后获取二维码路径
wx.request({
      url: 'https://your.domain.com/api/getqr',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
          scene: _that.data.article.id, // B类二维码参数，重要
          // path（注：B类小程序码无论你填写什么都是扫码进去小程序首页！！然后你需要在你首页进行 scene 的一些逻辑处理）
          page: 'pages/home/home', 
          access_token: access_token // 刚刚我们从服务端获取到的 ACCESS_TOKEN
      },
      success: function (res) {
          // 这里我们已经在服务端获取到 二维码线上路径，真实可以访问的资源
          // 我们保存一下
          let qrcodeurl = res.data; // 这里是小程序码的资源路径
      }
)}
// 到这里我们已经拿到了小程序的线上资源了。将资源保存为临时变量
wx.downloadFile({
    // 这里的url要又https://your.domian.com/ 看你怎么返回的路径，我这里没有把我的域名放到url里面，所以我要加个域名。反正就是完整的url
    url: qrcodeurl,
    success: function (res) {
        // 这里我们我们将保存这个小程序码保存为临时文件，具体查看小程序 api 的 downloadFile 
        let qrcodetempfile = res.tempFilePath
    }
})
// 画图，这里是我自己的写的函数。可以参考
// that：调用此函数传过来的当前 this
drawimg: function (that) {
  // 这里将绘图 这里的myCanvas是要在wxml里面的，我的例子：（样式和位置自己写哈）
  // 
  var ctx = wx.createCanvasContext('myCanvas')
  // 画背景色 白色
  ctx.setFillStyle('#ffffff', 600, 600)
  ctx.fillRect(0, 0, 600, 600)
  // 画文章封面图 这是我原本的内容 里面的画图全是临时文件，具体操作看上面 downloadFile
  ctx.drawImage(that.data.coverimgpath, 0, 0, 600, 340);
  // 画二维码
  ctx.drawImage(that.data.qrcodetempfile , 380, 400, 180, 180);
  // 画标题
  ctx.setFontSize(32)
  ctx.setFillStyle('#000000')
  ctx.fillText(that.data.article.title, 20, 390)
   // 画作者
  ctx.setFontSize(18)
  ctx.fillText('文 / ' + that.data.article.author, 20, 460)
  // 画来源
  ctx.fillText('源 / ' + that.data.article.source, 20, 500)
  ctx.draw()
},
// 这里我们已经画完图片了，接下来就是保存这个 Canvas 
// 小程序 API 有个 canvasToTempFilePath，请参考该api
wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  width: 600,
  height: 600,
  destWidth: 600,
  destHeight: 600,
  canvasId: 'myCanvas', // 页面canvas的id 也是我们drawimg的id
  success: function (res) {
      // 可以自己将这个变量存到data里面
      let shareImgSrc: res.tempFilePath
  }
})
// 上一步我们将画图保存为了临时文件，那么接下来就是将这个临时文件保存我们的手机上面了
wx.saveImageToPhotosAlbum({
  filePath: shareImgSrc,
  success(res) {
    wx.showModal({
      title: '存图成功',
      content: '图片成功保存',
      showCancel: false,
      confirmText: '确认',
      confirmColor: '#72B9C3',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确认');
        }
      }
    })
  }
})

  // 这里顺便说一个问题，就是B类小程序码生成后带有scene参数，并且都是直接默认进入app.json的首页的
  // 所以我们要在首页进行一下逻辑判断。我这里比较简单，我PO一下代码
onLoad: function (option) {

// 这里是判断用户是否扫码进来的 
// 因为我的是文章id，所以相对比较好处理，具体情况具体分析
if (decodeURIComponent(option.scene) > 0) {
  wx.redirectTo({
    url: "/pages/articles/article-detail/article-detail?id=" + decodeURIComponent(option.scene)
  })
 }
}

以上就是小程序的关键代码啦，复制粘贴是没有用的啦，你要理解步骤，并且在自己的理解基础上进行修改和优化。

接下来就是 PO 服务端API的关键代码啦（注：我用的是PHP thinkphp框架）

/**
 * 获取access token
 *
 * @return void
 */
public function getaccess_tokenAction()
{
    $appid = 'yourappid';
    $secret = 'yoursecret';
    $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
    $data = $this->curl_get($url);
    // 这里的返回数据你们要注意自己的返回，我为了简单说明就直接=了
    return return_msg(200, '成获取access token', $data);
}

/**
 * 获取小程序码 B类
 *
 * @return void
 */
public function getqrAction()
{
    $access_token = input('access_token');
    $url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token={$access_token}";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
    // post 请求方式
    curl_setopt($ch, CURLOPT_POST, 1);
    // post 请求的数据
    $scene = input('scene');
    $path = input('path');
    // $post_data = '{"scene":"xxxx","path":"pages/articles/articles"}';
    $post_data = json_encode(['scene' => $scene, 'path' => $path]);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
    // 这里要注意 curl返回的是二进制文件，所以我们要写入file里面。
    $output = curl_exec($ch);
    curl_close($ch);
    // file_put_contents($_SERVER["DOCUMENT_ROOT"].'/adsf.jpg', $output);
    // 上传的文件路径
    $path = '/upload/qrcode';
    // 上传的文件名字
    $filename = 'qrcode_'.uniqid().'.jpg';
    $file = fopen($_SERVER["DOCUMENT_ROOT"].$path.'/'.$filename, "w");//打开文件准备写入
    fwrite($file, $output);//写入
    fclose($file);//关闭
    $file_path = $path.'/'.$filename;
    return return_msg(200, '成获取小程序码', $file_path);
}
// 第一个函数调用用的
public function curl_get($url)
{
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $data = curl_exec($curl);
    $err = curl_error($curl);
    curl_close($curl);
    return json_decode($data, true);
}

php服务端代码也给了，那么我就 PO 一下我的运行效果图吧。

• 首页，长按封面图触发事件

  
  
  

  微信图片_20180203154701.png

• 生成的小程序码和封面图一起画

  
  
  

  微信图片_20180203154826.png

• 保存之后

  
  
  

  微信图片_20180203154928.png

• 最后生成的效果图

  
  
  

  wx3e2ac0555c5656b2.o6zAJsxbLLfTz-f6IkAzD-VTPWVA.120ed048b0923cad77fc9a49de1b0259.png

该小程序已经上线了（扫码可以直接进去）小程序名字叫 - 蚂蚁童话
但是二维码的功能也是今天提交审核，希望大家多多支持。

第一次写这类技术文章，不是很会，希望大家能看懂吧。。心累。