微信开发之微信公众平台开发 JS-SDK开发（图像接口实例）-职坐标

微信开发之微信公众平台开发 JS-SDK开发（图像接口实例）

安安 2018-03-14 来源：网络阅读 814 评论 0

摘要：本篇微信开发教程将为大家讲解微信开发编程的知识点，看完这篇文章会让你对微信开发编程的知识点有更加清晰的理解和运用。

本篇微信开发教程将为大家讲解微信开发编程的知识点，看完这篇文章会让你对微信开发编程的知识点有更加清晰的理解和运用。

摘要：本文并非是对微信JS-SDK说明文档的复制，而是通过一个简单的例子来更深入的了解使用微信JS-SDK，具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包（微信JS-SDK），通过微信JS-SDK提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

本文并非是对微信JS-SDK说明文档的复制，而是通过一个简单的例子来更深入的了解使用微信JS-SDK，具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包（微信JS-SDK），通过微信JS-SDK提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

微信JS-SDK提供的11类接口（分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付）在使用方式上完全相同，唯一需要注意的是，这11类接口并不是都开放的，有些接口非认证用户是没有权限的，比如分享接口，小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的接口权限表。

开发前提

· 开发者ID (应用ID和应用密匙)

· 在公众号（服务号）设置——功能设置（JS接口安全域名）中填写已备案的域名

· 服务器环境

· 简单的后台知识，如PHP

· linux服务器，请确保目录有可写权限

本文以php为例

首先在微信开发者平台下载它的示例代码，链接中包含php、java、nodejs以及python的示例代码供第三方参考，这里使用php包。我把php文件夹重命名为weixin放在网站根目录下，如图：

微信公众平台开发 JS-SDK开发

保存图片到本地服务器

因为涉及到上传到本地服务器，所以还需要一个api接口(api.php)，简单展示下上传保存代码：

后端服务

//保存为同级目录下api.phprequire_once './config/app.php';require_once './config/wexin.php';

//curlfunction getcurl($url, $data=array()){

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));

$response = curl_exec($ch);

$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

curl_close($ch) ;

return $response;

}

/**

* 获取微信access_token

*/function get_access_token () {

global $wxConfig;

$url = "https://api.weixin.qq.com/cgi-bin/token";

$data = array(

'grant_type'=>'client_credential',

'appid'=> $wxConfig['appId'],

'secret'=> $wxConfig['appSecret']

);

$file = getcurl($url,$data);

$josn = json_decode($file,true);

$token = $josn['access_token'];

if($token){

return $token;

}else{

return null;

}

/**

* 上传图片

* @param media_id

*/function upload($media_id) {

$access_token = get_access_token();

if (!$access_token) return false;

$url = "//file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;

if (!file_exists(UPLOAD_PATH)) {

mkdir('./upload/', 0775, true); //将图片保存到upload目录

}

$fileName = date('YmdHis').rand(1000,9999).'.jpg';

$targetName = './upload/'. $fileName;

$ch = curl_init($url);

$fp = fopen($targetName, 'wb');

curl_setopt($ch, CURLOPT_FILE, $fp); // 设置输出文件的位置，值是一个资源类型

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);

curl_close($ch);

fclose($fp);

return '/upload/'.$fileName; //输出文件名

}

/**

* 输出json

*/function toJson ($code = 200, $data = array(), $message = 'success') {

return json_encode(array('code' => $code, 'data' => $data, 'message' => $message));

}

if (isset($_GET['api'])) {

$api = $_GET['api'];

//上传

if ($api == 'upload') {

$mediaId = $_POST['media_id'];

$file = upload($mediaId);

if ($file) {

exit (toJson(200, array('url' => $file)));

} else {

exit (toJson(400, null, 'error'));

}

前端页面

再简单修改下sample.php

<?phprequire_once './config/app.php';require_once './config/wexin.php';require_once "./libs/wexin/jssdk.php";

$jssdk = new JSSDK($wxConfig['appId'], $wxConfig['appSecret']);

$signPackage = $jssdk->GetSignPackage();?><!DOCTYPE html><html lang="zh-cmn-Hans"><head>

<title>微信上传DEMO</title></head>

<body>

</article>

wx.config({

debug: true,

appId: '<?php echo $signPackage["appId"];?>',

timestamp: <?php echo $signPackage["timestamp"];?>,

nonceStr: '<?php echo $signPackage["nonceStr"];?>',

signature: '<?php echo $signPackage["signature"];?>',

jsApiList: [

// 所有要调用的 API 都要加到这个列表中

"chooseImage",

"previewImage",

"uploadImage",

"downloadImage"

]

});

wx.ready(function() {

/**

* [weixinUpload 调用微信接口实现上传]

* @param {[function]} choose [选择图片后的回调]

* @param {[function]} upload [上传后的回调]

function weixinUpload(choose, upload) {

wx.chooseImage({

count: 1,

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success: function(res) {

var localIds = res.localIds;

choose && choose(localIds); //选择图片后回调

// 上传照片

wx.uploadImage({

localId: '' + localIds,

isShowProgressTips: 1, //开启上传进度

success: function(res) {

serverId = res.serverId;

upload && upload(serverId); //上传图片后回调

}

});

}

});

}

/**

* [uploadImage 上传图片到本地服务器]

* @param {[type]} mediaId [图片serverID]

* @param {Function} callback [回调]

function uploadImage(mediaId, callback) {

$.ajax({

type: "POST",

url: "api.php?api=upload",

data: {

media_id: serverId

dataType: "json",

success: function(result) {

if (result.code == 200) {

callback(result.data);

} else {

alert("上传失败！");

}

error: function() {

alert("系统异常，请稍后重试");

}

});

}

var $uploadButton = $('#js-upload')

var $uploadPreview = $('#js-preview')

//点击上传按钮

$uploadButton.on('click', function() {

weixinUpload(

function(localIds) {

$uploadPreview.attr('src', localIds); //微信本地图片地址,可以用来做上传前预览

function(serverId) {

uploadImage(serverId, function(data) {

$uploadPreview.attr('src', data.url); //返回真实的图片地址

});

}

);

})

});</script></body></html>

好了，将修改后的代码连同新建的api.php同时上传到服务器。该服务器域名必须和你在微信设置中的域名一致。我上传到了根目录，通过firefox提供的页面二维码功能，在微信上扫一扫即可测试。截图如下：

微信上传图片测试

图片说明

· [图一] 表示我们的微信配置正确

· [图二] 点击上传图片按钮后弹出拍照，从手机相册选择等功能按钮

· [图三] 进入了手机相册

· [图四] 选择一张图片后，返回该图片的localId

· [图五] 利用localId作为图片预览，并且生成了serverID

· [图六] api 上传并保存了图片到本地服务器，返回图片在本地服务器的地址，并且回调在了页面上

小结

通过以上两个简单的例子，基本可以掌握微信JS-SDK的使用方法。11个接口使用方式基本相同，你可以一一尝试。官方的说明是：
通过ready接口处理成功验证
通过error接口处理失败验证
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

· success：接口调用成功时执行的回调函数。

· fail：接口调用失败时执行的回调函数。

· complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

· cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

· trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

具体可参考官方API。

希望这篇微信开发文章可以帮助到你。总之，同学们，你想要的职坐标微信开发频道都能找到!

微信支付开发的场景微信小程序实战教程微信公众号开发者

本文由 @安安发布于职坐标。未经许可，禁止转载。