微信小程序生成小程序码图片-【附坑点】

深碍√TFBOYSˉ_ 2023-07-07 12:39 51阅读 0赞

最近做小程序遇到一个功能：

从列表进入的详情页面，有生成海报的功能，这个功能用canvas就可以实现，我之前的文章有哦。[附上链接][Link 1]

只是这次的功能上要在海报上加上生成当前页面的小程序码，分享出去朋友识别就能进入这个页面。先看看我做出的最后效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70]

比如小程序页面路径是 “/pages/home/detail?id=4100”，这是你要分享出去的页面路径。

好，下面来讲怎么实现这个功能：先来看一组小程序生成小程序码的[官方文档][Link 2]  
我们一般用的比较多的也就是**接口B**，

**1、先让后台调用微信文档，生成小程序码图片接口文档：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 1]  
**知识点：如果页面有参数传递，把参数分为page和scene字段分开；没有参数，就只用page字段。**

**2、根据上一步，后端返回了带参数的小程序码图片地址：**  
https://zp-png1.oss-cn-beijing.aliyuncs.com/11582446762.jpg  
通过这个地址，把图片画到canvas里面：  
【小程序中，canvas绘制图片，可使用drawImage方法，但是绘制网络图片时，在手机端不会显示，需要先将网络图片下载到本地，然后用图片的本地路径绘制。如下伪代码：】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 2]

**3、通过drawImage方法将保存的图片绘制到canvas中**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 3]  
**4、将canvas保存为img图片**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 4]  
**整个过程就完毕了，加上详情页面兼容处理代码**

onLoad: function (options) {
        let that = this;
        let pidtemp
        if (options.scene){
          var getQueryString = {}
          var strs = decodeURIComponent(options.scene).split('&') //以&分割
          //取得全部并赋值
          for (var i = 0; i < strs.length; i++) {
            getQueryString[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
          }
          pidtemp = getQueryString['id']
          that.setData({
            detailid: getQueryString['id'], 
            invite_code: getQueryString['myincode']
          })
        }else{
          that.setData({
            detailid: options.id,
            invite_code: options.myincode ? options.myincode : ''
          })
          pidtemp = options.id
        }
        
        that.InitFun(pidtemp)
        that.sysinfoSet()
    
    
      },

整个过程稍微麻烦一点儿，小伙伴耐心看完就会明白，我开始就这样做完了，后面上线测试的时候一直无法生成，找了好久，最后才发现。  
**【注意】**  
后端返给我的图片地址https://zp-png1.oss-cn-beijing.aliyuncs.com/11582446762.jpg没有在小程序中配置**downloadFile 合法域名**，因此无法下载这一点很重要，小伙伴们要仔细查找，避免入坑哦

[Link 1]: https://blog.csdn.net/LLDD2014425/article/details/99680726
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223165229561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1,size_16,color_FFFFFF,t_70
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200223162544323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200223163426744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200223163647558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200223163843193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xMREQyMDE0NDI1,size_16,color_FFFFFF,t_70