首页 > PHP专栏 > 如何在微擎里使用微信预览图片接口previewImage?
2015
11-11

如何在微擎里使用微信预览图片接口previewImage?

1、在微擎的控制器里获取公众号appid、timestamp、nonceStr和signature等信息,然后赋值到模版。

public function doMobileimages(){
    $images = array(); //把图片链接写到数组里
    $signPackage = $this->getJssdkConfig();
    
    include $this->template("images");
}

private function getJssdkConfig(){
	global $_W;
	$jsapiTicket = $_W['account']['jsapi_ticket']['ticket'];
	$nonceStr = $this->createNonceStr();
	$timestamp = TIMESTAMP;
	$url = $_W['siteurl'];
	$string1 = "jsapi_ticket={$jsapiTicket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
	$signature = sha1($string1);
	$config = array(
		"appId"		=> $_W['account']['key'],
		"nonceStr"	=> $nonceStr,
		"timestamp" => "$timestamp",
		"signature" => $signature,
	);
	return $config;
}
private function createNonceStr($length = 16) {
	$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	$str = "";
	for ($i = 0; $i < $length; $i++) {
		$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
	}
	return $str;
}

2、在模版里循环遍历图片。

<div class="wrap af4" id="previewImage">
	<ul class="slidebox">
	    {loop $images $img}
		<li><a><img tabindex="2" src="{$_W['attachurl']}{$img}" ></a></li>
	    {/loop}
	</ul>
</div>

3、添加JS调用微信previewImage图片预览接口。

<script type="text/javascript">
wx.config({
	debug: false,
	appId: '{$signPackage["appId"]}',
	timestamp: {$signPackage["timestamp"]},
	nonceStr: '{$signPackage["nonceStr"]}',
	signature: '{$signPackage["signature"]}',
	jsApiList: [
		'previewImage'
	]
});

document.querySelector('#previewImage').onclick = function () {
  var imgList = [
		<?php foreach($images as $img){
		   echo '"'.$_W['attachurl'].$img.'",';
		} ?>
	];
  wx.previewImage({
    current: imgList[0],
    urls: imgList
  });
};
</script>

留下一个回复