uniapp —— 生成带参的小程序码海报分享保存相册并调试（包含后端PHP代码）

uniapp —— 生成带参的小程序码海报分享保存相册并调试（包含后端PHP代码）

生成小程序推广二维码海报，我们在日常的工作当中经常需要用到，因此今天总结了一下开发的过程步骤以及，踩过的一些坑。
温馨提示：完整的代码放在最后面，文章段落分析截取的不是完全的代码。

零、实现效果以及思路

1. 获取微信 access_token；
2. 根据 access_token 调用接口生成特定的小程序码；
3. 获取小程序码并绘画成 canvas；
4. 利用 canvas 生成海报图片；
5. 分享或保存到相册。
   

一、后端获取Token并生成带参的小程序码

为什么需要在后端生成？前端生成不可以吗？
其实，前端也可以自己生成二维码，只是鉴于密钥的安全性问题，这个步骤最好还是交给后端处理，避免泄露；
另外，uni.request 或 wx.request 官方指定不可以直接请求获取 access_token 接口；
最后，前端请求回来 access_token 使用时，会经常性提示 token 过期，用户体验不好。

//把请求发送到微信服务器换取二维码
function httpRequest($url, $data='', $method='GET'){
   
   
	$curl = curl_init();  
	curl_setopt($curl, CURLOPT_URL, $url);  
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);  
	curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);  
	curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);  
	curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);  
	curl_setopt($curl, CURLOPT_AUTOREFERER, 1);  
	if($method=='POST'){
   
   
		curl_setopt($curl, CURLOPT_POST, 1); 
		if ($data != ''){
   
   
			curl_setopt($curl, CURLOPT_POSTFIELDS, $data);  
		}
	}
	
	curl_setopt($curl, CURLOPT_TIMEOUT, 30);  
	curl_setopt($curl, CURLOPT_HEADER, 0);  
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);  
	$result = curl_exec($curl);  
	curl_close($curl);  
	return $result;
}

//生成二维码
function get_qrcode($id){
   
   
	$APPID = "xxxx"; 
	$APPSECRET =  "xxxxxxxxx"; 
	
	//获取access_token
	$access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$APPID&secret=$APPSECRET";
	
	//缓存access_token
	session_start();
	$_SESSION['access_token'] = "";
	$_SESSION['expires_in'] = 0;
	
	$ACCESS_TOKEN = "";
	if(!isset($_SESSION['access_token']) || (isset($_SESSION['expires_in']) && time() > $_SESSION['expires_in'])){
   
   
		$json = httpRequest( $access_token );
		$json = json_decode($json,true); 
		
		$_SESSION['access_token'] = $json['access_token'];
		$_SESSION['expires_in'] = time()+7200;
		$ACCESS_TOKEN = $json["access_token"]; 
	}else{
   
   
		$ACCESS_TOKEN = $_SESSION["access_token"]; 
	}
	
	//构建请求二维码参数
	//path是扫描二维码跳转的小程序路径，可以带参数?id=xxx
	//width是二维码宽度
	$qcode ="https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=$ACCESS_TOKEN";
	$param = json_encode(array("path"=>"pages/weixiurenyuan/weixiurenyuan?id=$id","width"=>150));
	
	//POST参数
	$result = httpRequest( $qcode, $param,"POST");
	
	//生成二维码
	// file_put_contents("qrcode.png", $result);
	$base64_image = "data:image/jpeg;base64,".base64_encode( $result );
	
	return $base64_image; //返回base64图片数据
}

二、绘画canvas

这里有必要说一下，我们判断是否开始绘画 canvas 的节点，就是判断用户是否点击保存或分享，以此来规避频繁请求接口和频繁绘画 canvas。所以，这里选择的处理方式是，当用户点击推广按钮时候：

1. 请求后端获取第一次小程序码，先用 HTML 渲染海报，供用户选择保存或分享；
2. 生成小程序码之后，多次点击推广按钮，不会再次请求后端获取小程序码；
3. 当用户选择保存或分享时，再开始绘画 canvas。

逻辑代码，我们需要先分析一下绘画的步骤：

1. 背景图片绘画，该背景图片是网络图片，需将其先转换为本地临时图片，再绘画，否则真机上 canvas 不显示；
2. 小程序码是 base64 格式，因为 drawImage 方法不支持 base64 图片，因此，需先转换为本地临时图片再绘画，否则真机上 canvas 不显示；
3. 有了思路之后我们开始执行。

// 引入请求后端二维码接口
import {
   
    user_invited } from '@/utils/request/api.js'

export default {
   
   
	data() {
   
   
		return {
   
   
			qrCode: '', // 存储请求回来的base64图片路径
			realShow: false, // 控制poster显示隐藏
			cacheImage: '' // 存储canvas转换而来的图片
		}
	},
	methods: {
   
   
		/**
		 * 控制显示海报
		 * 在当前页面中，如果base64图片路径为空，则请求二维码
		 * 否则，只控制HTML显隐，以减少HTTP请求
		*/
		async show() {
   
   
			if (this.qrCode == '') {
   
   
				await user_invited().then(res => {
   
   
					this.qrCode = res.data
				})
			}
			this.realShow = true
		},
		// 关闭海报
		close() {
   
   
			this.realShow = false
		},
		// 将网络图片转换成本地临时图片
		handleNetworkImgaeTransferTempImage(url) {
   
   
			return new Promise(resolve => {
   
   
				if(url.indexOf('http') || url.indexOf('https') === 0) {
   
   
					uni.downloadFile({
   
   
						url,
						success: res => {
   
   
							resolve(res.tempFilePath);
						}
					});
				}
				else {
   
   
					resolve(url);
				}
			})